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 are usually come with full keyboard, accurate pointing device, large screen and powerful CPU/GPU. On the other hand, mobile has limited/virtual keyboard, finger pointing device, small screen (can rotate), less capable CPU/GPU. Therefore, Mobile Web Browser still have a long way to fully satisfy the users' needs.
- 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 apparatus 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.
- 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.
- THE 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.
References:
http://www.lukew.com/ff/entry.asp?1028
http://www.lukew.com/ff/entry.asp?1029
http://live.visitmix.com/MIX10/Sessions/CL23
