Making Your Website Friendly with Mobile Phone Users
Mobile usage has skyrocketed during the past few years with the advent of the smartphone1. According to Google, 80% of users abandon a website if it does not provide a good user experience on their mobile device2. Therefore, it pays to go to the trouble of redesigning your website to fit the smaller screen and slower capabilities of mobile phones. Before you embark on the journey, however, check out how much you need to alter it3.
The first and most important step is to make a fluid width layout and centralize the content. This eliminates the dead space around your content and instantly makes the site compatible across multiple platforms. This change can be implemented by simply changing the width property to a percentage in the CSS worksheet4. Furthermore, as mobile users are usually in a hurry, they do not want to have to look around for the information they need and prefer if it stays at the center of the screen. Be sure to remove any unnecessary clutter from there. Again, using percentages in the CSS worksheet, you can position the quality content dead center. Since mobile bandwidth is expensive, remove anything that does not add value from the client’s view.
A big difference between mobiles and desktops is the screen’s size and orientation. While desktops have a horizontal orientation, mobile screens are usually vertical, which creates a hassle when viewing websites with a lot of content laid out side by side. A simple solution is to place everything vertically so that both types of users can see it easily5. Another idea is to resize your photos into smaller versions with the option to enlarge them if the user clicks on them. This will not only save bandwidth, but also frustration from those interested only in specific images. The same principle goes for other types of multimedia; make them as light, small in size and platform-accessible as possible.
As mentioned, content should take the center while everything else hits the curve. Therefore, ads should be slimmed down to small images or lines of text, which do not blink or move, and relegated to the sides of the layout. If this layout does not work, simply use display:none on all pertinent ads to make them go away.
Menus and functionality should not suffer in the transition to a mobile device. Hover tooltips or drop down menus, or even small window pop-ups are a nifty addition to your desktop website, however these will be unusable to a great extent on a mobile device. Even though some devices support Javascript, it is unlikely that the result will be what you wanted. Therefore, a lot of links and features will be left unusable to mobile users, so it makes sense to provide an alternative link or disable some of the effects altogether, depending on the platform.
An optimization technique that works for all platforms and can even improve your website’s SEO standing is keeping pages brief but informative. This will make browsing a lot faster as it will reduce loading and improve the user experience. Furthermore, all items on a page must be clear and crisp, and large enough to be seen and hit (for buttons) by even the most unaccustomed user of a touch screen.
Keyboards are usually not well supported by mobile device so good navigation is extremely important. There must be links, suggestions and menus to help reach every part of a webpage. If users are forced to type in a search query, chances are they will give up before even attempting.
Finally, be sure to secure an easy-to type, short and easy to remember URL address for the same reason as above.
References:
