Category: usability

Thanks for the Input Types (and curses upon them what ain’t)

Are you using HTML 5 and the new form input types with the form elements on your sites and apps? Especially on your mobile apps? If you are, then I say THANK YOU!

If you are not, and I am attempting to fill in your form on my smart phone, I’m probably cursing your name.

A Primer for Those Who Need It

What are input types? I’m sure you’ve used them if you’ve built a form. Before HTML5, most input types were text. <input type=”text”> New input types that came along with HTML5 are

  • search
  • email
  • website
  • phone
  • range
  • number
  • date
  • time
  • color

When you use the proper input type, a mobile device will display a screen or keyboard intended to help you complete your task. For example, if you use <input type=”search”> you get a search box automatically.

FirefoxScreenSnapz001

If you use <input type=”email”> You get a keyboard with an @ sign and a dot (.) right on top.

FirefoxScreenSnapz002

Similar keyboard goodies happen with the other input types: phone gives you a number pad, date gives you a calendar, and so on.

If you haven’t started using the new form input types yet, why the hell aren’t you?

Useful links: Adaptive content, troubleshoot WordPress, design principles

Notes from Karen McCrane’s talk about Adaptive Web Content at the latest An Event Apart. Luke Wroblewski took excellent notes.

Interesting tips for troubleshooting a WordPress site from Kristarella.

Design Principles for gov.uk. Unlike WCAG or some set of principles from the W3C, this document only contains 10 easily readable principles. They are,

  1. Start with needs*
  2. Do less
  3. Design with data
  4. Do the hard work to make it simple
  5. Iterate. Then iterate again.
  6. Build for inclusion
  7. Understand context
  8. Build digital services, not websites
  9. Be consistent, not uniform
  10. Make things open: it makes things better

Useful links: display:none, mobile input, touchscreens

display: none; Or The things you think are common knowledge but really they aren’t. Worth your time, especially if you are using responsive design and display:none; figures into what you’re doing.

Mobile Input Methods. Here’s another post that will teach you a lot about what you thought you already knew, but don’t.

Even Microsoft has given in to the touchscreen trend. As people scramble madly to come to terms with Windows 8, global moxie declares, New Rule: Every Desktop Design Has to Go Finger Friendly.

 

Useful links: GitHub, Retina display, UX, Circuit Boards

Want a Date? Try GitHub. I just love this. It’s funny and real. And the only way to appreciate it is to already know what GitHub is for.

10 Tools for Optimizing for Retina Display by Craig Grannell a .net magazine.

University Websites: What Users Want Vs. What they Get. The results of this survey remind me of a university redesign program I attended a few months back that really improved user interaction: Getting in Bed with Your Users.

A quick video about how we may reduce the mounds of electronic waste currently polluting the earth. The secret? Really hot water.

Useful links: WCAG, NOT selector, touchscreen thinking

Making Your Website Accessible, Part 1: Understanding WCAG is an interesting look at WCAG. In addition to explaining the basics of using WCAG, the author also discusses some of the drawbacks and problems.

Here’s a video of Russ Weakley explaining the CSS NOT selector.

 IA in the touchscreen era. This is a long post, but I promise you’ll never be bored reading it.

Useful links: Full background, Accessible Themes, Student Guide

How Full Page Background Images Affect the User Experience give some interesting points about full page backgrounds that I’d never considered. Plus a link to a how to at CSS Tricks if you want to try out a full page background.

Accessible Joe announced a project to create accessible WordPress themes called Cities. He’s working on one for Los Angeles. Karen Mardahl @kmdk is working on a Copenhagen theme. For Syndey, Australia, there’s Lisa Herrod @scenariogirl. Char James-Tanny @CharJTF is working on one for Boston. Jennison Asuncion @Jennison has one going for Toronto. All these new accessible themes will be available free through wordpress.org. @AccessibleJoe asks that you DM him on Twitter if you’d like to participate in this project. You can join one of the existing teams mentioned above, or organize for a new city.

A Student’s Guide to Web Design contacted me on Twitter, so I checked them out. Their purpose is, “equipping students after graduation for the design industry.” Recent grads might find a useful community there.