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:
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. 
My two cents
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?
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!
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?
YES EXACTLY
Sure, I understand @magicmark’s arguments for many inexperienced web creators. But frankly, that’s on us as a community for not doing better on educating those folks too.
It is SO much easier to go mobile UP rather than starting at an arbitrary desktop size and having to make adjustments both up (ultra wide monitors) AND down (mobile).
Choosing one direction keeps style sheets much cleaner, and much easier to manage. For a tool like Figma that is generating stylesheets that seems like a no brainer.
Mobile first also allows for much better degradation if there are any issues. Let’s be real, mobile first forces us to prioritize what’s important. This leads to better designs and experiences for users, period. If it’s important enough to be on the website, it’s important enough for all users, regardless of device.
I’ve heard the advice to design mobile-first for years and was very surprised to find Webflow does not support this very common approach. Would certainly make my life easier than trying to retrofit a desktop design into a phone.
Is there a feature for this yet? Its 2022 and the mass majority of websites are accessed on a mobile device
To assume that designing desktop first because 10% of your users are there and ‘every user counts’ is insane, of course we’d design for desktop, but the focus should be on the 90% of users that you primarily want to impress
I’ve just designed my website on the mobile breakpoint first, is there now way of keeping this design whilst scaling up breakpoints? I feel like I’ve just wasted a week of my time as when I go to the tablet breakpoint… everything cascades down to mobile and it breaks the design
Its a fantastic platform but sticking with a desktop first approach seems naive in todays environment
Hi Jack @Jack_Pickering, welcome to the Webflow community!
As of right now, this is not posssible. Webflow is designed to always start at the base breakpoint, which is Desktop. Any changes for larger or smaller breakpoints will need to be added after. You can read more about this below: