10 tips for mobile website design - meego conference dublin, ireland 11/2010 @irajlal
DESCRIPTION
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.TRANSCRIPT
Presented by:
10 Tips for Mobile Website Design
Rajesh Lal, Nokia
2
1Create m subdomainhttp://m.website.com
3
Short, easy to rememberEasy to type, saves time
Directly to mobile website Redirect to existing mobile site
http://m.website.com
4
2Make it Relevant to the User
5
Site should be User driven User need at-a-glance Info Minimum interaction Select top 20% functionality
20% effort80% result
80/20 Rule
6
3Develop forMobile User
7
Difficult Text Entry Inconsistent Connectivity
Allow for one hand use Limit to 3 level navigation
8
4Understand Browser Layout
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
5Create 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
6Optimize Everything
15
Optimize images, css, js Server Trips, ImageMaps Include CSS and JS in page Single page, hidden content
16
7Make it Scroll Vertically
17
Allow Info to flow downward Use Blocks of Information Optimize Individual block display No Horizontal Scroll
18
8Apply Good UX Design Principles
19
Simple words for links, buttons One Idea One Page
No Pop-up, mouseover, refreshAvoid ext. links, frames, Ajax
Don’t use Use
20
9Future Proof for Landscape Layout
21
Width set at 100 %, Test portrait and landscape
22
10Keep a Link to theDesktop 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
[email protected]://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