Streaming live at 10am (PST)

Is "mobile first" design possible in Webflow? [YES]


#1

Hey there,

I guess this was asked once in a while before in some cases, but I want to hear some current
oppinions on this topic and maybe some suggestions how to work “mobile first” in Webflow
while its workflow is cascading down from big screen sizes to smaller screen sizes.

If theres an already excisting way/method to do this, the let me know too please :stuck_out_tongue:

thx !


#2

Hey @rico

If this is a feature that you’d like to see implemented in Webflow, the please vote for it. The popularity of features on the wishlists greatly helps the staff prioritize updates and features.
https://wishlist.webflow.com/ideas/WEBFLOW-I-105

In the mean time, here is a nice workflow.

  • Inside the body add 2 divs
  • Give the first div a class of mobile_container with the following properties max-width: 479px; margin-left: auto; margin-right: auto; background-color: white;
  • Give the second div a class of mobile_bkgd with the following properties: position: fixed; z-index: -1px; background-color: #A6A6A6

This will simulate the mobile portrait breakpoint.
To simulate mobile landscape breakpoint then adjust the mobile_container to have a max-width: 767px.
To simulate tablet breakpoint then adjust the mobile_container to have a max-width: 991px.
To simulate desktop breakpoint then adjust the mobile_container to have a max-width: auto.

As you build the site keep all of your elements inside of the container. When you’re ready to publish the final site simply move all elements out of the container and directly under the body and delete the container and background elements.

BEFORE

AFTER - Mobile Portrait

AFTER - Mobile Landscape

AFTER - Tablet

AFTER - Desktop

Hope that helps. Happy designing!


#3

+1 on this.

A simple setting like: “Use mobile first pattern” would be enough allowing then to create the page by the mobile first pattern. In the backend, instead of writing media queries by max-width, it should use min-widths for the bigger sizes. The viewport icons on the top would be rearranged, from small to big. Thats all it needs and it would help a lot for webdesigners/developers/designers who are used to design from the small to the top.