DEV Community

Discussion on: Building a responsive website? Start with mobile first!

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

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
 
renan_pereira 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
 
savvasstephnds profile image
Savvas Stephanides

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.