Mobile-First Thinking

Scroll Down

Written by Chris Wright

June 14, 2017

Mobile-First Thinking

In the tech community, the phraseology “mobile-first” gets tossed around a lot. This means that when approaching a codebase to begin styling a site, you should code in a way that styles and builds things for mobile-phones and devices first and then add media queries to your code to style larger devices rather than styling the site to look nice on a desktop monitor and then styling the mobile site last.

This can be difficult when a designer only gives you a design for a desktop site rather than mobile and desktop designs. It can still be accomplished, but it is definitely easier if you are given both designs. If you only have a desktop design, you basically have to wing it, or as I like to call it, you get to “Bob Ross it”.

For instance, if you have four columns that are spread out over the page at a quarter-width on desktop but will be full-width on mobile, you should style it as so:

.column {
    width: 100%;

    @media(min-width: 768px) {
        float: left;
        width: 25%;
    }

}

This way, you aren’t using media queries to override styles that you have previously written, but are simply adjusting the styles for the desktop viewport. This is mobile-first. Your base styles should be the mobile styles and all “bigger” styles will be added in media queries. You should really never need to do a media query for a small viewport unless there is a very small use-case.

It is a good habit to begin to sit down and think about the site mobile-first. When you first sit down to style, think how it should look on the mobile site because then the screen just gets bigger and your elements will fit on the page smoothly. This is easier to style and come back to later than trying to fit everything from the desktop version into a small phone screen.

Mobile-first, if it hasn’t already, is the way the internet and websites are heading. With over 200 million smartphone users in the United States alone, it is almost self-explanatory that your site should look as elegant as possible on a smartphone. Next time you are asked to build a site mobile-first, take the extra time and effort to make it look as good as possible because mobile-first is the future.