CSS Media Queries – Mobile First Design

CSS Media Queries: Mobile First Desktop First Design

By 2017, it is expected that there will be over 2 billion smartphone users in the world – a vast amount of potential viewers for your website on a mobile device alone. In this article we will be looking at using CSS media queries to create a responsive website.

As you already know, CSS is key to designing a functional, aesthetically pleasing website. This is where the mobile first design approach comes into play. As a blogger, I want to get my content out there to as many people as possible, therefore I need my website to display on as many devices as possible without losing layout or flow of my content.

Mobile First Design vs Desktop First Design

Designing for a smaller screen (mobile first design) is a lot simpler to code than designing for a larger screen as you may have a different flow and added features on a desktop for example, so when you design using a mobile first approach, you start designing for a small screen and work your way up in stages to the screen the next size up. I find that this keeps your code a lot simpler and tidier.

Desktop First is the opposite, so you start with designing for a large screen and you step down in stages until you get to a mobile device. Now if you were using media queries this would mean twice the amount of code, as you would need to reset a div to 100% if you have it set at 50% for a larger screen, which it turn makes the CSS file larger and makes your website take longer to load.
CSS Media Queries: Mobile First Desktop First Diagram

Media Queries

I suggest using media queries in your CSS to determine what CSS is displayed depending on the size of the viewport.  min-width helps us to achieve this. A media query would look like this:

@media (min-width: 300px) {
//CSS Goes Here

The 300px is the parameter for the minimum size that the screen/viewport would have to be before the CSS within the curly brackets would come into play. You can use max-width if you wish to put a cap on the maximum size of a window, but when building a responsive site, min-width  will work just fine.You can find a link to the Boiler plate here.

To conclude,  min-width isn’t always the best choice but it is extremely helpful and reduces the complexity of the code. And yes building a responsive website is very time-consuming, but the end product will be worth your time and effort!