As mobile browser use increases dramatically, many webmasters are striving for ways to capitalise on this trend. With a few basic principles, it is fairly easy to design a useful and stunning site that will look great on any phone or tablet.
First, design for the screen size. The most obvious characteristic of mobile devices is their reduced size. As such, it is essential that mobile websites take this into account in every aspect of the design process.
Start by abandoning fixed-width layouts. While these are usually passable on the desktop, they will quickly fail in the realm of mobile devices with a dizzying array of dimensions. Instead, use the viewport meta tag to automatically tailor your site to the device’s size.
Also, get out of the viewer’s way. Each page should accomplish a specific function and very little else. If a user wishes to view a blog post, the mobile site should simply display the post and not much more. Lists of categories and archives, while useful, simply consume valuable screen real-estate.
Next, design for the hardware. Most mobile devices include GPS and other location-based technology. Instead of requiring viewers to manually search for nearby events, use the HTML 5 geolocation API to tap into the device’s location services. Omit unnecessary keystrokes by presenting phone numbers as tel: URIs, thus enabling direct dials with the tap of a finger. Not only does this save time, but it makes a given site stand out as one that cares about its mobile viewers.
Design for the experience. Using hardware functionality and location-based services is a part of this, as many mobile users expect their phones to be intelligent about their location and other characteristics. For better or worse, native apps are currently king of the mobile experience, and these applications employ a number of styles and visual effects to achieve a common look-and-feel across a given platform. Design sites to play to this strength by using animated page transitions and other visual elements that make them appear similar to platform apps. Thanks to a number of CSS 3 features, such events are possible within the browsers themselves.
Design for discoverability. Apps are easy to find because they are in a platform-specific store or market. Mobile sites must be discovered via search engines, and while this is a powerful tool, it is not what most mobile consumers are used to.
Start by using search engine optimisation on the mobile site. Target a specific set of keywords, and make it easy to discover the page via a simple Google search. As mobile pages are already tightly focused, they are uniquely placed to reap the benefits of optimisation. Also, take advantage of the social web. Word of mouth is a powerful aid to discoverability, and letting viewers share a site on Twitter or Facebook is great for countering the convenience of the App Store.
Finally, design with a framework. An increasing number of mobile toolkits automate many of these steps to quickly create mobile websites. One such, JQuery Mobile, combines the popular JQuery library with a number of mobile optimisations and best practices.
Mobile websites are becoming an increasingly important aspect of any internet presence, and a nicely-designed site can rival the usability of native apps. The advantage is that the same code can work seamlessly across platforms and devices, circumventing the processes and bureaucracies associated with platform-specific distribution channels. As such, the mobile web is poised to play an even more important role in years to come.
Author Bio:- This is a guest post by James Bentham, who has been writing web content for over 6 years and specialises in technology topics. He is currently writing on behalf of Mobile Interactive Group, who provide platforms to build mobile websites and apps.