What's the thought behind Webflows CSS cascading from desktop to mobile?

I have a general question to the webflow devs.

How come you chose to implement the CSS so that it cascades “downwards” (i.e, desktop > tablet > mobile) and not the other way around?

I’m kinda new to webdesign but I’ve been taught from the start that Mobile First is the way to go when creating responsive websites since it is a lot easier to scale up and add content rather than the other way around and maybe remove content.

Not that I’m not happy with the product (it’s awesome!), I was just curios as to how you came to that decision :slight_smile:

1 Like

Not really.

“Mobile first” isn’t a rule or a good practice for such a large topic that “responsive” is. Mobile first is a decision you take to develop a product for mobile, first, because, for example, the market you reach is there rather than on desktop. It doesn’t mean I’m designing the mobile first and alter it for other devices and desktop. Usually when you go Mobile first, you don’t even develop the desktop at first.

In another hand, responsive means the design is going to adapt for devices.

That said, it’s ok to wish to reverse the cascading, it could be useful for a lot of projects.

In a perfect world, you don’t even go responsive, you develop, for every viewport, a specific design.

2 Likes

in a perfect world android has only 4 screen sizes:

:wink:

4 Likes

“So when you said Mobile First, which one of them were you talking about?”

1 Like

Haha, point taken @vlogic! :smile:

Thank you for the clarifications. Always interesting to get to know how others reason around this since there is obviously a lot to take into account when designing :wink:

1 Like

I personally agree with the overarching content philosophy of mobile first. Honing your message and delivering concise, focused content - what people need. Responsive has to come into play somewhere as it is a huge array to accommodate. I wish for more breakpoints and the ability to preview actual aspect ratios because it is pretty tedious to expertly tweak and average. Webflow makes the tweaks crazy fast, I think we could use a few more breakpoints. Or maybe I need to learn to use scaling scripts and the parent driven text size REM deally?

Try the interactive graphs on the opensignal report. The screenshot really doesn’t begin to do it justice.

The report has somewhat ambiguous recap stats. I didn’t locate and citation of the number variant of screen sizes in pixels for instance since they are showing physical display sizes - but they are citing 18,796 Distinct Android devices seen as of Aug 2014 - insanity.

Apple has 4 sizes… they must not care about mobile market share and consumers craving individuality. Poor Apple - so shortsighted :wink: They could use a more functional browser though.

Interesting discussion this :slight_smile:

I kinda also like designing for mobile first even though I sometimes find it harder.

I would also like a few more breakpoints. One for really large screens (like 1200+px) and one for tablet in portrait mode but given the, as previously stated, insane amount of android screen sizes, that is just wishful thinking… It would be neat if there was a standard way to get the orientation of the device though. I know that there is a media query for this but I’m not sure how standardized it is?