Creating a mobile website
A mobile website is a website that is specifically designed to be viewed on a web browser of a mobile device.
The mobile internet is booming. The share of mobile internet users is ever rising, mainly thanks to affordable data packages and the introduction of smartphones (e.g. Blackberry, Apple’s iPhone and Google’s Android phones). In The Netherlands, for example, it was found that a whopping 10% of the population regularly uses the internet on their mobile phone (February 2009).
Mobile challenges
Would you like to make your website accessible to mobile internet users? Then keep in mind that developing for the mobile web is very challenging, much more so than creating a regular website. Some of the challenges include:
- small and variable screen size
- unknown support for cookies
- unknown support for JavaScript / AJAX
- limited support for CSS styling
- slow connection speeds
Recommendations and guidelines for mobile sites
Jamo Web Creations is specialised in making mobile websites that take these factors into account. Drawn upon personal experience, we recommend the following general guidelines for making a mobile website:
Do not try to port all of your regular website’s functionality to your mobile website. Think about the following question carefully when organizing your new mobile website: How does the mobile user differ from the regular user? Try to accommodate the mobile user as best as you can, and leave out all the options that are unlikely to be used. Performing this exercise well results in a mobile site that provides a clear overview, is easy to use, and helps the user reach their goals as quickly as possible.
Use a “liquid layout” that will look good on all mobile devices, independent of their screen width and height.
If users need to login to make use of (parts of) your site or service, keep in mind that there are mobile devices that do not support persistent or session cookies. The best way to deal with this is to check whether or not the visitor’s browser supports cookies. If not, you should dynamically modify all links within your website to pass along the user’s session ID in the URL.
Using JavaScript and/or AJAX on your mobile website is an excellent method to provide interactivity without forcing the user to load a new page. It will make your website faster and more usable. However, not all mobile phones support JavaScript. Therefore, mobile sites should degrade gracefully if JavaScript is not supported. For example, with regard to using AJAX, you should make use of both default actions for links and forms, as well as so-called onclick / onsubmit event listeners.
Not all mobile browsers support CSS styling as well as regular desktop internet browsers. Again, your website should degrade gracefully if certain style attributes are not fully supported. Your pages’ HTML should therefore present its content in a logical order, and make use of semantically correct HTML elements. An easy method for checking this is by disabling all CSS on your mobile website and see if the pages still make sense.
Keep the total page size as small as possible. Connection speeds of mobile devices are generally slow. To provide a satisfactory user experience, pay enough attention to the resulting page size, including all elements it contains. Here are some tips to help you accomplish this:
- Use only one external CSS file.
- If using JavaScript, use only one JavaScript file.
- Minify and gzip the contents of your pages, style sheets and JavaScript.
- Do not include any unnecessary images.
- Resize images to a mobile-friendly size (as a guideline: use a maximum of 200 pixels in width or height).
- Avoid including JavaScript frameworks, such as jQuery or Prototype. Although they certainly make building JavaScript functionality easier, these libraries are generally too bulky for the mobile web.
- Unless your pages’ content is highly dynamic, make sure browsers can cache your content.
Test your mobile website extensively. Make sure the markup is valid. View your mobile website on a variety of different mobile phones to ensure that the most popular mobile phones and browsers display your website correctly, and to make sure that everything works as it should be. There are also several mobile browser emulators available on the internet: use them. And finally, find a handful of actual mobile internet users and let them test your website for usability.
Need help?
Get in touch with Jamo Web Creations to have your mobile site developed or improved.