17
Think Before You Design Web Pages For Mobile

Think Before You Design Web Pages For Mobile

Embed Size (px)

Citation preview

Page 1: Think Before You Design Web Pages For Mobile

Think Before You DesignWeb Pages For Mobile

Page 2: Think Before You Design Web Pages For Mobile

www.heliossolutions.no

While building a web page it is important to first

consider who the users are and how will they be

viewing the website.

However, it is important for the developers to

consider the resolution, color options and available

functions, not just the devices it's going to be viewed

on.

Page 3: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Test on Various Devices

The first step should be to test the site on as many devices as possible.

Emulators can be used to do the testing, however it won't give the same feeling as trying to navigate on the tiny screen.

Hence, it is important to test on actual devices to get the correct picture of how it looks and functions.

Page 4: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Degrade The Pages

The pages may be written for flash-enabled

widescreen browsers, but also consider the tiny

screen requirements, done cell phones won't be able

to handle any special features beyond XHTML Basic

Page 5: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Page Layout for Smartphone

Web pages on the smartphone condenses all the

column down into a small window, this makes it very

hard to read without zooming, and zooming becomes

tiresome after a while.

Tiny Screen

Page 6: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Page Layout for Smartphone

Here, it becomes important to optimise the site for

mobile devices for better user experience.

Tiny Screen

Page 7: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Page Layout for Smartphone

Long segments of texts are difficult to

read on a Smartphone.

Hence, putting them in multiple pages makes it

easier to read.

Divide Pages

Page 8: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Links and Navigation

It's not hidden that while typing a long URL on a cell phone, it makes the user annoyed, it's a pain.

It is important to make the  mobile user’s experience worthwhile when the site is being accessed on a Smartphone.

Hence consider keeping the URL as short as possible.

Keep Short URL

Page 9: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Links and Navigation

Long link texts are easier to tap on a Smartphone than a one word link.

Long link text

Page 10: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Links and Navigation

The tiny screen of the smart phones makes it difficult to tap on a link that is too short without zooming in,  many users will leave it and go somewhere else.

Links with about 3-4 words will make sense in such cases.

Long link text

Page 11: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

It's ok to hide the navigation on a web page designed for a mobile device and making it appear only when the user needs it.

This will count for a better user experience.

Hide Navigation

Links and Navigation

Page 12: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Things to Avoid

Mobile phones don't support flash, hence it would be a good idea to not include it while designing for mobile device.

Flash

Page 13: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Things to Avoid

Even if the mobile browser supports them, it would

be difficult to include it considering the dimension of

the screen.

Frames will make it difficult for the users to read

the content, it's not meant for mobile phones.

Frames

Page 14: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Things to Avoid

Tables are a big No! No! When designing for mobile

devices.

They are not supported by every cell phone plus it

might end up giving strange results.

Tables

Page 15: Think Before You Design Web Pages For Mobile

Here Are Few Guidelines For Building Web Pages For Mobile

www.heliossolutions.no

Things to Avoid

All the fonts are not necessarily supported by all

the smart phones. It is important to test the fonts

before deciding on one.

Following these steps will at least give you a better

design for the smart phones.

Fonts

Page 17: Think Before You Design Web Pages For Mobile

802 Iskon Atria 2,Gotri Road,

Baroda.Gujarat.

India.

http://heliossolutions.no

[email protected]

+91 265 653 5602 +91 98250 96949

+49 89954 57230

+31 222788105

+1 585 310 3829

+ 41 79 791 5956