An emulator replicates how your site looks when viewed from a mobile device. This first step helps you determine whether your site needs a make-over or if it will work perfectly on a mobile device.
using at least 2 emulators, one for smart phones and one for older / regular phones, to get a fair idea of how the site renders. The following emulators are very handy:
If your site looks just like you'd want it to, jump to step 5. If your site does not render correctly on these emulators, proceed to step 2.
The primary cause of poor rendering is the use of tables instead of
elements to define site layout. A properly coded site that is compliant with accessibility guidelines and laws will render perfectly on mobile devices.
A website that is coded with CSS instead of tables can be stripped of all layout and design elements and presented as plain text, which then provides mobile users an easy way to read and navigate the site.
I recommend: ensuring that your site is compliant with all accessibility guidelines laid down by the W3C and DDA. This is not only user friendly, but also a legal requirement.
If you don't have the skills in-house, use an agency that can provide
accessibility consultation or
accessible website design.
Resize images for mobile screens
Most mobile devices have 120 - 480 pixels screen width. Images should either be resized on the server or limited to under 120 pixels.
I recommend: using images only where they form part of the content or logo. Background and formatting images should be relegated to the CSS to prevent problems with rendering.
Mobile website optimisation agencies can help design a mobile friendly site that resizes images and defines accesible layouts.
Provide user-friendly navigation & 'skip to navigation' option
Page load times on a mobile device are longer than on a broadband connection. Users can get irritated if they wait for pages to load and then dont find what they expected there. Also, some users will know exactly what they want and don't need to read / scroll through a lot of text before clicking a link to bring them there. A 'skip to navigation' link at the top of the page allows such users to jump right to the navigation elements on the page.
I recommend: using descriptive anchor text on all link to avoid user frustration. Providing a 'skip to navigation' link at the top of the page allows prior visitors or those in a hurry to navigate to their destination page faster and is also considered accessibility compliant. Refer to
W3C guidelines for further information on this.
Promote your mobile site
Once the site is mobile friendly, and incorporates the basic tenets of accessible website design, the only thing left for you to do is to promote this mobile version of your site to all your current and potential visitors.
I recommend: broadcasting the fact that you have a mobile version of your main site, or a mobile friendly website on the main site itself.
Use
mobile search marketing (
mobile SEO and
mobile PPC) to drive more targeted traffic to the mobile site.
Implement some other
mobile marketing ideas.
Further information about
mobile website design can be found at
http://www.accuracast.com/seo-weekly/mobile-web.php