In projects where mobile is the primary way an audience will view a site or app (and this number will probably only ever increase; one of my clients has 80% mobile views for example) – it often makes sense to start the cascade 'mobile-first' rather desktop first as webflow currently works – it helps designers, developers and stakeholders keep focussed about their audience, the content, the effectiveness of the UI decisions and importantly, generally just 'think' more from a mobile-orientated point of view (+ arguably some performance gains depending on how the cascade and code is setup).
If a majority of your audience use mobiles – I can't think of any advantages of starting desktop-first. I find webflow's approach encourages mobile views to become basically stacked versions of the desktop view – and while agree that is essentially what most mobile sites are these days (and is often the best solution), I think the approach generally discourages more creative solutions to optimising the experience for small screens.
(Discussed at length in the forums, often with much argument!)
Matthew Sanderson
A little late to the party here as I’m new to Webflow (just prototyped my first experience yesterday) but this topic came to mind right-away as the new site that my company is building needs to be mobile-first. I had just assumed that mobile-first would already (at least) be an option and had a hard time thinking about the adjustments for each breakpoint knowing that going mobile-first would be difficult to do with Webflow.
And I’ve read some of the previous discussions in the forums but I didn’t see (I may have just missed it) one of the main reasons we want to go mobile-first, related to CSS media queries. For performance reasons, we want to only load the base CSS for mobile first and load the CSS for the other breakpoints when needed since in general, connection speeds on mobile devices are still generally slower, especially if not on Wi-Fi.
But I understand that it’s a pretty big change in both mindset and coding approaches so it would be great to have the option to go either way at the project settings level – this would allow all Webflow users to build the way they feel best fits their project.
Project setting toggle: (maybe in the Advanced Settings section)
Mobile-first CSS media queries (would argue this should be the new default but having the choice is a good start)
Desktop-first CSS media queries (current default)
Also, I think the mobile-first discussion (that I’ve seen so far) included 2 related but separate things:
CSS media queries direction (addressed with the aforementioned project setting)
Designer workflow direction for CSS breakpoints (addressed with approach below)
In the Designer, it would be great to be able to have the option to set any style additions (or changes) at any given time to apply to, in one of these 4 directions (I've attached a mockup of how it could work in the UI):
Current & Up breakpoints
All breakpoints
Current breakpoint only
Current & Down breakpoints
These 2 approaches, used together, would optimize the Designer workflow to minimize repetitive work at each breakpoint and give us the flexibility to optimize for mobile-first if that better meets the needs of a project.
Attachments Open full size
I'm surprised this isn't an option or the default as well. UI is less prone to break from an expansive perspective vs a contracting method.
Attachments Open full size
I've just touched the Webflow today and fell in love with it.
I was already wondering what site plan to choose. But desktop first stopped me.
I see in discussions that a lot of people are glad to use desktop first philosophy (still can't get why despite all their arguments :)
And yes, I don't say you need to change everything totally. But at least to add ability to choose that mobile-first option.
If it would be implemented I would buy the site plan just right now.
But unfortunately, I see discussions since 2015 and no changes. Very very sorry about this
Attachments Open full size
Yes. Please implement this. I'm kinda shocked this was not in the product already.
Attachments Open full size
This is a must-have feature! Isn't it?
Attachments Open full size
Please do this! We have 80% traffic to mobile, and it is so annoying being forced to think desktop first when that isn't our reality.
Attachments Open full size
Could not agree more. This would make my life 100x easier and make webflow so much faster and cleaner for me.
Attachments Open full size
Would be great to work in a "mobile first" way, e.g. by setting the smallest/Smartphone breakpoint as default and do the inheritance/cascading up the the larger ones.
Attachments Open full size
HNY! It's January 2022. New budgets, new platforms, lots of important decisions to continue, or test out other platforms that adapt to the needs of designers/developers who need a mobile first option. I love the tool, and would really value this critical update.
Attachments Open full size
Lack of mobile first option is the only reason I haven't gone all in on Webflow yet. It's insane that there is a platform like Webflow that doesn't have that in mind.
Attachments Open full size
An elegant solution could being able to set the "star" icon on another device, for ex: the mobile one!
Attachments Open full size
Min-width mobile first CSS please
Attachments Open full size
please make mobile first approach an option in webflow. I know this will get new many new users on the platform
Attachments Open full size
Come on Webflow.
Attachments Open full size
Very disappointing to see Webflow staff @magicmark mention this approach as being "insane" with a total misrepresentation of the cascade in this thread: https://discourse.webflow.com/t/mobile-first-or-desktop-first/118545.
Thanks to @cyruskorn for providing excellent counter-points. Yes, we need this feature!
Attachments Open full size
I really want to use Webflow and it blows my mind that this isn’t at least an option in settings to change beak-points to min-width to work mobile first.
Attachments Open full size
Hi! I sort of must have this. Too much pain going back and forth between the mobile view (to see the results) and the desktop view (to make the changes). Unbearable!
Please, add it 🙏🏼
Attachments Open full size
Yes Please!
Attachments Open full size
Graceful degradation should not be the only option for creating responsive websites, it's 2021. It's common knowledge that the majority of online traffic is now coming through mobile devices. Mobile-first design and progressive enhancement should honestly be the default responsive feature. At the very least we should be able to easily set and control media breakpoint styles within our classes.
Attachments Open full size
Almost 4 years. Hey Webflow, how many votes are you waiting on this one to make it a priority?
Attachments Open full size