Many people expect websites to work on their mobile phones. With this said, mobile support is now a standard for any website.
But how do you make your website mobile compatible?
The simpliest way – test them on all mobile devices and solving any problems that you encounter.
Unfortunately, due to the many operating systems and browsers on the market for mobile devices, it’s unpractical to test your website on every mobile device out there – not everyone can afford to buy multiple mobile devices just for testing purposes.
Choose your test device
According to ZDNet, the Top 10 Smartphones of 2011 and the Top 10 Smartphones of 2010, uses more or less these operating systems: iOS, Android, webOS, Windows Phone 7, MeeGo and BlackBerry. While the operating system is the most important ingredient of a platform, browsers are also important. Every platform has its own default browser. So, if a certain platform should become more popular, its browser would gain a large market share and thus forcing web developers to pay attention to it.
Installing browsers
Once you have decided on your test device, install additional browsers you can download on the device. Two browsers are inevitable: Safari and Opera Mini.
Keep in mind, according to StatCounter, the Opera has dominated the market with almost 22%. The iPhone and Nokia comes in at close to 17% each, with the Android at 15.5% and BlackBerry at 14%. Compared with stats from two years ago, the iPhone Safari has fallen while the Android has risen by a few percentages.
Designing for mobile devices
The basic principles – Easy, Visual, Results, Fast
- Easy – navigation needs to be simple and straightforward.
- Visual – Buttons should be big and spaced reasonably far apart. All clickable areas should be made large enough to grab attention of the user and easy enough to click with their fingertips.
- Results – understand the specific goals of the mobile users and design your site to accomplish those goals as quickly and as efficiently as possible. Just remember, a mobile site needs to help customers go directly to the information or content they require.
- Fast – make sure content is light weight so that it loads as quickly as possible. Content load times that may be acceptable to a personal computer user on broadband may not be acceptable to a mobile user on a wireless network.
Good-to-know: Screen, Resolution and Browsers Capabilities
Screens on smartphones vary largely in both display size and resolution. Screen sizes range from 2 to 5 inches, with resolutions ranging from 240×320 to 640×960. The most common resolution is 480×800, which is higher than most desktop monitors.
Other good-to-knows:
- Neither the iPhone nor the Palm Pre support Flash content.
- Javascript and CSS support in mobile browsers is as good as it is in their desktop counterpart.
- Most mobile devices have no cookie support.
Tips and tweaks
- You can tell the iPhone (MobileSafari) that your page is a certain size thus optimizing the viewport of your mobile website, add this code to the head of your HTML page:
meta name=”viewport” content=”width=790” - Single column layout work best. Remember, zooming in isn’t ideal because it adds an extra step and zooming in and out might not be as easy as said on all phones. Remove low priority content and present content with single column pages that use up the whole width of the screen.
- Take advantage of inbuilt functionality, such as making calls. Including your phone number on your “Contact Us” page allows users to automatically call that number when they tap on it.
- Touch screens can’t detect when a finger is getting close to touching it, so the concept of hovers or mouseovers does not apply.