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...
Prochain SlideShare
Chargement dans…5
×

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

8 651 vues

Publié le

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.

Publié dans : Technologie, Design

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

×