Reply To: Building websites mobile first?

[Senff]

I was hoping to hear some thoughts and opinions on this. Is there a right or wrong?

No, there’s no right or wrong, although there are many theories and ways about doing it.

tl;dr: Mobile First is often considered more efficient because you start simple and then add styles based on larger screen sizes, while with Desktop First you start fancy, and then take them away again for smaller screen sizes. —

In general, Mobile First means that you use “basic” styles as the default. Small screens use those, and then the larger the screen gets, the more styles you add to that (using Media Queries).

Desktop First means that you create “fancy” styles as the default. Large screens use those, and then the smaller the screen gets, the more styles you remove (using Media Queries).

While both are the same idea (starting out with a basis, and then change the styles when the screen changes size), the disadvantage of Desktop First is that you’re basically adding lots of styles in the beginning, and then remove them again if the screen gets smaller! With Mobile First, you start with a few styles and then build on that.

Here’s an example of what I mean. Let’s say we use a regular box on small screens that has additional fancy styles on desktop.

Desktop First:

.box {
    // These are all the default fancy styles.
    border:solid 2px #f00;
    box-shadow:2px 2px 5px #0f0
    border-radius: 10px;
    text-shadow:1px 1px 0 #fff;
    background:url('fancy.jpg');
}

@media (max-width: 600px) {
    .box {
        // For mobile we're removing all those styles again!
        border: 0;
        box-shadow: 0;
        border-radius: 0;
        text-shadow: 0;
        background: none;
}

Mobile First:

.box {
    // These are all the default simple styles.

}

@media (min-width: 600px) {
    .box {
        // Now we're adding all that stuff.
        border:solid 2px #f00;
        box-shadow:2px 2px 5px #0f0
        border-radius: 10px;
        text-shadow:1px 1px 0 #fff;
        background:url('fancy.jpg');
}

So you see, with Mobile First you start with a little, and then you add stuff along the way. With Desktop First you start with a lot, and then you remove stuff again along the way.

Again, there’s no right or wrong, but from this (simple) example, you see that Mobile First is more efficient in this case.