Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

8,753 views

Published on

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.

Published in: Technology, Design
  • Get my book on Mobile User Interface design guidelines and best practices here http://www.designuserinterface.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×