Mobile First

When the concept of Responsive Web Design was first introduced, it was shown as a way to adapt existing desktop-centric websites into more mobile friendly layouts without needing to create a separate mobile website. This made a lot of sense given that most sites at the time were fixed-width and assumed all visitors had large monitors to view the content on.

Adapting sites which had never been designed with smaller screens in mind could prove problematic in practice. Sites often contained large images and layouts that didn’t make sense when linearised to fit on the significantly narrower screens of a mobile phone. Developers would use CSS and Javascript to conditionally show and hide content based on the user’s screen size. As a result, visitors on mobile would download content they might never see if it was deemed by the developers as only suitable for desktops. This led to the somewhat unfair assumption that responsive sites were more bloated and complicated to build than separate mobile versions of websites, which were popular at the time.

The argument for building separate mobile websites was that, with a clean slate, the design and the content could be better optimised for the significant constraints set by mobile devices. The counter-argument was that having two separate codebases to maintain was simply not a sustainable solution in the long term. Not only that, but more often than not, these mobile sites presented users with a pared down version of the “full” site based on the assumption that mobile users wouldn’t use or need all of the content.

The Mobile First design philosophy aims to take the best ideas from Responsive Design and separate mobile sites whilst addressing their drawbacks. Because of this, it flips the original thinking behind Responsive Design on its head: instead of scaling large websites down we are scaling small websites up.

The Benefits

Thinking small screen first when you come to design or redesign a site allows you to:

• Prioritise the content that matters to your users. You have limited space so can’t clutter the screen with superfluous items.
• Rethink your navigation. Again, you don’t have much space so use your analytics to help you reorder and reprioritise your global navigation. Get people where they need to be quicker.
• Make things touch-friendly. Chances are, many of your mobile visitors will be using a touch screen so you need to ensure any interactive elements (buttons etc) are suitably sized for fingers.
• Focus on performance. Sending large images and lots of Javascript to constrained devices can have a detrimental impact on the user experience.
• Improve the UX of your forms. Touch screens can show different keyboards optimised for the type of data you need, you just need to ensure you’re using the appropriate HTML5 input type attributes in your code.
• Make use of the hardware. Mobile devices are full of sensors (motion, GPS, microphones etc) which can be accessed via Javascript APIs in the browser to create new and unique interactions. More recently, e-commence sites have been taking advantage of powerful modern smartphones to provide augmented reality experiences so shoppers can get a better idea of how a product will fit in their homes.

Going Mobile First

Once you’ve got a good idea of your core content, you need to work on your layouts. Your default layout will likely be quite linear due to the width constraints on mobile. As you begin to test your content at different browser widths, you’ll reach points where you need to reformat. It’s at this point that you’ll introduce breakpoints using Media Queries. Media Queries are a bit like adding logic into your stylesheets and allow you to alter layouts and styles based on the width of the user’s browser, as well as other conditions.

It’s important to set breakpoints based on when your layout or content needs to be adjusted and not based on the dimensions of popular devices of the moment. What’s popular now may not be in a few years or newer models may introduce significant changes, like when Apple moved from the 4 inch iPhone 5s to the bigger iPhones 6 and 6 Plus. This will ensure that your designs are more future-proof and accommodating to whatever changes may be coming to market further down the line.

But if you want to be as flexible as possible, any future redesign you may be about to embark on should make good use of modern layout techniques in CSS, namely Flexbox and CSS Grid.

Discussing these two features in any depth is beyond the scope of this post, but these two features allow you to fully embrace the inherent flexibility of the Web. Compared with layouts of old, with very few lines of CSS you can use Flexbox and/or Grid to create components and layouts which adapt to any screen size, often without the need for breakpoints and media queries at all. Reducing the amount and complexity of your code means it is easier to maintain and debug and also helps reduce download sizes. For a deep dive into modern layout methods, check out Jen Simmon’s excellent work or Grid By Example from Rachel Andrew.

Although each project is different, starting your thinking from a mobile first perspective can really help everyone involved clarify their thinking and focus on what really matters to the user.# Mobile First

