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