Mobile site design best practices

1,156 views
1,097 views

Published on

Best Practices for designing Mobile web sites

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,156
On SlideShare
0
From Embeds
0
Number of Embeds
103
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mobile site design best practices

  1. 1. Mobile Best Practices Design, Device & Regional Considerations September 8, 2010
  2. 2. MOBILE DESIGN CONSIDERATIONS 1. Minimize gratuitous imagery or advertisements Many mobile users have limited data plans so reducing the page weight typically result in faster downloads (and lower bills). 2. Accommodate for multiple user navigation preferences Some users prefer browsing, others prefer searching. Accommodate for both use cases. 3. Create custom apps for customized transactional scenarios, rather than for informational content Transactional applications that require user authentication and custom data can benefit from custom platform-based apps. 4. Do not use Flash Mobile platforms (even the most recent smart phones) have trouble displaying Flash. Native browsers on the iPhone and Android do not support Flash. 5. Accommodate for common target URL variations Ensure access on “m.sitename.com” & “www.sitename.mobi” September 8, 2010 © Ayantek, LLC Confidential 2
  3. 3. MOBILE DESIGN CONSIDERATIONS 6. Ensure prominent Home and Back links on all pages Phones may not have these easy-navigation buttons, so it can be important to provide these standard functions on your mobile pages 7. Utilize site branding (e.g. logo) but keep it minimal Brand elements help users maintain site context 8. Provide link to allow users to browse the full HTML site Some users (especially Smart phone users) choose to start their experience on the mobile site and then switch over to the full site. 9. Customize the layout to the needs of your users News sites were among the early adopters of the mobile platform. Layouts and content considerations typically used by news sites may not necessarily carry over to your site audience. 10. Limiting choices Given the limited screen real-estate, users benefit by having a small set of discrete selections on each screen. September 8, 2010 © Ayantek, LLC Confidential 3
  4. 4. MOBILE DESIGN CONSIDERATIONS 11. Maintain a site depth of about 4 – 6 levels Users tend to lose context and become concerned about losing anchor. 12. Accommodate larger fonts and spacing between links Although screen real-estate is limited, having links close to each other might result in users selecting the wrong link. Provide users with the ability to increase font sizes without breaking the layout. 13. Designing for different screen sizes Given the variance in screen real-estate and resolution, pages designed for a low-end phone may render poorly on a high-end smart phone and be difficult to use, requiring the user to zoom in to view the page contents. 14. Designing for the right device Feature Phones (e.g. Moto RAZR), Smart Phones (e.g. DROID), PDA (e.g. Pocket PC), and Voice only phones have different capabilities. September 8, 2010 © Ayantek, LLC Confidential 4
  5. 5. REGIONAL CONSIDERATIONS 15. Accommodate for regional usage patterns The BRIC economies use mobile devices differently than developed economies. This is partly because of the existence of better mobile infrastructure than internet & broadband infrastructure. September 8, 2010 © Ayantek, LLC Confidential 5
  6. 6. COMPARISON OF CHINA AND US USER • Usage patterns for the average Chinese user is different than for their US counterparts. September 8, 2010 © Ayantek, LLC Confidential 6
  7. 7. COMPARISON OF CHINA AND US USER September 8, 2010 © Ayantek, LLC Confidential 7
  8. 8. M.BOSTON.COM: A CASE-STUDY Clean design with minimal branding Ability to increase font sizes Search and navigation controls are both available Clear hierarchy of content: Important content is displayed at the top with easy navigational paths for other content. Mobile site has link to full site Adequate spacing between links makes it easy to select them on a touch-screen smartphone. Imagery and advertisements are well-aligned with the page content and not distracting. September 8, 2010 © Ayantek, LLC Confidential 8
  9. 9. THANK YOU! September 8, 2010

×