Ability to create sites using a 'mobile-first' approach (mobile styles first in CSS cascade)

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
  • Jan 18 2017
  • Tae Park commented
    19 Feb, 2023 05:07pm

    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.

  • Kyle Sandstrom commented
    5 Dec, 2022 11:02pm

    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.

  • Dasha Cheban commented
    8 Nov, 2022 12:12am

    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

  • Dan Boyle commented
    20 Jun, 2022 11:08am

    Yes. Please implement this. I'm kinda shocked this was not in the product already.

  • Filip Paldia commented
    12 Jun, 2022 09:08am

    This is a must-have feature! Isn't it?

  • Tobias Rosman commented
    30 May, 2022 10:53am

    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.

  • Frankie Lyon commented
    29 Jan, 2022 10:54pm

    Could not agree more. This would make my life 100x easier and make webflow so much faster and cleaner for me.

  • Jan-Henrik Hempel commented
    25 Jan, 2022 12:13pm

    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.

  • Aaron Wierenga commented
    3 Jan, 2022 03:04pm

    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.

  • Liz Heidner commented
    30 Nov, 2021 11:09pm

    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.

  • Antoine BERNIER commented
    12 Nov, 2021 11:51am

    An elegant solution could being able to set the "star" icon on another device, for ex: the mobile one!

  • Ian Walker commented
    23 Oct, 2021 02:07pm

    Min-width mobile first CSS please

  • Ian Walker commented
    23 Oct, 2021 02:06pm

    please make mobile first approach an option in webflow. I know this will get new many new users on the platform

  • Nate Truniger commented
    23 Sep, 2021 10:44pm

    Come on Webflow.

  • Christopher Nielsen commented
    6 Jul, 2021 04:06pm

    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!

  • Michael Wandelmaier commented
    24 Apr, 2021 07:55pm

    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.

  • Tobias Rosman commented
    25 Mar, 2021 08:20pm

    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 🙏🏼

  • Taylor Wogoman commented
    27 Jan, 2021 09:22pm

    Yes Please!

  • Emmanuel Ikomi commented
    17 Jan, 2021 09:06pm

    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.

  • Franco Ruarte commented
    16 Jan, 2021 02:37am

    Almost 4 years. Hey Webflow, how many votes are you waiting on this one to make it a priority?

  • Load older comments
  • +604