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:
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);
}
}
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.
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?
Latest comments (31)
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.
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.
Sometimes it's complicated to start with the mobile first...
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.
How many breakpoints? Is 600px the lowest? There is kinda a huge difference between the smallest screen 320px phone vs 600px
It really depends on the website, really. Usually I start with about 350px and slowly move upwards.
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
It's really not.
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.
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
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.
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...
Por supuesto 🙂
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.
É 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.
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.
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.
I have tried both ways and it'd easier to adjust from mobile to big screen.
Same, Vic!
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.
You're welcome, Pavlos.
That's awesome. Love to hear how it has improved your workflow!