Tips to help make your website more mobile-friendly
I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.
This is not a comprehensive article about developing a mobile device strategy for your website. It’s simply some tips that are based on a couple of things that I have implemented recently so that this blog is more easily viewable on mobile or cell phones. In my case, I am assessing each of my personal websites in order to determine whether I want to make them more mobile-friendly. If Yes, my plan is that I will not be creating separate mobile websites but will be optimising the existing websites.
Info: There are several mobile device website strategies that you may consider [including the option of doing nothing]. Cameron Moll’s Mobile Web Book is a good place to start if you want to know more.
Here are my tips:
- View your website on your mobile or cellular phone to see what it looks like. Use the default phone browser and another browser like Opera Mini. Use a friend’s phone as well. This will give you some idea about any problems that may be present.
- Make the code as semantic as you can. Use headings (H1, H2, H3 etc) and lists where appropriate. If the phone’s browser does not like your style sheet, at the very least it will recognise well-structured HTML.
- Get the source code order correct and put the main content first. In my case, the right column was first in the source code which meant that some mobile users with a smaller screen and default browser saw less important content first before the actual articles. I changed things around in my page template and style sheet to overcome this.
- Create an alternative style sheet for mobile devices. Use the media attribute with value = handheld when you link the style sheet. Put some simple styles in this that override your main style sheet. As a start, I decided to remove floats for the main
<div>s and change their widths to % values rather than pixel-based values. The idea here is that the content will be linearized and more easily readable on smaller screens. - View your website on your mobile or cellular phone to see what it looks like…..
These are just the first steps that I have taken. I will probably be adding more to my handheld style sheet in the coming months. I will also be revising some other websites accordingly and learning more about other mobile device website methods and strategies.
Related: Want to optimise your website for iPhones? Try iPhone CSS—tips for building iPhone websites
Comments
16 Sep 2009 09:43:20
This is an area of web design that has had little coverage so far, but certainly one that will become more and more important in the near future, especially with the rapid development of 3G phones and mobile Internet. We have heard about this for some time, but part of the next evolution of the Internet will be it becoming truly mobile, and accessible from a variety of devices, so consistency in page displaying will become as important as pages being search engine optimised.
Looking through the Adobe Creative Suite package I’ve found Adobe supply a program called ‘Device Central’, built specifically for this requirement. You can test your page on how it should display on a number of popular phones and screen sizes, surely an invaluable tool for all designers! I will be incorporating the tips on this blog into my next website, and trying them out using Device Central and real phones to make certain the pages are displayed and coded correctly! Thanks!
16 Sep 2009 19:02:44
@Stephen: I think the subject of mobile web design has had a reasonable amount of coverage actually. For example, there are several good articles on A List Apart and one of these dates from 2004!
Not tried Device Central myself but would be interested to hear what you think of it.
Comments are OFF for this post.