Designing for mobile phones (not just specific browsers)

Posted on by

Learning Technologist often have to do more than work on the VLE and Learning Materials or provide workshop and training for pedagogical use of Technology in the classroom.

Often we have to get our hands ‘dirty’ and design web pages and even full websites. This is what I’ve been doing (sorry, I can’t show you yet, it’s definitely work-in-progress for a couple more weeks) with a fully CSS website.

This isn’t mind-bending stuff as I’m sure there are many LTs out there doing this and much much more. But for me this is different as I decided that for this project I’d make it compatible with Smartphones, specifically the iPhone – mLearning anyone?

The first thing I noticed when looking into this was the limiting factor of designing for just one handset or browser, and this something that has been levelled at application developers who design and develop their apps for the iPhone – what about those who use different handsets?

So instead of design for my iPhone, let’s try and do it for generic mobile devices. What they have in common is the mobile browser .. oh, they don’t, do they. OK, so the only thing I can really say with any certainty is that they have a certain screen size.

The code I used is based around the following guide on the RK Blog: Optimizing websites for iPhone and Android

To use two CSS files of “screen” media type, one for iPhone and Android, and second one for desktop use something like this;

<link rel="stylesheet" type="text/css" href="style_print.css" media="print" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-device-width: 481px)" />
<link rel="stylesheet" type="text/css" href="style_mobile.css" media="only screen and (max-device-width: 480px)" />
<link rel="stylesheet" type="text/css" href="style_mobile.css" media="handheld" />
<!--[if IE]>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
<![endif]-->
<!-- tell iPhone not to shrink mobile website -->
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

The “only screen and (max-device-width: 480px)” apply to mobile screens, while “screen and (min-device-width: 481px)” is used to prevent desktop CSS from being loaded by the mobile browser.

Once this is added to your <head> content all you need to do is sort the CSS for the print and mobile users and you’re away!

If you are interested in helping me out by trying my website on your mobile, would you DM me on Twitter (@hopkinsdavid) please and I’ll let you have the URL – I want to see how it works on all sorts of mobile devices, not just Android or iPhone, so please please get in touch.

Please also get in touch if you have any other code examples which will help me, and others, sort this out if you think it’s easier or cleaner than the example I’ve used here.

  • For those running WordPress I use WPTouch – it does all this for you once it’s installed. Find it in the plugins directory.