When the concept of Responsive Web Design was first introduced, it was shown as a way to adapt existing desktop-centric websites into more mobile friendly layouts without needing to create a separate mobile website. This made a lot of sense given that most sites at the time were fixed-width and assumed all visitors had large monitors to view the content on.

Adapting sites which had never been designed with smaller screens in mind could prove problematic in practice. Sites often contained large images and layouts that didn’t make sense when linearised to fit on the significantly narrower screens of a mobile phone. Developers would use CSS and Javascript to conditionally show and hide content based on the user’s screen size. As a result, visitors on mobile would download content they might never see if it was deemed by the developers as only suitable for desktops. This led to the somewhat unfair assumption that responsive sites were more bloated and complicated to build than separate mobile versions of websites, which were popular at the time.

The argument for building separate mobile websites was that, with a clean slate, the design and the content could be better optimised for the significant constraints set by mobile devices. The counter-argument was that having two separate codebases to maintain was simply not a sustainable solution in the long term. Not only that, but more often than not, these mobile sites presented users with a pared down version of the “full” site based on the assumption that mobile users wouldn’t use or need all of the content.

The Mobile First design philosophy aims to take the best ideas from Responsive Design and separate mobile sites whilst addressing their drawbacks. Because of this, it flips the original thinking behind Responsive Design on its head: instead of scaling large websites down we are scaling small websites up.

The Benefits

Thinking small screen first when you come to design or redesign a site allows you to:

• Prioritise the content that matters to your users. You have limited space so can’t clutter the screen with superfluous items.
• Rethink your navigation. Again, you don’t have much space so use your analytics to help you reorder and reprioritise your global navigation. Get people where they need to be quicker.
• Make things touch-friendly. Chances are, many of your mobile visitors will be using a touch screen so you need to ensure any interactive elements (buttons etc) are suitably sized for fingers.
• Focus on performance. Sending large images and lots of Javascript to constrained devices can have a detrimental impact on the user experience.
• Improve the UX of your forms. Touch screens can show different keyboards optimised for the type of data you need, you just need to ensure you’re using the appropriate HTML5 input type attributes in your code.
• Make use of the hardware. Mobile devices are full of sensors (motion, GPS, microphones etc) which can be accessed via Javascript APIs in the browser to create new and unique interactions. More recently, e-commence sites have been taking advantage of powerful modern smartphones to provide augmented reality experiences so shoppers can get a better idea of how a product will fit in their homes.

Going Mobile First

Once you’ve got a good idea of your core content, you need to work on your layouts. Your default layout will likely be quite linear due to the width constraints on mobile. As you begin to test your content at different browser widths, you’ll reach points where you need to reformat. It’s at this point that you’ll introduce breakpoints using Media Queries. Media Queries are a bit like adding logic into your stylesheets and allow you to alter layouts and styles based on the width of the user’s browser, as well as other conditions.

It’s important to set breakpoints based on when your layout or content needs to be adjusted and not based on the dimensions of popular devices of the moment. What’s popular now may not be in a few years or newer models may introduce significant changes, like when Apple moved from the 4 inch iPhone 5s to the bigger iPhones 6 and 6 Plus. This will ensure that your designs are more future-proof and accommodating to whatever changes may be coming to market further down the line.

But if you want to be as flexible as possible, any future redesign you may be about to embark on should make good use of modern layout techniques in CSS, namely Flexbox and CSS Grid.

Discussing these two features in any depth is beyond the scope of this post, but these two features allow you to fully embrace the inherent flexibility of the Web. Compared with layouts of old, with very few lines of CSS you can use Flexbox and/or Grid to create components and layouts which adapt to any screen size, often without the need for breakpoints and media queries at all. Reducing the amount and complexity of your code means it is easier to maintain and debug and also helps reduce download sizes. For a deep dive into modern layout methods, check out Jen Simmon’s excellent work or Grid By Example from Rachel Andrew.

Although each project is different, starting your thinking from a mobile first perspective can really help everyone involved clarify their thinking and focus on what really matters to the user.