Library Technology – Reviews, Tips, Giveaways, Freeware

How to Design Efficient Web Pages for Mobile Devices

Posted In Products Review, Technology Reviews, Webmaster - By Techtiplib on Friday, March 15th, 2013 With No Comments »

There are 6 billion mobile phone users out of 7 billion population of our planet. About 2 billon of these mobile owners need the Internet on their phones and the number is growing day after day. Hereby mobile Web browsing is expected to exercise a significant influence on mobile phones and Internet in whole. Soon mobile sites will be the new standard. But now we face a problem that most web pages for mobile devices are NOT made properly! Web site design for computers and mobile devices isn’t the same thing, they are not compatible. There is special technology in designing and writing these web pages set by the W3C. Let’s find out how it’s done.

Ask yourself the question: do you want your web page to simply work or you want it to shine?

It would be wise of you to glance at the existing web pages designed for mobile devices, especially the ones you like. Compare bad designed inconvenient pages with handy effective pages that are widely visited. Define the difference, take it into account. The easiest way to create your mobile web site is to transform the Internet web site you already have. But this will cause some construction and design changes.
First of all consider your target group, try to predict who will use your page, why and how. Mobile users don’t have time to seat and look for information, so the process must be quick and easy. Best sites take into consideration the type of device the page will be viewed on, its available functions, browsers, color options and resolution.

Most critical things you should be aware of when designing a web page for mobile devices:

● web page must be CONVENIENT
● fingertips are 40-80 px wide, so click targets ought to be a no less than 30-40 px in size
● optimize the page for vertical scrolling, reduce chances that user will miss the content
● increase space between elements so that the user won’t click on the adjacent one by mistake
● keep in mind the download time
● avoid background images, use external stylesheets and JavaScript, combine smaller images into a single file, reduce size of navigation icons and images, don’t place big pictures at the top of the page
● use top aligned labels, it will save some space
● minimize number of screens
● display password character option
● avoid unnecessary graphics
● minimize required data input, use drop down menus instead of input fields
● navigation and search box need to be very easy to find
● different mobile devices will have different size of screens, build and design with a “fluid” layout
● the most important information (site search and navigation) should be situated on top of the page
● remember, the majority of browsers don’t support extensions or plug-ins
● since it takes a lot of time to enter the text, you may give your user the opportunity to use radio buttons and lists
● for the layout use CSS, avoid using tables
● it’s easier if your site is created using XHTML or XML, and the encoding set to UTF-8. Many things beyond XHTML Basic may be not supported by many cell phones.
● forms should require as less data input as possible and should store the data
● short URLs are more convenient
● the screen is small. Of course users know how to zoom, but if you place text in one long column it will be easier to perceive.

And one more thing. While creating a mobile friendly page you’d better refrain from using cookies, Flash, frames, tables, nested tables, absolute measures (relative sizes work better here) and fonts. Most mobile phones, but for iPhones and some smartphones, don’t support them. 

And finally when you think your web page is ready test it on as many mobile devices as possible.

This is a guest post by Alexandra Seremina who works with  http://www.azoft.com/– a mobile development company.  

About - Hey, this blog belongs to me! I am the founder of TechTipLib and managing editor right now. And I love to hear what do you think about this article, leave comment below! Thank you so much...