Accessing web thru the mobile device has been a great practice now-a-days. Almost 80% of people are hooked on the internet via mobile on the global scale. A crisp, clean, effective and neat version of our website for the mobile devices is on high demand. It is predicted that mobile sites is going to be a necessity in the near future.
In my article I will share some very basic but the most important fundamentals or to be more precise, some rudiments to take care of. Try following these to avoid pitfalls of failure of many mobile sites.
Firstly you should understand the difference between designs for desktop and designs for mobiles. Your mobile website must follow the accessibility design guidelines for building mobile Websites which are set by the W3C.
Your mobile design size should cover the widest of all screen size. This ranges from 101px*80px (standard cell phones) to 480px*640px (HTC Pro screen). This can be a major headache if you want your mobile Web site design to run on all of them.
Define the target audience of your website first. Accordingly, just focus on the important elements to be displayed on the screen. A mobile user will just look for a specific information within not more than 2-3 clicks. If it is a product site, It would be great to have the features displayed on the home page itself.
Simply try to avoid animated scripts, Blackberry does not support a few functions of jquerry. The navigation should be easy to access. Buttons should not be too small n width that would make it impossible to tap in iPhone. Don’t hesitate to eliminate the links which direct to the page which has least priority on mobile website.
The content is to be placed very neatly with a very sharp font say “Helvetica” or designer’s all time friend “Arial”. Try using font-size up till 11px max 12px. Have big headings (h1, h2 in HTML) with different color to distinguish it from other content. People might just ready the highlighted lines and move on to the next page. Make your mobile site design convenient for your consumers. Focus on a few key areas of the web site and acknowledge your visitors’ short attention spans
It is a bit difficult to enter text in the mobile websites. I would prefer giving provisions of radio buttons and lists to select wherever possible. The form should not to be too long. Precise and short.
For all that matter, usability should be applied to the mobile website. There should be a back button provided as all browsers might not have it. Minimize scrolling and page transitions in order to reduce time spent looking for content.
Need some inspiration? Smashing Magazine did a great roundup of iPhone optimized designs in September. Have a look here.