Mobile-first and setting breakpoints in webstudio

At a glance

The community members are discussing the pros and cons of mobile-first vs. desktop-first approaches when using WebStudio. Some community members share that WebStudio was initially mobile-first but found it less convenient, so they made it agnostic, allowing either approach but with desktop-first as the default. They note that going mobile-first requires always starting with a narrow screen and testing on all others, which is less practical in a visual environment like WebStudio.

Regarding the CSS question, the community members confirm that mobile-first or desktop-first does not make a difference in the amount of CSS WebStudio delivers to mobile browsers, as they are rendering atomic CSS by default.

ppaulrudy

I'm curious on people's opinions about mobile-first and setting breakpoints in WebStudio. Coding from scratch, I've tended to code mobile styles first. But given that the CSS is generated by WebStudio, perhaps the pros and cons for mobile or desktop first change. Thoughts?

9 comments

OOleg Isonen

webflow is desktop-first, we tried to go mobile-first in the first versions in webstudio and found it less convenient

OOleg Isonen

so we made it agnostic, you can do either way, but default is desktop-first

OOleg Isonen

goign mobile first means you have to always start with a narrow screen and then test on all others

OOleg Isonen

its just less practical in a visual environment

ppaulrudy

Thanks, I appreciate that insight! Any comment on the CSS question? Does mobile-first or desktop-first make a difference as far as "how much" CSS WebStudio delivers to mobile browsers?

OOleg Isonen

no difference

OOleg Isonen

we are rendering atomic css by default

ppaulrudy

Gotcha, thank you!

ppaulrudy

@John Siciliano there's our answer

Add a reply

Join the Webstudio community

Mobile-first and setting breakpoints in webstudio