Wednesday, 6 July 2011

Content Design guidelines for Mobile web

While creating a website the first thing that a designer decides is the appropriate dimensions for it . But when it comes to mobile, the resolution and dimensions are not fixed. They are changing very rapidly, also the lifespan of mobile devices are much shorter. The constant release of new mobile devices also adds to mobile device resolutions. So this wide variety of resolution, makes it difficult for designer to select an appropriate dimension to work on.
























Figure1: This is a very limited list and not complete. It is just to give an idea about the resolutions.


To answer this problem, we need to create layouts for specific collection of devices. These layouts changes depending upon the resolution and orientation of a device, in order to enhance the experience on mobile.The main reason of this mobile resolution specific experience is the “one web” approach to the web design.

…One Web means making, as far as is reasonable, the same information and services
available to users irrespective of the device they are using. However, it does not mean
that exactly the same information is available in exactly the same representation across
all devices. The context of mobile use, device capability variations, bandwidth issues, and
mobile network capabilities all affect the representation. Furthermore, some services and
information are more suitable for and targeted at particular user contexts…

Guidelines for Designing for Mobile web

Many of these guidelines will improve the reliability, performance, look and user experience of your webpage, on all mobile platforms.

Simple
Users on mobile, quickly want to get the desired information. So mobile site should be simple than the standard site. Standard site is already simple, simplify it further more, to optimize it for mobile. This may include re doing the menus, removing images, breaking texts at certain places etc. You need to simplify the site from design and functionality perspective. Make sure that everything presented on the site should be simple, readable and useful.

Example





















Lightweight

Use lightweight graphics for mobile site. Even it is good to use a simple, separate mobile theme for mobile site. Mobile theme means you can actually consider how user are using your site and then optimize it for mobile accordingly.

Example





















Use Columns and Blocks

Use columns and blocks to layout your webpage like many online newspapers. If the content on a webpage, cover the full width with content, then it generally becomes difficult to read. Columns and blocks breaks the webpage into parts, thus making it easier to read and also allows user to double tap on objects on page.

Example





















Limit Page Length

Include as much content from your actual site as practically possible. But include that too a limit. Don't make the user to scroll too long , to view the complete page. In a touchscreen phone its still easier to view a longer page, but also think about a user with a keypad based phone. Break the content into parts, use pagination etc to avoid long scrolling.


Don't use pop ups or open new window

Do not use pop ups or open new windows, while browsing a website on mobile. As it can infer between the browsing experience.


Don't rely on flash or java script
Not all phones support flash or java script. And if some of the phones support, then it is not sure that its the latest version. Make sure that content on your mobile site is plain HTML/CSS, otherwise large content of your site will be on risk, if users will not be able to access it.


Limit scrolling to one direction
It is really annoying when user has to scroll in multiple directions, while browsing through a site. And this become worse, if user has to browse that over a mobile phone. Limit your browsing to one direction (vertical) to give a better experience to the user.

Example





















Link to the Standard site

Whatever platform users might be using, they might want to see the standard site, as nowadays many smartphones, i phones are capable of presenting the desktop site as it is. Always give a link to the main site, it can be link it the footer. It should also allow the user to go back to the mobile version from the main site without using back button.

Example





















Size and Sequence

Plan the proper sequence of the content on your site, depending upon the importance of the content, buttons, navigation links etc. Interface should also be designed keeping in mind the touchscreen interface, where buttons, click able links should be bigger.

Example






















References: noupe.com , UX booth, cyberdesigz.com

6 comments:

Ankush Samant said...

Nice and comprehensive! Should become a guide for content designers on mobile, which is becoming quintessential in the digital era.

vinay ahuja said...

Thanx Ankush, all these guidelines were as per my experience with mobile projets so far. But m sure,a lot more can be added to it.

Vinay said...

I think this is a good move. I am not sure if there is a exhaustive set of guidelines available for mobile web designers anywhere and specially the one that takes care of designing mobile web content using HTML5.

text message marketing said...

Hi..

Quite a few websites and mobile software vendors offer web based applications custom made for a variety of mobile platforms. Fortunately most of these applications are free to download and use.

kaviya said...

Hey, nice site you have here! Keep up the excellent work!



Mobile Website Design
fortr

web design company new jersey said...

Nice information about content design guidelines.