18 Oct Essential Tips and Tools to Design a Website for Mobile Phones
Internet usage statistics across the world show that more and more people go online everyday via a mobile device of some sort. In most cases, it is a mobile phone. In most western countries, penetration of the tablet computer is nowhere near that of the smartphone. In second and third world countries, many users experience the Internet for the first time via their mobile phones. In this scenario, designers need to take a special effort to make a mobile friendly version of their site. At the very least, they should take an effort to make their websites work well with iPhones and Android phones. Here are a few tips and tools that are used to design user friendly websites.
When you are designing a website for a touch based smartphone, the most important thing to be aware of is the way in which users use their phone. Make sure that your website can be used by both left and right handed users. Try to design a website that works well with tap and slide movements. This means that the icons have to be sized in a way that thumbs can use. Thumbs and fingers are inaccurate input tools. People who use mobiles on the go are frequently distracted and this reduces the accuracy even further. So, when you design buttons for your website, make sure that they give visual feedback when they are pressed. Also, make sure that the user has time to correct his choice if he presses a button by mistake. Another thing that needs to be considered while designing the website is the tap zone. In a typical smartphone, the user will be able to access the lower portion of the screen completely. It makes sense to place the toolbar in that area.
Content for the mobile website needs to consider the major reasons a person visits the website. For instance, if the user visits the website via the mobile for a quick update, loading the entire page on the phone will cause unnecessary delays. Most people visit the mobile version of websites to get quick updates about topics they are interested in. Incorporate this into the design. Make sure that the images used on the mobile website are small in size so that they load quickly. As far as possible, avoid incorporating sound effects in your website. This takes up extra processor power and may embarrass a mobile user. On a mobile site, only videos should play sound, and that too only when you click on them.
Once you have the basic design elements of your website in place, there are a number of choices you can make in terms of the tools that you use to build the website. JQuery mobile is a popular environment used to build mobile effects because of the extensive library of shorthand code. Once your page is designed, you can get an idea of how it will work on a mobile using a tool like the Opera Mobile Emulator. It is a fabulous piece of software that lets you check how the site that you modified will look and work on your smartphone without having to push the update to your phone. This emulator can be configured to display the settings for over 20 different mobile phones including the popular iPhones, Samsung Galaxy series mobiles, and the higher end HTC phones.
This is a guest post by Teyona Dame of xfinityonline, a site that offers savings and current information on xfinity, as well as xfinity.com services.
