Building websites mobile first?

[tkmets5]

I am fairly new to designing and building websites and often hear building for mobile first is the way to go. I do understand the thought process of building mobile first and then adjusting with media queries to fit larger screens. However, for me it seems easier at my skill level to design and build full size and then adjust to fit smaller screens.

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

Thanks!

[Anonymous]

What’s your target audience?

Also, what do you find easier about designing for desktop rather than mobile?

[Alen]

There is no right or wrong way.

The whole idea behind Mobile First is to start thinking about optimizing for the mobile experience first. Since the market share is shifting towards mobile devices you want to take advantage of this growth and shift as the industry pivots. There is more and more emphasis on mobile. So why not make that priority. And this is not necessarily related to how you “design”. Your design might start off as “Desktop First” but the way you build it out can be “Mobile First”. Design is just Design.

Think more about content delivery. Usually what happens with “Desktop First” is you’ll get… scroll… scroll… scroll… scroll… scroll… scroll… because you’re trying to fit everything on a small screen.

Watch these…

Presentation (part 1)
http://youtu.be/Y-FMTPsgy_Y

Presentation (part 2)
http://youtu.be/nmKMz3Fg76M

[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.

[tkmets5]

Thanks for all the good replies! I do now see the advantage and the necessity of mobile first. I am currently working on my portfolio site which I have already began desktop first, and it seems to be coming along pretty well. I have just started adding media queries to make it suitable for mobile. The trickiest part for me now are the navigation menus, and how to make them accessible once condensed.

I think as a beginner, trying my portfolio site desktop first until it is pretty well complete, and then maybe doing another mobile first may be a nice way to de both sides and learn something different.

[Author]

Posts