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

rajesh.lal@nokia.comhttp://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