Downloaded 81 times
Uploaded byRaj Lal
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal
The document provides 10 essential tips for optimizing mobile website design, focusing on user relevance, simplicity, and functionality. It emphasizes the importance of consistent navigation, optimizing for various screen resolutions, and incorporating good UX design principles. Additionally, it suggests maintaining links to both mobile and desktop versions of the website for user convenience.
More Related Content
Similar to 10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal
- 1. Presented by: 10 Tipsfor Mobile Website Design Rajesh Lal, Nokia
- 2.
- 3. 3 Short, easy toremember Easy to type, saves time Directly to mobile website Redirect to existing mobile site
- 4. 4 Make it Relevant tothe User
- 5. 5 Site should beUser driven User need at-a-glance Info Minimum interaction Select top 20% functionality 20% effort 80% result 80/20 Rule
- 6.
- 7. 7 Difficult Text Entry InconsistentConnectivity Allow for one hand use Limit to 3 level navigation
- 8.
- 9. 9 Greater PPI =Better quality in display (usually) Mobile Phone Screen size Resolution Mode PPI Android G1 3.2 320 x 480 Portrait 180 BlackBerry 2.4 480 x 360 Landscape 165 iPhone 3.5 320 x 480 Portrait 163 Maemo N900 3.5 800 x 480 Landscape 265 Palm Pre 3.1 320 x 480 Portrait 186 S60 Nokia 2.0 240 x 320 Portrait 167
- 10.
- 11.
- 12. Core features for BasicPhone Add Rich UI for Smartphone Optimize for Your Customer’s Phone 12
- 13. 13 Basic Version SmartphoneVersion
- 14.
- 15. 15 Optimize images, css,js Server Trips, ImageMaps Include CSS and JS in page Single page, hidden content
- 16.
- 17. 17 Allow Info toflow downward Use Blocks of Information Optimize Individual block display No Horizontal Scroll
- 18. 18 Apply Good UX DesignPrinciples
- 19. 19 Simple words forlinks, buttons One Idea One Page No Pop-up, mouseover, refresh Avoid ext. links, frames, Ajax Don’t use Use
- 20.
- 21. 21 Width set at100 %, Test portrait and landscape
- 22. 22 10 Keep a Linkto the Desktop Version
- 23. 23 In Smartphone version keepa link to regular website
- 24. Get all theseand 50+ other Tips In chapter on Mobile Web Usability
- 25. Presented by: Thank You rajesh.lal@nokia.com http://smallinterface.com Nowthis is not the end. It is not even the beginning of the end. But it is, perhaps, the end of the beginning. - Winston Churchill
Editor's Notes
- #4 Standard practice accepted by most mobile users Use content adaptation for phones http://website.mobi http://mobile.website.com http://website.com/mobile http://website.com/m
- #6 A mobile web site needs to be user-driven. Know why your user visits your web site and provide only those features in the mobile version. Be aware that mobile users need information with minimum interaction. List the set of functions from the desktop web site you want to port to the device. My suggestion is to take only the top 20 percent of useful features from the desktop web site to the mobile web. • List the most important features for which the mobile user will open the site while on the move; these should be part of the home page.
- #8 Difficult Text Entry so try to avoid and keep Website "Read Only" User most likely will use Mobile with one hand Battery Powered Inconsistent Connectivity • Restrict your mobile web site to three levels of navigation. A mobile user has a very short span of time; try to get him what he is looking for as fast as possible. Standard search navigation is Search to Result to Detail page. If the user searches for a particular item, the navigation should be Search to Detail page, and at any page the search should be visible for reuse; the user should not need to go back three steps to get to the search. • Save user settings. This is very important and gives a better user experience by minimizing user interaction. Use the browser cache effectively to remember the user’s last set of configurations. • Make the functions accessible. Allow maximum interaction—even the basic mobile browser allows for access keys that map the phone keys to the navigation (see case study #4, Flickr). Use them to provide shortcut keys for navigation. minimizing user interaction. – cache Information / settings
- #9 for all popular mobiles
- #13 one basic version optimized for mass-market mobile device and a richer version for smartphones • Start with a basic version for older mobile phone browsers and then add extra features for the smartphone version. This helps you identify the core features of the desktop web site that need to be ported to the mobile version. Use the 80/20 rule (80 percent of the results comes from 20 percent of the features) to identify the top 20 percent of features. • Create only two mobile versions, one for the basic phone and one for smartphones, and then optimize the richer version according to your customer’s phone. If you know 80 percent of your users use Nokia phones, optimize the web site for that device and use 100-percent width, which accommodates all other similar devices. Use content adaptation for phones with similar browser capabilities but different dimensions to adapt to a particular device. There are two simple goals in mobile web design—to accommodate the maximum number of users and devices, and to do that with the least amount of effort. To achieve this, you have to start with a flexible reference design—the bare-minimum functionality you want in your mobile web page—and then use a standard layout that will work across the devices. Let’s take a closer look at those two concepts. One Basic versions of a mobile web site optimized for mass-market mobile devices One Rich Version to accommodates all the Smartphones
- #14 one basic version optimized for mass-market mobile device and a richer version for smartphones • Start with a basic version for older mobile phone browsers and then add extra features for the smartphone version. This helps you identify the core features of the desktop web site that need to be ported to the mobile version. Use the 80/20 rule (80 percent of the results comes from 20 percent of the features) to identify the top 20 percent of features. • Create only two mobile versions, one for the basic phone and one for smartphones, and then optimize the richer version according to your customer’s phone. If you know 80 percent of your users use Nokia phones, optimize the web site for that device and use 100-percent width, which accommodates all other similar devices. Use content adaptation for phones with similar browser capabilities but different dimensions to adapt to a particular device. There are two simple goals in mobile web design—to accommodate the maximum number of users and devices, and to do that with the least amount of effort. To achieve this, you have to start with a flexible reference design—the bare-minimum functionality you want in your mobile web page—and then use a standard layout that will work across the devices. Let’s take a closer look at those two concepts. One Basic versions of a mobile web site optimized for mass-market mobile devices One Rich Version to accommodates all the Smartphones
- #16 Both version optimized for bandwidth—plain text with optimized images. • Optimize everything. Optimize images for size; a PNG image can be a good trade-off between quality and size. CSS and JavaScript should also be optimized for size. A number of online optimization tools are available for this purpose. Don’t forget to test after optimization. If you are using JavaScript libraries, try to reduce the size by removing the functions you don’t need. • Reduce server trips by using image sprites and merging CSS and JavaScript in the same page, instead of using additional include files. Chapter 8 goes into this subject in more detail. Reduce Server Trips for better user experience Try to include optimized css and JS in the page.
- #18 Standard Layout has Vertical Scroll layout allows the information to flow linearly downward, so users can scroll down for more news headlines. With blocks of information that can be individually displayed on the mobile screen Grouped into multiple categories The layout allows the information to flow linearly downward, so the user can scroll down for more news blocks, headlines, and so forth no horizontal scroll like the desktop version.
- #20 Minimal or No Advertisement Standard abbreviations are accepted One Page One Idea • Avoid the following: Pop-up windows, mouse-hover menus, auto refresh, auto redirects, external links, horizontal scrolling, and frames. • Ajax functionality, or progressive enhancement, if used sparingly can give a great user experience. • Testing should be done on actual devices. There are online services like deviceanywhere.com that enable remote testing on different mobile devices. • Simplify everything. Use clear, short, simple words for links, buttons, and menus. Standard abbreviations are accepted for titles. • One idea on one page. Always focus on one idea on a mobile web page. For a news site, a category needs to have a page of its own; don’t try to accommodate everything on a single page with a large vertical scroll. • Thematic consistency. Keep some level of consistency with the original web site, like logo and color themes to keep the “feel” of the desktop web site. Don’t make drastic changes to the mobile site. If you are targeting a particular phone, use the design guidelines for the phone. • Color. When using color on a mobile web page, consider the sun, shade, contrast, and brightness a user might face on the move. Use color not only for style but also for function, such as red for alert. But don’t convey important information only by color. For example, even if an error is displayed with red, there should also be text to convey the message. • Visual aesthetic. Make the mobile web pages visually pleasing. Use visual cues instead of raw data, spaces between sections, only a few colors. One of the suggestions I give to all is to have a high noise-to-signal ratio as your guiding principle. Noise-to-signal here refers to the contrast between unimportant information (the noise) and the important information (the signal). If your color scheme is drowning your important information amidst the unimportant information, change it. Make the color scheme so that the most important information stands out of the rest. It should be clearly visible and more attractive than the rest of the page. No need for help. Although service web sites provide a simple help for beginners, a mobile web site should be intuitive enough on its own. If you must, keep the help to one page. And keep text input to a minimum, replacing them with select items on forms where possible. No need for help or one page help
- #22 Keep the width of the navigation set at 100 percent to accommodate devices of different dimensions. The Smartphone version width is set to 100 percent to accommodate devices with different dimensions. • Future-proof your mobile web site. Test the site for both portrait and landscape mode, and make necessary changes to ensure the site displays nicely on both. Often, the proper use of styles (100 percent width) can solve this issue. This helps make the web site future-proof.