DEV Community

Cover image for Building a responsive website? Start with mobile first!
Savvas Stephanides
Savvas Stephanides

Posted on • Updated on • Originally published at savvas.me

Building a responsive website? Start with mobile first!

When designing a new responsive layout, which one do you do first, desktop or mobile? Here, I'll show you why it's best to develop the mobile version first and desktop second.

Two main reasons:

1. Start simple, enhance gradually

Take a look at the two layouts below, the left is mobile and the right is desktop:

Comparison of mobile and desktop layout. The mobile layout follows the default browser flow layout while the desktop implements a grid layout

Which one of the two looks easier to build?

The mobile follows the "default" layout applied by all browsers without any special CSS, which is the "flow layout". So to keep things simple, start with the mobile layout and enhance to a grid for screen sizes that allow it:


#gallery{
    /* enter basic CSS to style the gallery here */
}

@media (min-width: 600px){
    #gallery{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}
Enter fullscreen mode Exit fullscreen mode

2. More people will visit your site on a phone than on a desktop

More and more people visit the Internet using their mobile devices, and there's a good chance that the same is true for your website.

Bar chart showing the growing trend of visiting the web with a mobile device. 2020 is at over 50%.

Designing for mobile first, means you are developing for the growing majority of your visitors. You can later enhance for your desktop audience from that point on.

Thanks for reading. Do you build responsive layouts mobile first or desktop first? Why?

Discussion (31)

Collapse
andrewbaisden profile image
Andrew Baisden

I tend to start with the desktop because I'm designing it on a desktop so its easier to see the full design. When you design for mobile you sometimes have to remove content or features that would not work on a mobile device.

However you are correct we use mobile phones a lot these days so it's natural to go mobile first. I might just do that in my next personal project. It's quite different in a work environment though all of my recent work projects were designed for desktop first.

Collapse
danwalsh profile image
Dan Walsh

I used to do the same, however one very important realisation changed my design approach to being mobile-first: mobile users should not get a lesser experience than desktop users.

With that mindset, I design to ensure that my mobile users get 100% of the content, functionality and fidelity as my desktop users. I’m not saying that it’s easy to achieve this in all cases, but in my opinion it should certainly be strived for.

Collapse
savvasstephnds profile image
Savvas Stephanides Author

Thanks, Dan!

mobile users should not get a lesser experience than desktop users.

I think that's a good way to think of things, but I'd say this is virtually impossible simply due to the restrictions brought about by the size of the screen. An example I can think of is the navigation bar. On mobile, you're going to have to hide it somewhere (like a hamburger icon) which makes it a "lesser experience" (since you need an extra click to get there) but it is what it is.

In my opinio, mobile users don't need to have the exact same experience as desktop users. The reason for this is that because of the form factor, users have different expectations. On phones, users expect to have the most important information in front of them so they can scroll mindlessly while lying in bed or sitting somewhere. Desktop users are able to consume content more mindfully so it's OK to give them more information to look at any one time. 🙂

Thread Thread
danwalsh profile image
Dan Walsh

Cheers, @savvasstephnds.

I didn’t say that both mobile and desktop users have to have the exact same experience, just that mobile users shouldn’t have a lesser experience, and further explained that a lesser experience would involve reduced content, functionality or fidelity.

Your point about the top navigation is absolutely on point—there is no way you’re going to cram that nav into a tiny mobile viewport. But you can reconfigure it into a mobile friendly hamburger menu, with clear and clean UI. No missing content, functionality nor fidelity.

@andrewbaisden mentioned above that:

When you design for mobile you sometimes have to remove content or features that would not work on a mobile device.

Perhaps I have taken this too literally, but nonetheless this is the key point I was addressing: we should not (in my opinion) outright remove content nor features for mobile users. We should instead be redesigning the content and features with UI and UX that is best suited to mobile devices. Or, to my original point, design for mobile first to ensure that all content and features are accounted for, then extrapolate and enhance for desktop as appropriate.

Collapse
savvasstephnds profile image
Savvas Stephanides Author

I tend to start with the desktop because I'm designing it on a desktop so its easier to see the full design

I see what you mean, Andrew, and you're right. You work on the desktop, you check your designs on the desktop. It makes sense that your instinct is to go for desktop first.

What's helped me is either open the page on my phone (if it's on the same network as my laptop) or open "mobile view" on Chrome Devtools.

When you design for mobile you sometimes have to remove content or features that would not work on a mobile device.

That's why I start with mobile first. Mobile sites tend to be more stripped down and basic, so it helps to do those first and progressively enhance for larger screen sizes and devices.

However you are correct we use mobile phones a lot these days so it's natural to go mobile first. I might just do that in my next personal project.

I promise you, you won't look back.

It's quite different in a work environment though all of my recent work projects were designed for desktop first.

Yeah I get what you mean. Maybe for future features, try mobile first? It's not easy I know.

Collapse
perenan98 profile image
Renan Pereira

Same here ! Built a project testing only on my desktop and when I went to check it on mobile it was broken

Collapse
andrewbaisden profile image
Andrew Baisden

Yeah hate when that happens. It causes so much stress having to fix a broken mobile website and even worse when its already live 😅

Collapse
marissab profile image
Marissa B

I recently tweaked my portfolio site to be more mobile-friendly, and this bit me in the butt big time since I designed it for desktop first. Thankfully it's a relatively simple site, but it was a great lesson in what not to do. Great article!

Collapse
savvasstephnds profile image
Savvas Stephanides Author

Thank you Marissa. Glad you found it helpful.

I recently tweaked my portfolio site to be more mobile-friendly, and this bit me in the butt big time since I designed it for desktop first.

