Mobile First Design: What It Is & Why You Should Care

Mobile First Design: What It Is & Why You Should Care

feature

A couple of weeks ago my trusty pair of headphones stopped working while on a three hour bus ride. Not cool. So I did what anyone in my position would do - I whipped out my smartphone and started researching for my next pair.

I looked at many ecommerce sites -  some looked better than others, some didn’t work at all. After going through a couple of of them I noticed something interesting - regardless of how little or how much content was on the pages for whatever reason some sites loaded up quick while others didn’t. Weird.

So instead of looking to buy new headphones I started thinking about how some pages load up extremely fast while others lag behind.

Sure my connection could play a role, as well as could the hosting that particular stores were using but more often than not the speed of a web page depends on how it was built.

Meaning that if it was built from the ground up with less powerful mobile devices in mind, the site would perform fluidly, as expected, and without any "gotchas" that might happen if it were trying to perform like a scaled down version of it's desktop counterpart.

This article looks into building sites from the ground up with mobile devices in mind - a methodology knowns as “mobile first.”

What Is Mobile First Design Really?

Graphic illustration of graceful degradation
Image via
Zurb

There are two essentially discussions that fall into the “mobile first” conversation; design philosophy and technical implementation. It’s important we treat these as two distinct conversations, as there can often be confusion when terms like “mobile responsive” start coming into the mix.  

From a design philosophy perspective, historically web designers have always worked from the biggest screen down to the smallest - meaning that the first and “main” design would be for the full desktop view with that having the most functionality.

The downside of this approach is that essentially priority is given to desktop/laptop users which is troubling given that research has found 25% of U.S users are mobile only. In other areas of the world, such as rural China, mobile only internet usage was as high as 45% according to one 2013 report by On Device Research.   

Many of design elements and functionality that look and work great on desktop simply does not translate at best to a good mobile experience and at worst it makes the whole site unusable or at the very least extremely hard to use and navigate.

Mobile first design philosophy flips this understanding on it’s head. You are not beginning designing with mobile simply in mind, but you start the design process with mobile considerations and constraints and then work your way up from there.

Mobile first design takes into consideration the smaller form factor of the device, and serves up a different version of the site that makes the most relevant information readily available and may hide or eliminate everything that isn’t necessary to making the sale.

For example, I received an email from Best Buy promoting their holiday deals. Clicking on that email would send you to one of two very different versions of the site depending on if you're on your phone or desktop.

Screenshot of BestBuy.com - desktop and mobile view
Screenshot via BestBuy.com

On the mobile version, you'll notice a great deal of difference; the hero image and introductory copy is concise, the category links are collapsed by default & contain no images, and the navigation items are extremely streamlined, and the list goes on.  

From a technical standpoint, "mobile first" can be achieved in a variety of execution tactics including server side user agent detection and client side responsive web design (more on that later) to name a few.

For example, on the client side your device will look into the HTML markup and find the CSS file that falls into the specified conditions that your device corresponds to and loads styling and othe info from there. This will have significant impact on the usability and specially loading times as only resources needed for your device will be loaded, potentially taking into account things like your connections speed (WiFi, LTE, 3G etc) among others.

It’s important to make a distinction between mobile first and mobile responsive, in this context, as mobile responsive takes existing elements and scales them down, but not necessarily reducing their file size.

So while a mobile responsive site may maintain the aesthetic of its desktop counterpart, the larger file sizes unnecessarily eat data, and may cause the site to load slower on data connections (more on responsive design later).

If you want to get more hands on, Brad Frost created an excellent walkthrough and demo a few years ago that shows you how this can be done with an ecommerce product page.

Why Should I Care?

Simple answer is that it can make you more money. A big part of going mobile first is making your site load faster. Decreasing your site’s loading speed matters.

Firstly speed matters for your Google ranking. Not only is Google prioritizing mobile optimized sites on mobile search but additionally they are also looking at loading time as a factor. Google rarely shares secrets on what has impact on getting ranked, but with this they publicly acknowledged already back in 2010 that loading time is one of the factors that they look at for ranking.

