HTML5 Now: Mobile First

As pixel-crafters, we now have to design and create for not only many types of devices, but (more importantly) many different device sizes

HTML5 Now: Mobile First

Frédéric Harper

The Problem

Too often, when we are building websites or web applications for our customers, the mobile part comes last. Sometimes, it’s not even in consideration, or merely an afterthought. With mobile usage continuing to grow, we cannot let the mobile experience be the poor child. As Luke Wobleski wrote in his book, Mobile First: “Fundamentally, there’s just one World Wide Web, but it can be experienced in different ways on different devices.” How often is it that you go to a website on your mobile, as on your desktop, and can clearly see that the effort was put on the desktop version first. Perhaps you even have the impression that you visited two totally different sites? In my own opinion, it happens far too often!

One solution to give an amazing experience on all devices is to start with the mobile experience – that is, Mobile First.

Mobile First

Mobile First is a simple but powerful idea that Luke Wobleski thought up nearly three years ago and shared on his blog. As you may already understand, the philosophy behind mobile first is to start... with mobile platforms first. Why not begin our design and development process with the smallest device our audience will use. There are four pillars that we’ll consider when doing this:

  1. The growth of mobility;
  2. Minimizing the constraints;
  3. The capacity of mobile devices;
  4. The context of usage.

Let’s explore each of those, after which you should see that the idea of starting with the mobile site first – even if it’s hard at the beginning, – make total sense.

The growth of mobility

There is nothing you can do about it: by 2014, mobile internet users will have outgrown desktop users. In the USA, 25% of Internet users are mobile only: that means they don’t use the desktop at all! To provide a more tangible example, 40% YouTube views now come from mobile, an increase of 300% in the past year. This is amazing, especially coming from one of the biggest sites on the Internet...

Just to be sure you understand that you can’t ignore mobile anymore, here are some numbers from 2012: there were 371,000 babies born per day, 378,000 iPhones sold per day, and 700 000 Android devices activated at the same time. Crazy, I know!

Minimizing the constraints

As much as we love using our mobile devices, there do come with constraints. As developers, we need to keep these in mind, so why not think about them right from the beginning?

The first, and more frustrating one: low signal, or worse, no signal at all. It’s a reality that there are still places where you can’t get a phone signal, or can’t find a wifi connection. You need to think about those users, so if it’s possible, let them use your application or site offline.

Let’s talk about data plans. Depending on where you are living, it can be really cheap. Personally, I’m in Canada, and let’s just say that we aren’t as lucky as our neighbors in the USA. Do I really need to download the high resolution picture you added to your website that you will resize within the browser anyway? How about this oh so wonderful background music?

Don’t forget pressing buttons and “clicking” links with your fingers: Smartphones are touch devices, and you need to design your application accordingly. It could be really frustrating to always have to zoom in, zoom out, scroll up, and down to finally touch the wrong option...

The capacity of mobile devices

Mobile devices may have their constraints, but they also have advantages, like capacities that traditional devices don’t have. Think about the GPS: with the geolocation, you are able to find the device's position, and save the user some time. How frustrating is it for a lazy user like me to have to find the address where I am right now (hey, I may be on the corner of a street I don’t know well), type it, and see if the site can give me accurate information related to my position. Of course you can do this on the desktop, but unless you have a GPS on your laptop, it may not be as precise (as it will use your Internet connection).

The fact that most mobile devices are touchscreen opens up to a lot of scenarios of creative ideas you can have. Add this to the fact that you can detect the orientation of the device with the accelerometer, and you can add new features or save time for users. Things you wouldn’t be able to do on most desktops or laptops.

There are many features with smartphones that you don’t have on the desktop, and it’s just the beginning. You should think about using those hardware capabilities to make the experience even better.

The context of usage

I forget where, but I once read that there are three motivations to use your smartphone:

  1. I’m multitasking;
  2. I’m bored;
  3. I’m local.

Taking into consideration those three motivations, it's important to remember that use of a mobile device doesn't always mean the owner is mobile. I don’t know about you, but when I’m watching television, I quite often have my smartphone with me, and I like to use it (for example) to find information on a specific actor. Does that mean that I need to have a minimal experience? In this case, I may need the same information as if I was in front of my 27 inch screen.

On the other hand, that also means it's possible your mobile user will be there because he needs to do something now, like modifying a document on the fly; or because he is bored, like playing games; or because he needs local information to find a restaurant near the convention center, as an example. Too often, we think about mobile experience only for the local purpose.

So, how does it work?

By starting the process with mobile in mind, you can approach all those pillars easily. You can minimize the constraints by thinking about them right now: as for the desktop version, no worries, your site will already be bulletproof. Instead of giving the same experience on mobile, you will take into consideration the unique features of a phone: the desktop user will have the same experience he had in the past, and the mobile one will be blessed with new features. As for the context of usage, does that really mean that the desktop users don’t focus on those three we mentioned before? Of course not, but your site will be ready to take care of all these. By starting with mobile, you'll become more experienced, save costs to your customers (as it will be more than just an afterthought) and, most importantly, provide a great mobile experience.

More important than all of these points is the content. Since you have less screen space, you’ll need to focus on what is the most important: both for the users and your business. It’s easy to add a lot of text, pictures or animations when you have plenty of space, but what about on a smaller device? It will force you, and the site owner, to really focus on what is important – and for the rest, no worries, you’ll be able to add the extra on the big-screen version. That will also improve your non-mobile design too. 'Content first' is the key to a successful mobile approach.

Of course, this approach has some disadvantages. You’ll have to rethink how you are working, and it won’t be easy at the beginning. You’ll need to understand a lot more the needs of your customers (and we know they may not always really know what they really need) or the audience you are targeting with your website, as you’ll need to focus on the most important aspects.

Ultimately, you won't fail just because you don’t do the mobile experience first, but by starting with the smallest device, you have more chance of making a successful one. It’s all about redefining the mobile experience, creating innovative experiences, responding to users' needs, prioritizing content, and preparing our site for future opportunities.

As a Senior Technical Evangelist at Mozilla, Frédéric Harper share his passion about the Open Web, and help developers be successful with Firefox OS. Experienced speaker, t-shirts wearer, long-time blogger, passionate hugger, and HTML5 lover, Fred lives in Montréal, and speak Frenglish. Always conscious about the importance of unicorns, and gnomes, you can read about these topics, and other thoughts at outofcomfortzone.net.

 

Comments

Add new comment