Google Chrome Summit: Best UX patterns for mobile web apps

by Luke Wroblewski November 20, 2013

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.