Moreover, going mobile first will pretty much pay for itself with the money saved from bandwidth costs. More and more sales are happening on mobile devices; the latest data from Black Friday 2015 shows that mobile drove 36.3% of total sales. On Cyber Monday that figure was 26%.

Add to that statistics from global internet access that show that globally mobile broadband has taken over home internet use and you begin to see why going mobile first can have real tangible benefits for your online business.

Black Friday sales statistics 2010 - 2015Chart via Statista

Optimizing for mobile has become so important that some companies even enforce speed restraints to simulate slow data connections. For example, Facebook has instituted “2G Tuesdays.” to encourage their UX teams to understand what the experience is like on mobile devices for most people around the world who either can’t afford a better connection or where one is simply not available.

Getting Started With Mobile First

Graphic representation of Progressive Enchancement

Like previously stated, mobile first approach in simple terms means that instead of starting with a fully functioning desktop site that scales down as the screen size decreases you start with a great looking and fully functioning mobile site and work your way up from there.

Consequently, you now have the job of rethinking the whole customer experience from the ground up. From the word go you have constraints on space, on file size etc. That means that whatever ends up in on your site must have a damn good reason to be there.

Rather that starting on the desktop and trimming your way down (a process known as Graceful Degredation) start with the shortest, most foundational elements and work your way up; this is a process known as Progressive Enhancement.

Progressive enhancement on the other hand is just another name for adaptive design that was coined in 2011 by Aaron Gustafson in his book "Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement." The book has useful examples on achieving it through proper HTML markup, CSS and JavaScript - read it.

With Progressive Enhancement, things like visual hierarchy take on a whole new meaning and importance.

responsive webdesign - desktop and mobile viewImage via Medium

Buttons, layouts, type sizes and menus are all viewed just a little differently through this lens.

On a desktop you can get pixel perfect precision with the flowing gracefulness of the mouse. On mobile, it’s your big sausage thumbs that help you get from point A to point B.

Nothing is more infuriating than pressing a menu to have it block a button, or having to scroll through giant walls of text that is impossibly small.

These irksome experiences are oversight from a graceful degradation thought process that can be easily resolved by adopting a mobile first/progressive enhancement mindset.  

What About Responsive Design?

The good news for mobile first is that it’s not competing with responsive design, in fact you could say that they were made for each other.

Responsive design is build around the concept of media queries and specific devices and screen sizes. What you usually do with responsive is that you start big (desktop view) and then reduce.

The thing is that all of the content is served up at the same time assuming the largest platform. Then, if mobile is detected the browser ignores or removes much of the content. The problem is that initially much of content is already loaded regardless if the given platform needs or supports the features. In the end you serve up more content than is necessary for on a platform that often has the slowest connection. Doesn’t make sense.

The difference with going mobile first is that at first the bare bones version that works on absolutely every conceivable platform is loaded, and then additional styling and functionality is added as the browser and platform allow it. This leads to a end results that more often than not is better on all devices, regardless of size.

Fully responsive website exampleImage via Media Queries

Using Mobile Specific Features

Whenever you are designing anything, you’re taking into account all the different possibilities and technologies that the environment gives you. On desktop that means that you can use complicated scripts that take a while to load on a mobile device but work quick snap on desktop.

Same is true for mobile. Mobile phones allow you access to specific features that are not found anywhere else, take advantage of that!

Think precise geolocation, touch events, camera etc. Take shipping for example...

Depending on your warehouse location, shipping can take anywhere from a few days to a week. By using precise geolocation data you can offer discounted shipping, free shipping or even in store pick-up if the person is close by.

The possibilities are endless, it’s just a questions of thinking outside the box and using all the different tools that different environments offer.

Conclusions

By first having to design the smallest mobile pages first, it definitely takes some work and getting used to, but by doing so you ensure that your users can accomplish their goals despite a lot of factors working against them.

In short, if you can support the mobile web, you can support anything. As simple as that.



About The Author

Ott Niggulis is a chef/paramedic/freelance writer who focuses on marketing and CRO. Marketing is a numbers game and he loves numbers. Follow him on Twitter.