A couple of weeks ago my headphones stopped working during a three hour bus ride. So I did what anyone in my position would do - I whipped out my smartphone and started looking for my next pair.
I looked at a handful of mobile ecommerce sites - some looked better than others, some didn’t work at all.
After a while something became very clear - only a few of these sites were designed with a mobile first approach.
Distracted, I started researching why some pages load up extremely fast while others lag behind.
Sure my connection or the site's hosting could play a role, but more often than not the speed of a web page depends on how it was built.
You see, sites built with a mobile first design approach are built from the ground up with less powerful mobile devices in mind. Mobile first is a scaled down, stripped out, "essentials only" version of the site, and uses smaller file sizes specifically for mobile devices so site performs fluidly, as expected, and without any "gotchas." on a mobile device
This differs from "mobile responsive" which essentially takes the large file sizes from the desktop, and squishes them down to fit on the same screen.
This article looks into building sites from the ground up with mobile devices in mind - a methodology known as “mobile first.”
What Is Mobile First Design Really?
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 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.
Chart 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
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.
With Progressive Enhancement, things like visual hierarchy take on a whole new meaning and importance.
Image 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.
Image 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.
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.