This happened to me a lot of times, which is why I thought I'd share my thoughts on mobile-first here. Definitely makes for a much better workflow.

Collapse
timhuang profile image
Timothy Huang

It depends. I agree most websites should be considered mobile first, BUT some websites not.
For example like websites for developers / designers / engineers. They need to work on desktop and the desktop views are as large as possible.
YES, websites need start with mobile first on most applications. Thanks for sharing.

Collapse
savvasstephnds profile image
Savvas Stephanides Author

For example like websites for developers / designers / engineers. They need to work on desktop and the desktop views are as large as possible.

That's true. The exceptions I can think of are online editors or admin dashboards. These are things that are usually done on desktops so a mobile version isn't needed to begin with.

Collapse
fyrfli profile image
Camille • Edited on

I just re-started this journey a couple weeks ago and the first piece of advice I got from a friend who has been doing this for years was exactly this - always start mobile first. I am trying to do that every time I start a new exercise or challenge now - even when it doesn't ask me to do so.

It's sort of intuitive ... most people I know have had their first ever introduction to the wonders of the web via their phone these days. It's only the really hardcore computer users (gamers, developers, etc.) who even buy computers now.

Collapse
savvasstephnds profile image
Savvas Stephanides Author

I just re-started this journey a couple weeks ago and the first piece of advice I got from a friend who has been doing this for years was exactly this - always start mobile first. I am trying to do that every time I start a new exercise or challenge now - even when it doesn't ask me to do so.

That's good advice. It's true that a lot more people visit the web from their phones now because it's just convenient to pick up your phone and look something up, rather than turn on your laptop/desktop and wait for it to open so you can open your browser.

Collapse
rizkyfirman profile image
Rizky Firman Syah • Edited on

Mobile first design is overrated. As we know the data about user's/visitor's device but if we build for a website, we have to think about the desktop first, than go down to smaller screen e.g laptop, then tablet, and mobile.

Website on desktop screen can contain more important contents than mobile, so we can tell more value and story to the visitors.
-cheers

Collapse
savvasstephnds profile image
Savvas Stephanides Author

Mobile first design is overrated.

It's really not.

Website on desktop screen can contain more important contents than mobile, so we can tell more value and story to the visitors.

That's great, but then you'll have to strip it all down when you later cater for mobile devices. Instead you can start with a basic layout for mobile and later add stuff for increasing screen sizes, which would of course give more value and tell more of the story to your visitors.

Collapse
imcheesecake profile image
Freddie

Mobile first should be the default way of doing it and the only reason that should matter is because it's easier and more logical to use media queries going up in sizes and adding things rather than going down and remove things.

Anyone who says otherwise have no experience in layout

Collapse
savvasstephnds profile image
Savvas Stephanides Author

Mobile first should be the default way of doing it and the only reason that should matter is because it's easier and more logical to use media queries going up in sizes and adding things rather than going down and remove things.

My thoughts exactly. Suppose you're creating a photo gallery. On mobile, it makes sense that each photo comes under the other, which can be achieved without media queries, or grid/flexbox. You can then include media queries etc for larger screens.

Collapse
quality_pre profile image
Adam Preece

I think it is better to start with the mobile version

To help: I use an extension called mobile simulator on Chrome.

Collapse
savvasstephnds profile image
Savvas Stephanides Author

I think it is better to start with the mobile version

That was my experience as well.

To help: I use an extension called mobile simulator on Chrome.

That looks like a helpful tool. I just use the default mobile view from Chrome Devtools or open it from my phone to test.

Collapse
akaricypher profile image
akaricypher

Sometimes it's complicated to start with the mobile first...

Collapse
savvasstephnds profile image
Savvas Stephanides Author

It's mostly difficult because you have to think in ways different from what you're used to. It's a normal instinct to think "let's do desktop first, since that's what I'm working on now". It's a bit of a thought shift but it's worth it.

Collapse
vickalchev profile image
Vic

I have tried both ways and it'd easier to adjust from mobile to big screen.

Collapse
savvasstephnds profile image
Savvas Stephanides Author

Same, Vic!

Collapse
marcelohfontana profile image
Marcelo Fontana

Creo que el segundo motivo es el más importante, si todos nuestros usuarios van a llegar primero a nuestra página desde un móvil, no hay dudas por dónde deberíamos empezar...

Collapse
savvasstephnds profile image
Savvas Stephanides Author

Por supuesto 🙂

Collapse
amiamigo profile image
Ami Amigo

How many breakpoints? Is 600px the lowest? There is kinda a huge difference between the smallest screen 320px phone vs 600px

Collapse
savvasstephnds profile image
Savvas Stephanides Author

It really depends on the website, really. Usually I start with about 350px and slowly move upwards.

Collapse
kanellson profile image
Nelson Ribeiro Costa

Eu prefiro iniciar pelo desktop e criar as regras css para ajustar para mobile, já.me.acostumei e meu css se ajusta muito bem em diversas telas.

Collapse
savvasstephnds profile image
Savvas Stephanides Author

É mais difícil ajustar do celular para o desktop do que do desktop para o celular. Os layouts móveis são mais básicos e despojados.

Collapse
pavloskl profile image
pavloskl

Great advice/article for a "mobile first" approach. For the last 5 years we follow a mobile first approach to our 20 year old website.
Thank you Savvas.

Collapse
savvasstephnds profile image
Savvas Stephanides Author

You're welcome, Pavlos.

For the last 5 years we follow a mobile first approach to our 20 year old website.

That's awesome. Love to hear how it has improved your workflow!