The year was 2009, and Luke Wroblewski, former Yahoo! developer, had just published a quick article on his blog titled, "Mobile First." At the time, the idea of designing for mobile devices and then scaling up to laptops, desktops, and televisions (among other larger, web-capable devices) was new and interesting. "Okay, but why?" we, the community, asked. Like most articles published from "web celebrities," the post was passed around and generally well-received; the community read it, and the community agreed with it. "Sure, that makes sense." The community then went on its way. No real change occurred.

But the post set an idea in motion (Inception, anyone?) and soon it sparked a movement, similar to how a little thing called responsive web design started. The two, although very similar ideas, grew alongside one another. RWD got most of traction, perhaps because of how glamorous it was. "Oooh, flexy!" 

In some ways, Mobile First was thought as an extension of responsive web design. Truly, though, it was (and is) a process that was both a component of the expansive sea of flexible and responsible web systems, as well as sister of similar standings that has evolved in its own methodologies.

So What, Exactly, Is "Mobile First?"

As we put more thought into mobile users, designs and experiences are improved. By starting with the lowest form of web-accessible devices and scaling up as capabilities increase, you are guaranteeing a wholly optimized experience for everyone, regardless of how they choose to access the web.

It has been a slow trudge, but web creators have really started optimizing sites for mobile these past couple years with properly-made m-dot sites and, later, responsive sites. People like Karen McGrane, Scott Jehl, Ethan Marcotte, Dave Rupert, and, of course, Luke Wroblewski are at the forefront preaching responsible responsive and mobile first processes. Not because it is cool, but because it is the sensible -- the right -- thing to do.

Mobile First Refocuses Content

While some screens are getting larger and larger, others are getting smaller and smaller. This incredibly diverse set of screens make designing and developing a real challenge.

With less real estate to work with, content takes an unprecedented priority over visual design. and serves only what is crucial for your users. There simply is no room for the extraneous, non-crucial garbage. And wow, is there every a lot of garbage out there. Which site would you rather load up (see graphic: green = content, red = garbage), the mobile-optimized site, or the desktop site? The answer is pretty clear. 

By only serving the necessary content, you will also significantly cut your page weight, which brings us to…

Speed is everything

We all know page speed is huge factor, and that you have but a few seconds to grasp the attention of your audience. In fact, every 100ms increase in load time decreases sales by 1% (Source: Amazon). However, the average page size today is 1246 KB, compared to 828 KB in May 2012 (Source: HTTP Archive). This represents a 50% rate of growth in just one year. 1246 KB may take quite a bit of time (and money) for a user to get your information, especially if they are on 3G or other slow cellular networks.

Much of this bloat comes from sloppy RWD implementation: with varying device sizes and resolutions and tricky workarounds, many people revert to poorly implemented RWD tactics. Responsive web design does not inherently make page size bigger, but as a general rule of thumb, you can safely expect ~10% page size increase. 

A proper mobile-first design will take page size into account right from the get-go, and up until (and beyond) launch, will be mindful of page weight.

Are People Really Going Mobile?

It is undeniable that the mobile web experience truly took off in 2007-8, shortly after the release of the original iPhone. It existed beforehand, of course, but it was (generally) not an optimized -- and therefore pleasant -- experience. But that did not stop users from using these new mini-computers to access the web: from 2007-2009, AT&T reported a 4,932% increase in mobile traffic data.

It was apparent the desire for content consumption far, far outweighed the displeasure of using sites that were broken and messy, Flash-dependant, and/or unusable watered-down m-dot sites. The people had spoken: content trumped experience.

Today, over 1.2 billion people access the web from the mobile devices (including 58% of Americans), leading to mobile-based searches making up a quarter -- yes, just about 25% -- of all searches (Source: Search Agency). But people are not just browsing, they are buying more, too. We are seeing approximately 60% of mobile shoppers using their smartphones while in a store, and another 50% while on their way to a store (Source: Deloitte Digital). And all of these numbers are only going to be getting higher and higher. Needless to say, people are indeed going mobile.

A question that continually often comes up is whether or not mobile optimization should even be considered. Is it even worth it exploring? In all honesty, it's an infuriating question, not because it is uninformed (which it is), but because it is about four or five years too late. In the development world, of course we know mobile optimization is important. But "the real world" is filled with people who are focused on their own business and livelihood, and do not know. It is our responsibility as web creators to educate others from "the real world" of the trends -- of the truth -- behind how people are viewing and digesting their content.

Walking the Talk

Designing mobile first is no longer an idea, it is a best practice. Mr Wroblewski started the conversation over five years ago, and the world has accepted -- and evolved -- the idea into a new standard. Even the Big Guys are taking notice:  Google announced they are getting behind Mobile First, too. Many Google products, in fact, have already gone the mobile first route. The latest Google Maps redesign is an amplified design that started from the iOS and Android apps.

If you are an avid reader of the Custom Fit Online blog, you may have noticed this week something… well… a little different around here. We have silently rolled out a brand new, shiny website. And guess what? It was designed mobile first. We will be talking about the redesign more over the coming weeks.

What is your experience with designing for mobile devices first? What sort of results have you noticed? Leave a comment below, or join us on Facebook and Twitter.

Filed in // Mobile Website Development, Websites, Design, Development