How to make your website look great on a mobile

Yesterday I mentioned the increasing need to ensure that your website can be easily used in a mobile device. The fact is that after 20 years of computer screens slowly getting larger, suddenly there’s a swathe of visitors using screens with a lower pixel count than when the internet was invented. Web designers once said we no longer need to design for 640 x 480 screens, because nobody used them anymore, then they told us 800 x 600 was dead, and now there’s a move not to worry about 1024 x 768 screens. So what about your website visitors who have screen resolutions like the iPhone’s: just 320 pixels wide?

Does it matter? You bet it does. A huge number of people in business are being given internet-capable phones now, and for many of them, you can’t prise the thing out of their hands. You need to look as good on Nokia, Blackberry and Android as you do in Internet Explorer. Fortunately, if your website has been built with to modern standards on a modern content management system, it should be possible to do that.

Here at BMON, we were recently fortunate enough to be selected by process analysis software developer PPCL to rebuild its website, as it sought to unify several years of technical content spread over more than one domain, and simultaneously rebrand the whole company. With a priority being placed on making it easy to create new pages for the site in the future, without the marketing department needing to learn any IT skills, we decided to build the site using a content management system called WordPress. In the first of the screenshots here, you can see the home page of the PPCL website as viewed on a normal PC. Or click through to the site to take a look yourself, if you’re reading this on a PC.

WordPress, like any well-designed modern site, separates the content of the site from the presentation, using a coding technique called “CSS”. One of the great advantages of this is that the website can detect what device or browser the viewer is using, and present the site accordingly, often with a quite radical difference. That’s what we’ve done with the PPCL website.

An iPhone can display a standard web page quite respectably. But even with the ability to zoom in, the text of a standard web page layout is going to require far too much scrolling around to read on a mobile. That’s not a problem here. The site automatically detects most mobile devices, and delivers a totally different, and far more comfortable, presentation, if the device has a mobile-sized screen. The second two screenshots are taken from my iPhone, and I’m sure you’ll agree how much more appropriate the site looks (you can see the full-size screenshots here and here).

Now, you most certainly don’t have to use WordPress to serve up different versions of your website to different devices. As long as your website uses CSS properly (and most sites designed in the past few years ought to), then your website designer should be able to add “alternative stylesheets” for mobiles. If the problem is more deep-rooted than that, you may need to think about bringing forward your next website rebuild. But it does need to be done. We’re not just talking phones here. With “tablet” computing (like the iPad) and more devices we haven’t even thought of yet, mobile web browsing is going to slowly sweep all before it.

Discussion

  1. Pingback: PPCL looking good on your mobile

Leave a Reply

Your email address will not be published. Required fields are marked *