Technology : The Vision of Future: Making Web Handheld Device friendly

The next generation of websites are going from desktop to laptop to handheld devices.
Overall the world the ratio between number of mobile phones and desktop is varying largely , number of handheld device users are increasing greatly than desktop / laptop users.
This may be the evolution of web world and being aware of approaches to make your websites handheld device friendly would be the survival of fitest.

After researching on handheld friendly web , I found four major approaches that could be adapted to build handheld device friendly web. May be there are many but I found these four.

Please advice me if you know anything better than this I am still hunting!

1. Responsive Web Design:

This technique is widely used lately. In this technique same url is used and based on viewport size, media queries change the layout / styles in website.

CSS 3 media queries have bunch of useful attributes which can help to build websites handheld devices friendly.

‘Orientation’ attribute of media queries helps to develop ipad friendly website wherein website styles changes based on orientation of the iPad.

/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

/* Styles */

}

/* iPads (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

/* Styles */

}

In this technique images are also resized according to screen size. However images which are not intended to display on handheld devices (using “display: none“ ) are not shown on screen but in background it does gets downloaded on mobile.

Because to display resizable images <img> tag is used and gets downloaded irrespective of its display property in CSS.

Being mobile phone users have low storage capacity loading unwanted images should not be acceptable.

But the issue is all browsers do not support CSS 3 completely.

Popularly content based websites uses RWD.

2. Redirect Users to different URL:

Use different url for mobile version of website. Detect user-agent and redirect user to mobile version url of website.

Create a flexible website layout here based on standard screen size or meta tags used to stretch page to full available width of viewport in iOS , Android devices.

WAP / HTML-MP :

This is the type of markup used to develop mobile friendly websites.

In earlier versions of mobile friendly websites, WML was widely used. If you have fixed width layout then may be you would most likely to go for this approach. But it is restricted in use. And mostly mobile phones now support normal HTML / XHTML.

So if your website statistics says mostly your users are using old mobile phones you can still consider this option.

Drawbacks in this approach: will need to maintain two sets of website.

3. Provide URL on desktop version:

Buld a mobile version of website and provide a link to mobile site on desktop / laptop version site. So user can go to any site as required.

4. Hybrid way:

Responsive web design to layout your design and detect user agents to organize content on your website.

Website statistics should be analysed and depending upon decision can be taken based on user behavior.

References:

Sunday, October 9, 2011

Making Web Handheld Device friendly