In his presentation at the Google Chrome Dev Summit in Mountain View CA, Paul Kinlan walked through basic mobile Web design guidelines. Here are my notes from his talk:
- Mobile is taking off and people are gravitating toward mobile experiences.
- Native apps are leading the way: voice interactions, card interactions. Mobile Web experiences don't take advantage of these same kind of experiences.
- 53% of the top 1,000 Alexa sites don't have mobile Web experiences. These get scaled down to fit. 25% of theses sites don't even fit on the screen.
- 83% of sites have hard to touch tap targets. 60% have readability issues. 10% used plugins that don't work on mobile (Flash, Java, Silverlight).
- Google is building PageSpeed Insights for UX: it checks viewport configuration, determines if text is legible, touch target sizes, and non-supported viewports.
- This tool tells you which controls to make larger, which font sizes need to be increased, and how the viewport needs to be configured.
- Display: how is the content presented on the device. Interaction: how people get things done on your site.
- Always use a viewport to create a mobile experience. Use device-width to make sure things size correctly on different devices.
- Browsers try to compensate for the fact that the desktop sucks on mobile. Text is auto-resized to make it bigger on Chrome. Using viewport gives you more control.
- Fit the content into the viewport. Scrolling across multiple dimensions frustrates users and some browsers even enable scroll lock.
- Media queries allow you to adapt your site design to different screen sizes.
- Don't size your media queries to specific devices, size them based on where content/design breaks.
- If users can't read text, it doesn't matter how beautiful your font is. 12pt, 1em. 16 pixels is a minimum for legibility. Good line height and contrast also impact legibility.
- Limit the use of Web Fonts on mobile. If you use them all, use them for headings not body text. This helps prevents FOUT (flash of unstyled text).
- Click disambiguation: Chrome brings up a magnified view of the screen to help users pick exactly what they wanted to click on.
- Tap targets on the Web should be 7mm large and include 2mm of padding.
- Labels in forms double the amount of touch target size for inputs.
- Chrome is removing the 300ms delay on clicks on mobile. they have removed the double tap to zoom in gesture when: content is set to viewport.
- USe specialized input types in forms to increase accuracy of text input in mobile forms. Take advantage of autocomplete by using common field names.
- Plan for request autoComplete: this API will allow you to use Javascript to help complete forms.