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?
Top comments (31)
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.
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.
Thanks, Dan!
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. 🙂
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:
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.
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.
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.
I promise you, you won't look back.
Yeah I get what you mean. Maybe for future features, try mobile first? It's not easy I know.
Same here ! Built a project testing only on my desktop and when I went to check it on mobile it was broken
Yeah hate when that happens. It causes so much stress having to fix a broken mobile website and even worse when its already live 😅
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!
Thank you Marissa. Glad you found it helpful.
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.
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.
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.
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.
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.
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.
I think it is better to start with the mobile version
To help: I use an extension called mobile simulator on Chrome.
That was my experience as well.
That looks like a helpful tool. I just use the default mobile view from Chrome Devtools or open it from my phone to test.
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.
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.