Mobile First Design

Mobile First Design: Future Proof Your Website

In only two years mobile traffic (smartphones, etc.) has increased from 10% to 30% of all page views. At the same time, desktop traffic is down to 60% of all page views. The way we use the web is being redefined by mobile devices.

statcounterData

Taking a look at time spent rather than individual page views, this report from comScore shows that mobile users account for 60% of digital media spent.

comScoreData

Web developers saw this upward trend of mobile users and created Responsive Design as the answer to providing a good user experience for mobile users. Responsive Design did a good job, but now it looks like we need to go further because mobile traffic is predicted to increase 300% by 2017. It’s time to adopt a new web design trend called Mobile First.

 

What Is Mobile First Design?

Designing for mobile first means that, instead of designing with desktops as your priority you design with mobile devices as your focus. This forces the designer to take a minimalistic approach with both content and design.

There are two major considerations when designing for mobile devices:

1. Screen Size

Because the screen size is so small, content and design must be limited to the bare necessities. The content needs to be boiled down until it is focused without being fleshy. There just isn’t enough screen real estate to have anything but the necessities. This isn’t a bad thing, though, because it leads to a clear and focused message.

2. Bandwidth

This is the reason Responsive Design and Media Queries just aren’t enough. Media queries work by hiding excess content such as images or sidebars, content that isn’t necessary. The problem with this is that content is still being downloaded. Mobile networks are generally pretty slow and your users are paying for that data they never even see.

 

Why Responsive Design Isn’t Enough

If you’re unfamiliar with the concept of Responsive Web Design (RWD), you can read about it here. In short RWD focuses on scaling the website down to look good on any screen size, no matter how small. This approach worked for a while, but it only covers the front end. As we mentioned before, mobile users are concerned with bandwidth as well as screen size. RWD just used Media Queries to hide the content that didn’t fit. While this covered the screen size issue all that extra content that the user never got to see was still being downloaded.

Where Responsive Design would hide content that didn’t fit, Mobile first combines the content to create a focused message for mobile users. Thus, the content of a responsively designed site wouldn’t be as clear on mobile devices. Mobile First Design has a good approach that works for both mobile and desktop displays alike. The content is boiled down so that it’s message is clear without taking much space, so now you have a clear message on your desktop site as well.

 

The Future of the Web

The future of the web is mobile. Mobile First Design forces you to focus on the user experience. It forces your message to be clear and clean. And it forces your design to be limited to the necessities, no fluff. None of these are bad things. Mobile First is your best bet for future-proofing your website. Plus, there are some cool features to make use of on mobile devices such as GPS or Gyroscopes.

 

Conclusion

Responsive Web  Design is still a good approach and it has its uses for sites whose primary audience is desktop users. RWD is also a great approach to modernize websites that are still using 10 year old html versions. However, if your audience is primarily made up of mobile users then Mobile First is the best approach. If you need your site redesigned using either mobile first or responsive techniques, contact us today for a free consultation.

sign up for our newsletter

  • This field is for validation purposes and should be left unchanged.

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.