Presented by:
10 Tips for Mobile Website Design
Rajesh Lal, Nokia
2
Create m subdomain
http://m.website.com
3
Short, easy to remember
Easy to type, saves time
Directly to mobile website
Redirect to existing mobile site
4
Make it Relevant
to the User
5
Site should be User driven
User need at-a-glance Info
Minimum interaction
Select top 20% functionality
20% effort
80%
re...
6
Develop for
Mobile User
7
Difficult Text Entry
Inconsistent Connectivity
Allow for one hand use
Limit to 3 level navigation
8
Understand
Browser Layout
9
Greater PPI = Better quality in display (usually)
Mobile Phone Screen size Resolution Mode PPI
Android G1 3.2 320 x 480 ...
10
11
Create
Two Versions
Core features
for Basic Phone
Add Rich UI for
Smartphone
Optimize for
Your
Customer’s
Phone
12
13
Basic Version Smartphone Version
14
Optimize
Everything
15
Optimize images, css, js
Server Trips, ImageMaps
Include CSS and JS in page
Single page, hidden content
16
Make it Scroll
Vertically
17
Allow Info to flow downward
Use Blocks of Information
Optimize Individual block display
No Horizontal Scroll
18
Apply Good UX
Design Principles
19
Simple words for links, buttons
One Idea One Page
No Pop-up, mouseover, refresh
Avoid ext. links, frames, Ajax
Don’t us...
20
Future Proof for
Landscape Layout
21
Width set at 100 %, Test portrait and landscape
22
10
Keep a Link to the
Desktop Version
23
In Smartphone version
keep a link to regular website
Get all these and 50+
other Tips
In chapter on
Mobile Web Usability
Presented by:
Thank You
rajesh.lal@nokia.com
http://smallinterface.com
Now this is not the end.
It is not even the beginni...
Nächste SlideShare
Wird geladen in …5
×

10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal

8.512 Aufrufe

Veröffentlicht am

Ten Tips to design Mobile website for maximum number of users and devices in the least amount of time.

How to create a mobile version of your website? Do you need to optimize your current website for mobile devices or design a completely new website? Do you need to worry about different platforms, Windows Mobile, iPhone, Symbian, Blackberry, Linux, Brew, Android, Nokia and MeeGo? What resolution, what screen size you should target, and what is this PPI anyway? In this session, mobile web usability expert and co-author of Beginning Smartphone Web Development, Rajesh Lal will discuss ten pragmatic tips, for designing website for mobile devices.

Veröffentlicht in: Technologie, Design
1 Kommentar
5 Gefällt mir
Statistik
Notizen
Keine Downloads
Aufrufe
Aufrufe insgesamt
8.512
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4.217
Aktionen
Geteilt
0
Downloads
78
Kommentare
1
Gefällt mir
5
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • 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
  • 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.
  • 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
  • for all popular mobiles
  • 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

  • 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

  • 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.
  • 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.
  • 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

  • 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.
  • 10 Tips for Mobile Website Design - MeeGo Conference Dublin, Ireland 11/2010 @iRajLal

    1. 1. Presented by: 10 Tips for Mobile Website Design Rajesh Lal, Nokia
    2. 2. 2 Create m subdomain http://m.website.com
    3. 3. 3 Short, easy to remember Easy to type, saves time Directly to mobile website Redirect to existing mobile site
    4. 4. 4 Make it Relevant to the User
    5. 5. 5 Site should be User driven User need at-a-glance Info Minimum interaction Select top 20% functionality 20% effort 80% result 80/20 Rule
    6. 6. 6 Develop for Mobile User
    7. 7. 7 Difficult Text Entry Inconsistent Connectivity Allow for one hand use Limit to 3 level navigation
    8. 8. 8 Understand Browser Layout
    9. 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. 10. 10
    11. 11. 11 Create Two Versions
    12. 12. Core features for Basic Phone Add Rich UI for Smartphone Optimize for Your Customer’s Phone 12
    13. 13. 13 Basic Version Smartphone Version
    14. 14. 14 Optimize Everything
    15. 15. 15 Optimize images, css, js Server Trips, ImageMaps Include CSS and JS in page Single page, hidden content
    16. 16. 16 Make it Scroll Vertically
    17. 17. 17 Allow Info to flow downward Use Blocks of Information Optimize Individual block display No Horizontal Scroll
    18. 18. 18 Apply Good UX Design Principles
    19. 19. 19 Simple words for links, buttons One Idea One Page No Pop-up, mouseover, refresh Avoid ext. links, frames, Ajax Don’t use Use
    20. 20. 20 Future Proof for Landscape Layout
    21. 21. 21 Width set at 100 %, Test portrait and landscape
    22. 22. 22 10 Keep a Link to the Desktop Version
    23. 23. 23 In Smartphone version keep a link to regular website
    24. 24. Get all these and 50+ other Tips In chapter on Mobile Web Usability
    25. 25. Presented by: Thank You rajesh.lal@nokia.com http://smallinterface.com Now this is not the end. It is not even the beginning of the end. But it is, perhaps, the end of the beginning. - Winston Churchill

    ×