Mobile First web development – presentation at WordCamp UK

It’s that time of year again – the sun is shining, the schools are about to break up, and my favourite event of the year is taking place somewhere in the UK. Yes, last weekend was WordCamp UK and it was as good as (if not better than) ever. I won’t report back on the event here (maybe another time), but I will report on the presentation I gave. I was scheduled to speak on the first day but swapped with fellow Brummie Nathan Roberts and got the ‘hangover slot’ first thing on Sunday morning. Happily the lecture theatre was reasonably full but I think people were glad of the fact that my own tiredness meant that I was taking things slow and quiet. My presentation was about the Mobile First way of planning, designing and developing websites, and focused on the idea that even if you’re not developing Mobile First (more of which shortly), it’s still a good idea to think Mobile First. Here are some of the main points.

Think and Plan Mobile First

Whatever approach you’re taking to development, thinking about mobile users of your site will help you to design a site that is more focused and streamlined and provides a better user experience (UX). Start off by identifying the main objectives and requirements of the site and what users will come to the site to do – to read, to shop, to watch videos, to network, or anything else. In the vast majority of cases users will need to do one or both of two things:

  1. Consume content
  2. Complete a process

You need to make both of these as straightforward as possible and by thinking mobile first you will strip out all of the extraneous content that it’s tempting to add simply because you have the space. Focus on what’s needed. Once you have a mobile content plan, you can decide how this will scale up to desktop. It may be simply that layouts need to change, you may want to add more images, graphics, media or advertising, or you might structure navigation differently in response to the different context. (However avoid making the assumption that desktop users are sitting at a desk while mobile users are out and about and in a hurry – often they’re sat in front of the TV). The main challenge will be convincing your clients that they don’t need all that stuff on the home page, especially if there are a number of stakeholders all wanting their piece of screen real estate. Think about how you will present content, how you can initially hide content, and provide that challenge!

Design Mobile First

A Mobile First content strategy will inevitable segue into a mobile first design. How do you design at the moment? Chances are you’re making some mockups in Photoshop or Fireworks for the desktop then (maybe) doing some for smaller screens too. Think about how your design can enhance UX on small screens and then work upwards. Consider designing in the browser rather than on paper (daunting, but it can really help with responsive development and speed up your workflow). Of course your client may require you to put more effort into the desktop design if that’s where most of their users are going to be, but the Mobile First thinking you already did will help you to focus that design and make it more effective.

Develop Mobile First

This is the trickiest bit, and for one reason: Internet Explorer (boo!), which I’ll come to shortly. Developing Mobile First entails writing your media queries in the revers order than you may be used to – i.e. starting with the smallest screen width and working your way up. Try it and you’ll be amazed at how much less CSS you have to write. Think about it:

  • In a desktop-first stylesheet, you write all of the layout (and graphics) CSS for desktop screens and then reverse it all in your media queries
  • In a mobile-first stylesheet, you write very little layout CSS for small screens as content will automatically be displayed at 100%. You then progressively add more for increasing screen sizes.

It can also have performance benefits – unnecessary content such as large background images won’t be sent to mobile devices, as they’ll be in your media queries which won’t be used by those devices. That’s great – but unfortunately IE8 and downwards don’t support media queries so they’ll display your mobile layout on the desktop. There are a couple of answers to this:

  • Create an IE-only stylesheet, with all of the desktop styling. This is a pain as you lose all of the efficiency savings from working mobile-first, so I wouldn’t recommend it.
  • Use a library such as Modernizr to do the work for you.

Personally I hate creating code just for IE (if it won’t play ball, why should I?) and I’m not too keen on libraries, but that’s just me. This means that for most projects I don’t actually develop a Mobile First stylesheet. When I will do this is if the site is targeted at mobile users or users on modern browsers. Then I’ll decide what to do about IE based on the needs of the project.

How to Write a Mobile First Stylesheet

I spent a fair chunk of my talk going through the process of creating a Mobile First stylesheet. I won’t repeat it all here as everything I covered is in a tutorial I wrote for wptuts+, including the code files to download. Enjoy!

 Summary

Mobile First is a very useful approach, for a few reasons:

  • It helps you to focus your content strategy, giving users what they need and not much more
  • By adding simplicity and focus, it enhances UX
  • It can help you create a design which is more focused on what users need to do and not on using the available space
  • Writing a mobile-first stylesheet can use a lot less CSS and can have performance benefits too.
Posted in Uncategorized