Tips for creating mobile websites

Tablets are becoming the defacto device for browsing the internet. It is slowly going to replace the desktop computer. While previously we can safely ignore the smartphones and their small screen, today, we must factor them in together with tablets.

The biggest challenges with mobile (tablets and smartphones) optimized websites are internet connection speed and screen size. Some mobile devices still have 2G (upto 64kbps), especially low-end smartphones. And tablets have different screen sizes with many different resolution.

Avinash has compiled six tips to help optimizing mobile websites around the two challenges above:

Here are 6 top tips to make your website appealing and compatible for rendering on handheld devices.

  1. Even before you start designing the web pages, remember that mobile typical users have access only to slow internet speeds. That means you will have to keep the download volume to the minimum possible, so that, users don’t have to wait for eternity for the pages to show on the screen.
  2. Make optimum use of Java and Flash, but ensure that you are using the appropriate version for mobiles. A wrong version, often means that users will not be able to see your pages, and that can be a turn off. Another important action you need to take is scale down graphics and video sizes. They are potentially the most irritating when they download fast enough.
  3. Make optimum use of templates that have been tried and tested over a period of time. Templates ensure that you spend the minimum time for designing your website. One of the best places to look for templates is http://www.developer.nokia.com/Develop/Web/Mobile_web_browsing/Web_templates/ . There are at least two broad categories of resources aimed at smartphones and mobile phones.
  4. Provide automatic redirect when a visitor is at your website. For this, you need to provide some mechanism to detect the client software that is being used for rendering pages. Automatic redirects can save visitors lots of time, which they will otherwise be using for locating the link that will take them to the mobile version of pages. But, remember to forewarn visitors that they are being redirected, and that in case they don’t wish to be redirected, give them the opportunity to stay at the main page and let them find the link themselves.
  5. Between mobile screens, sizes can vary widely, and so do screen resolutions. Mismatches mean broken displays that give users a poor experience. Designing the right screen size is a subject by itself and can be very different for different makes of mobiles. Some manufacturers provide information about their devices on their website. One of the better known resources you may want to consider for enhancing your knowledge is at http://www.developer.nokia.com/Resources/Library/Design_and_UX/.
  6. Page weights (the total download volume – usually measured in KB) is never an issue nowadays if designed for PC, because internet connections are usually high enough to render them in seconds. But, that is not the case with mobiles; to be effective, your website’s pages must not exceed 20 KB; better still, if you can keep it smaller than that. For a comprehensive idea on what is optimum size, you can visit http://www.w3.org/TR/mobile-bp/ and learn the intricacies.

Do you have any experience designing / optimizing mobile websites ? Share with us in the comments below.