Go mobile first

Pretty hard to imagine your website doesn't need to be responsive. But where to start and how to structure your responsive states? Well, I try to work mobile first. Mobile first is a strategy of writing your css styles starting with mobile and end up with desktop. Sound's little bit strange first, but here are some good reasons why you should do it that way.

Graceful Degradation vs. Progressive Enhancement

These are some major buzz words from a few years ago that can still lend a lot of insight into the notion of mobile first web design and why it’s an important concept to consider. Graceful degradation is the exact oposite of mobile first. This strategy is starting with a pretty complex state – your desktop design – and is removing elements for smaller screen one by another. Progressiv Enhancement on the other hand starts with a small set of features and elements for mobile and enhances that step by step for bigger screens.

Both concepts look pretty equal, so who cares about on which end to start the development process? Well the reality shows, that it takes a lot more effort to bring down a complex desktop design to mobile screens. It takes much more time and code. It is easier to build up the desktop version if you already went through the process of building the scaled down version for mobile. Less time means you are more efficient. Less code means your website speeds up. Two big advantages of going mobile first using the concept of progressive enahancement.

There is one major downside of all this. For some people it feels quite unnatural starting with the mobile design first. But here's a tip for you, how you can go with desktop first, but still let your code work with a mobile first strategy. Go ahead and start with the desktop version and finish it up. Once you are done, try to get all the styles that desktop and mobile have in common and move them from the desktop state to the styles of your mobile state.

Structure your CSS file

So we talked a lot about splitting up your CSS into components that can be reused and about how to follow a mobile first strategy. Putting all this together will result in one file for one component including all the responsive states you need. So the skeleton of each of your components will look like this. The used breakpoints are defined in our settings.scssfor global usage.

@media (min-width: $breakpoint-xs-min + px) { ... }
@media (min-width: $breakpoint-s-min + px) { ... }
@media (min-width: $breakpoint-m-min + px) { ... }
@media (min-width: $breakpoint-l-min + px) { ... }
@media (min-width: $breakpoint-xl-min + px) { ... }

So for a simple teaser your teaser.scssfile will probably look like this:

@media (min-width: $breakpoint-xs-min + px) {
    .teaser{
        .teaser__content{
            text-align: center;
        }
    }
}

@media (min-width: $breakpoint-s-min + px) {
    .teaser{
        .teaser__content{
            text-align: left;
        }
    }
}

@media (min-width: $breakpoint-m-min + px) {
    .teaser{
        border-right: 1px solid $color-grey-30;
    }
}

@media (min-width: $breakpoint-l-min + px) {

}

@media (min-width: $breakpoint-xl-min + px) {

}