Streaming live at 10am (PST)

Mobile first or Desktop first?

Hello squad,

Question for you. If I know that 90% of my users are viewing my website on mobile devices, does it not make more sense for me to style for MOBILE-FIRST. Practically that would mean making my base-view, mobile.

Any reason why I should not do this? It is because it’s easier to design on desktop, and then create responsive layouts for mobile, than it is to work the other way around?

I’d like to know how people are thinking about this.

I would highly recommend starting at the desktop view for a multitude of reasons:

  • Ease of changing things
  • SEO, if your desktop page is poorly designed then Google could drop you
  • Low hanging fruit, there’s still 10% of your customers on desktop, every sale/view counts. Don’t ignore them.
  • Tablet users, what if they visit on an iPad one day that shows the desktop breakpoint. You could have lost a customer.
  • What if the browsing behaviour of the population shifts, a new device is released that takes off (folding tablets for example).

CSS means cascading style sheets, the styles cascade down in this case. You can override a desktop style easily on mobile, but going the other way is just insane. You could style an entire site on the mobile breakpoint and the desktop is just a jumble of words, with no style.

In short, I would personally design for desktop, and optimize for mobile users. Webflow allows you to give everyone the best experience you can. :slight_smile:

My two cents

Screen Recording 2020-04-30 at 10.31 am

2 Likes

Thank you for taking the time. All makes sense. The point about folding phones is a good one…I’m thinking about getting one!

Much obliged.

I’m sorry but most of these arguments don’t make much sense to me. As a UI designer, I would always start designing on mobile, and then adjust the design for desktop. The reason is simple and can be explained best with the following analogy:

If you’ve made your life fit in a tiny New York apartment, you’ll have no trouble when you move to a house in the suburbs. But going the other way, from a house full of stuff to a tiny apartment, is much more difficult. Designing for small screens works the same way. (source)

@magicmark said:

  • Ease of changing things
  • SEO, if your desktop page is poorly designed then Google could drop you
  • Low hanging fruit, there’s still 10% of your customers on desktop, every sale/view counts. Don’t ignore them.
  • Tablet users, what if they visit on an iPad one day that shows the desktop breakpoint. You could have lost a customer.
  • What if the browsing behaviour of the population shifts, a new device is released that takes off (folding tablets for example).

Those arguments assume that there is no desktop version at all, but this has little to do with the question. @chappardababbar’s question is more about wether it would make more sense to start designing on mobile and then adjust for desktop or the other way around (stop me if I understood it wrong).

You can override a desktop style easily on mobile, but going the other way is just insane.

This could have been an argument against “mobile-first” but that is not true. The most famous CSS frameworks like Tailwind CSS for example start from mobile and simply write css the following way, there’s nothing insane about it:

// Styles for mobile here   
@media (min-width: 768px) { // Styles for tablet and up here }
@media (min-width: 1024px) { // Styles for desktop and up here }

I tested out Webflow today, and I think it’s good but this “desktop-first” philosophy seems to make the tool much harder to use for experienced designers. I personally wished it would let you choose which way to go on a project-basis. What do you think @magicmark?

4 Likes

I always look at the regular version first. The mobile version is needed when I’m out of the house. This is the normal state of affairs, isn’t it?

Thank you for such a well laid out and diplomatic response. I think Webflow would greatly benefit from the flexibility of starting mobile-first or desktop-first. The choice would satisfy both users!

1 Like