MIX10: Designing & Developing for the Rich Mobile Web

by Luke Wroblewski March 17, 2010

Joe Marini's Designing and Developing for the Rich Mobile Web presentation at Microsoft's MIX10 conference outlined several high-level considerations for mobile Web site design.

  • We’ve come a long way from WML, 160 pixel screens, and numeric keypads. But the mobile Web is still quite different from the desktop.
  • Desktop: full keyboard, accurate pointing device, large screen, Powerful CPU/GPU
  • Mobile: limited/virtual keyboard, finger pointing device, small screen (can rotate), less capable CPU/GPU
  • Mobile user: typically on the go in an unpredictable environment, interested in for quick glance-able information, focused on discrete individual tasks, is often distracted.
  • Mobile users have different expectations: immediate access to important information, information augmented by the real world (time, place, etc.), a user’s surroundings may effect expectations
  • Design for One Web: provide users access to the same information regardless of device. This does not mean you should give them the same presentation on every device.
  • Design for the finger, not the stylus. Fingers are more dexterous than styluses. Typical fingertip size is 40 to 80 pixels. Hit targets need to be appropriately sized to ensure they work well in mobile contexts.
  • Stylus will work fine when the UI is optimized for fingers.
  • Good mobile apps focus on a few important tasks. Resist the temptation to make all the features of your main site into the ones that are most critical for mobile.
  • Design pages with less fonts and colors. Most browsers on mobile do not support multiple fonts. Avoid gratuitous graphics and animations.
  • CSS sprites might not work on your mobile site because they can get scaled down by some content delivery networks
  • Minimize required input: entering data on a phone can be tiresome and error prone. Only require the minimum amount of information to get the job done. Sensible default values and cookies can also speed up the task of data entry.
  • Use well defined standards to code mobile Web pages. Always specify a DOCTYPE. Avoid things that cause issues: framesets, tables used for layout, nested tables, image maps, reliance on plug-ins or DHTML behaviors.
  • Adapting Content to Mobile. Your options are: do nothing, basic mobile adaptation, multi-serving content, mobile specific design
  • Basic mobile adaptation: META tags for basic mobile adaptation: tell the browser that pages have been laid out specifically for mobile. Viewport controls how your content is placed on a mobile screen. Set by default to 1024 but can be adjusted in META tags.
  • Multi-serving content: same page, different devices, styled right. Provide a different style sheet for the page. Can check for screen width and then set appropriate styles to the page. Not all browsers support media queries but testing for page width works across more devices.
  • Mobile specific design: Web pages specifically coded for mobile browsers. Can detect user agents. MDPF and WURFL –can be used to detect browser types. Can use Javascript for capability detection. Dom support, CSS positioning, etc.
  • Windows Phone Series 7 has taken IE7 for the phone and added some enhancements from IE8 to it: additional script functions, viewport settings, frameset handling, and navigating to .xhtml files.