Mobile First Design: Wave of the Future?

Mobile First DesignIs it time to embrace mobile first design?

Traditionally many designers, developers and clients tackle the desktop side of a website first; saving mobile as an afterthought, or maybe as a phase two that never happens. However in the past few years, a new philosophy has been introduced, that being designing “mobile first.” I first heard the concept of designing mobile first back in 2013, when our team headed down to South Carolina for the ConvergeSE conference. It was actually first coined by Luke Wroblewski years before that, when he began to notice an upswing of mobile web usage.  The statistics are truly staggering. Of the almost 7.3 billion people inhabiting Earth right now, 48.9% use mobile internet. We are headed for a time where businesses need to put an emphasis on the mobile side, rather than relegating it to phase two.

What is mobile first anyway?

Mobile first is a user experience strategy where you design your site for mobile, and then expand it for desktop. This forces you to work within the constraints of a mobile device – screen size; small file size limits for those not on unlimited data plans, etc. As every SEO expert says, “Content is king”, and this is especially true when dealing with mobile first design. Because of the small scale of a mobile device, it is not possible to add buttons, links, or tertiary content as easily and cleanly as it can be done on a large screen. Developers and their clients must focus on the content and be truly selective about what is displayed first to the user as well as the hierarchy throughout each page. The focus in designing for mobile devices needs to shift to the user’s experience, and how they move through the site.

Does this mean we throw everything else out the window?

mobile responsive design

Not just yet. Designing for mobile first completely makes sense in theory. So many people use mobile devices in their everyday life. I myself have been known to use my tablet AND smartphone (and sometimes laptop!) at the same time on multiple occasions. The problem with mobile first is that many people will pick up their own device and use that as the focus of their design. However mobile means something different to everyone. Focusing only on an iPhone would overlook every other mobile device people have. Tablets, smartphones, feature phones, and e-readers are just some of the mobile devices used on a daily basis. Up until a month ago my dad was still using a “dumb” phone, but if you asked him he would likely call it a mobile phone too. There is also no way to know what new technologies are coming in the next few years. After all, Apple just announced their new iWatch – who knows, in a year or two we might have to worry about watch sized browsers! It’s just not realistic to take one device, design a mobile experience for said device and expect it to be sufficient for every other device available.

What’s the best course of action?

I think a hybridized approach combining mobile first and responsive design is best for right now. Responsive design has been around for a few years now, (learn more about that here), and many web development companies build their sites to be responsive. And they should! If yours doesn’t – learn why they should here. When done well, it’s an adequate solution.  The website scales according to screen resolution, and content stacks accordingly to fit within whatever bounds are set. Mobile first or not, the entire process should always start with the content. This way you’re creating focus and hierarchy. Devices will come and go, but a content strategy will always remain. Then you move on to designing for mobile. Mobile is so much more restrictive, and many variables need to be taken into consideration. Where is the user? Are they at home or on the go? Are they on WIFI or 4G? Designing for a mobile worst case scenario ensures that your users will be able to use your site and find the information they need every time.  Starting mobile first also allows you to really focus on what is most important for your user to see and then build on that. Scaling up from mobile to desktop allows for your message, content and functionality to remain intact – as screen size and connection speed increases.

I’ve oversimplified the process here. Truth be told, developing this way isn’t easy, but using dynamic fonts, responsive icons and images all help. In time developing sites in this manner will become more streamlined, and the time spent will decrease. This approach seems to tackle the best of both worlds and will result in equally engaging and functional user experiences across multiple devices.

Related Posts


There are currenty 2 responses.

Scott Cole
August 23, 2017

Totally agree with mobile first. Good post 🙂 pushing myself to create the CSS styles for mobile first and transforming for desktop after… It’s hard to start with as when you first learn CSS generally you learn to create desktop sites… Maybe we need to change up how we learn to start with. That might help in the long run.

Emma Bell
June 3, 2017

Just wish to say your information is as amazing. you are an expert on this subject. Keep doing worthy work we need it.


Leave a Reply

Your email address will not be published. Required fields are marked *

Request A Quote
Let's take your business to the next level. Fill out the form below to get started!
  • This field is for validation purposes and should be left unchanged.