Technology : The Vision of Future: October 2011

Sunday, October 9, 2011

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:

Wednesday, October 5, 2011

Eye Tracking and Web Designing

Eye tracking is one of the UX approach to be considered while building UI.

Eye tracking in UI referes to the behaviour of user's eye while traversing UI. There are some useful eye tracking tips that could be followed to develop a sucessful UI.

It takes users about 2-3 seconds to rate your website based on content , look and feel. And an optimized use of this 2-3 seconds by an UI developer can result in success and failure of UI.

Find out where user see first while opening your website, what draws the maximum user attention.
To find out this, eye tracking study plays a vital role.

1. 'F' shaped :

Top left part is the first point where users normally fix their eyes after opening your website. After that according to a general tradition user moves his eyes from left to right and then narrow down their fixation towards the bottom of website. This forms 'F' shape, thus 'F' shape should be considered while putting your website content.

2. Golden Triangle :

As mentioned above 'F' shape is the general way user fix their eyes while traversing the content of your UI. When you'll join the edges of the 'F' , the traingle is formed. Typically content placed in this triangle can result in the success of UI. Pictures, videos, and audio are more useful if they are embedded in this area. Reading and scanning content takes effort, and placing multimedia content in the golden triangle relieves the need to scan for relevant information. The users just have to sit back and immerse themselves in the experience.

3. Single Column before Multi Columns :
Studies also show that one column formats on a page tend to perform better than many columns side by side. Multi column formats can be overwhelming to viewers, so better just to keep it simple and straightforward.

4. Headings get attention :
Similar to newspapers, an attractive heading draws attention of users. In case of an huge heading, starting 2-3 words should be appealing to user that makes him to make an effort to read whole heading.

5. Navigation goes up top :
Navigations are more effective when placed on the top. The point may be that anything at the top of a page will be seen immediately. And since top navigation must be simple because of space limits, top navigation is probably much simpler to use.
However studies does show that side navigation also helps.

6. Paragraphs, White space , remove irrelevant images :
Irrelevant images consumes precious space and does not serve any purpose. These images should be replaced with whitespaces. As recent studies has proved that white spaces supports users to relax their minds and grasp relevant information.
Same as in our print media, paragraphs should be made with proper interval to help users to scan the information. Breaks should be logical, and organized into a flow of ideas rather than distinct paragraphs.

7. Images :
What this means to you: Be very careful when putting important visual cues or content near pictures of faces. If you want to draw attention at some very important message on try putting an image person's face. often face grabs the attention of users.

Reference Links: