Some notes about mobile first web design
If you are a small business owner and have recently been looking for a web application, a new website, a mobile app, or almost anything else on the internet you may have come across terms like responsive web design (RWD), adaptive web design, fluid grids, etc. Another term that is quite popular is ‘mobile first’ and I’ll be writing a bit about what it means, its advantages, and how agencies like us are using it on our projects.
What does it mean when people say, mobile first?
The term ‘mobile first’ refers to the approach in web design where the initial focus of a project is directed toward mobile usage – all decisions and thinking are made with only the mobile version of the website in mind. It’s kind of like a game where you pretend that your website will only ever exist on a mobile / small-screen platform and once decisions have been made and work has been done at this level, you can proceed to larger screens. Why would anyone want to do that? Read on…
What are the benefits of a mobile first approach?
You can save time during design. Designing for multiple screens takes time, more time than designing for one screen. However, this can be modified by allowing the design to be flexible, applying general mood and styles to the mobile design first rather than getting bogged down by exact pixels and placement for every screen. This allows for a more fluid and relaxed approach to the design and can save a lot of time. The downside to this approach is that it is heavily reliant on trust from the client, craft & spontaneity from the design agency, and frequent open communication between both parties — okay, not necessarily a downside but potentially a difficult combination.
Another benefit to this approach is a high sensitivity to content placement. It’s been said before: “Content is king”, without relevant content a project misses its purpose. The mobile first approach forces decisions about the most important content because there is significantly less screen real estate to work with. This is great for limiting the amount of content that will be displayed on the screen and therefore reduces the amount of erroneous fluff that often plagues many current desktop sites. Using this method, questions like these come up a lot: “What is the most important piece of content?”, “What is the first thing you want your end-users to see?”, “Is this piece of content more important than that?”. These types of questions help narrow the amount of options a product owner has to implement which, in turn, helps a team provide better solutions to end users.
Should I even care about mobile?
Here are some stats gathered by Luke Wroblewski (a prolific mobile speaker and author)
- 24% of Black Friday retail traffic in 2012 came from mobile devices. (source)
- 14.3% of Black Friday retail traffic in 2011 came from mobile devices. (source)
- 5.5% of Black Friday retail traffic in 2010 came from mobile devices. (source)
- Less than 1% of Black Friday retail traffic in 2009 came from mobile devices. (source)
According to these stats, mobile shopping numbers alone are convincing enough to peak attention. I won’t even go into mobile usage statistics.
I’ve been experimenting with a couple of ideas lately with regard to the mobile first approach and to responsive design in general. One idea is to approach a web project with two sizes — a large screen and a small screen. Tablets (as of the date of this post) typically render a standard 960-pixel width screen pretty well. Small modifications can be made if they’re needed. I like this approach because the screen sizes for various devices are changing so often and this can save time by limiting options.
I have also been experimenting with a modified responsive design approach by using breakpoints with media queries but not percentage-based widths. The advantage here is less time converting a pixel-based mockup to a percentage-based website. The disadvantage is the variability for viewers on their devices (i.e. a 320 pixel layout might look great on iPhone, but slightly smaller on a larger Android). So far, I haven’t seen overwhelming evidence to convert to a strict fluid-based layout-only policy.
Find out how we use “mobile first” thinking to build responsive websites and applications…