So this concept of Mobile First Design is making me think about starting things off in Webflow in the mobile view. Does anyone else do this? How are you going about mobile first design? Are you simply adjusting the desktop design to fit on mobile view, or are you mocking things up in mobile first?
I’m very interested to see what your thoughts are on this. 
The following is only my opinion (:
(1) The way Webflow works for setting responsivity goes from the desktop breakpoint to the portrait smartphone breakpoint. Properties cascade only the way down. So you design your lowest breakpoints by setting exceptions. Also, in Webflow UI, you can’t select a parent class to edit it, the designer brings you back to the desktop breakpoint when you do this.
(2) It’s not a loss of time to draft your design on paper with 2 or 3 major breakpoints, including desktop, to design the desktop view first and to set your responsivity rules afterwards. Webflow is very efficient. Also by working with %/vh/vw units and by using the ROw widget in Webflow, you can reduce the work needed to make the site responsive.
(3) Mobile first means you’ll concentrate on the mobile market first, so of course there’s a special attention put on the lowest breakpoints, but there’s not technical reason to completely ignore the others.
Hope this helps (:
I agree.
I gringe everytime im told to do this. Its the wrong way around as far as im concerned id much rather start at desktop and work down.
That’s such a valuable comment, thank you vincent!
I really need to study up on vh/vw units, this is the third time in the last few weeks noticing a mention about those units! If I understand correctly, using %/vh/vw units the design will be responsive, and then at the major break points further refining of the unit values is likely needed.
I’m with you @Sveky whenever I hear mobile first design my head starts to hurt. It’s usually followed up with conversion optimized buttons talk.
Using %age units (%, vw and vh) will not make you design responsive but ELASTIC, adaptative. It’s a good practice to avoid giving fixed values for dimensions, especially for width. Learn how to include min-width and min-height to your thinking when working on a layout. For example, a 100vh section will make an immersive full browser section. But what if it’s browsed from a tiny laptop with 800px height screen? Then put a min-height of 550px so you ensure that the section will have room for its content even if the browser is tiny on the screen.
Responsivity is another step, allowing for specific layouts for each breakpoint, unique rules, exceptions.
Vw and vh units are extremely simple to use, just type the unit in in Webflows’ fields after the value. It’s “percentage of the viewport”. There’s a immediate beneift when you want a section to fill the browser in height. Using %, you’d need to give an “artificial” 100% height to the body before seeing any section to fill the browser. With vh, no need to give this property to the body.
Thank you @vincent that’s really helpful! Coming from a Squarespace world things like this never need to be considered. Prior to Squarespace I just used WordPress themes from Themeforest. With Webflow I love the ability to create my own designs and provide the exact look/feel a client desires – but I’m realizing there’s so much more to understand. Elastic vs responsive, that’s a great explanation and helps tremendously!
To me, Mobile First design is really more about content than design.
Mobile first helps you understand what is the most meaningful part of your content.
For example:
Mobile first isn’t much about "let’s start with the mobile breakpoint then go up. " Sure thats a nice way to deal with it, but CSS doesn’t work like that and might not for quite some time.
just my 2 cents. 
Great point, thanks @PixelGeek. That’s an excellent talking point too when being hammered about mobile first design from a client. Ranking content in priority order, then making a decision as to what gets displayed on small screens vs larger screens. Fabulous!
Also really digging the point about css cascading downwards not upwards! If I understand correctly 
So much to learn!
I actually like the idea of mobile first design. The more and more I’ve been reading up on it and actually understanding the concepts behind it, the more I agree with it. It’s a lot easier to add more functionality and complexity as the media queries get larger versus “resetting” not needed features going down.
So do you start off in mobile view in Webflow? I guess let me back up, do you have a wireframe/sketch prior to getting started in Webflow?
So far I haven’t been wireframing, I’ve just sat down and started throwing ideas into the editor. I’m kinda thinking it’s a better practice to at least wireframe things prior to opening webflow.
I can see starting in mobile view if I have a mockup to work from…but without a reference, I’m not sure I would be able to start in mobile view. Would be lost!
You can’t really work in the “mobile first” mentality with Webflow (at the moment) because the media queries were designed to cascade down… currently, styles don’t cascade up within Webflow.
To answer your question though… when I’m working on something mobile first, I’ll sketch out something very loosely based on the content, as PixelGeek had mentioned. Identify the very basic content that will build your modules/components.
For me, I still think about and sketch out how things should be arranged on desktop but when building, I think of how to get to that end point, which will most likely involve columns and rows of modules, from the basic single-column (sometimes two) mobile views.
I hope that makes sense and helps you understand better.
That’s great, helps tremendously. Thank you for sharing!
I disagree that “mobile first is a marketing strategy rather than a development one” – I think it’s a design, marketing, development, user experience, and content strategy all at once.
In projects where mobile is the primary way an audience will view a site or app (and this number will probably only ever increase) – it just makes sense to start mobile-first (one of my clients has 80% mobile views for example) – 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, I think the approach generally discourages more creative solutions to optimising the experience for small screens.
Total love for WebFlow as a tool, but I wanted to respond to the idea that CSS cascades down widths by nature. That’s not really true. Our box model with CSS is, by its nature, fully fluid. There is no preference within the code’s pedagogy for wider styles first.
Fundamentally, it’s hard to argue that CSS works one way or another. Rather, we’ve been so focused on desktop-first because of the evolution of the technology.