How to Save HOURS When Optimizing For Mobile In Webflow

Today, we are going to chat about how you can save countless hours when you are optimizing your site for mobile in Webflow. I am going to give you 5 tips that will drastically speed up your optimization process!

Optimizing your site for mobile, for me, is the most pain-staking process of building out a website. You've spent weeks (sometimes months) building your site out to perfection on your desktop and then you have to turn around and optimize your perfect site across every different possible breakpoint. It is extremely tedious and incredibly frustrating.

Today I want to give you guys 5 tips that I've learned over the years that have drastically reduced the time (and frustration) it takes to optimize your site across different breakpoints.

First we are going to discuss how we can use classes to cut down on the time we spend styling our elements at different breakpoints. This very well may be the most important step in the whole process. If we can style consistently across the pages of our website, then, when it comes time to optimize for mobile, we can make one change to one element and the rest of the site will follow.

Secondly, we are going to discuss how we can harness the power of Flexbox to create fully responsive sites at different breakpoints. It is important to avoid relying on margin and padding adjustments to create responsive websites. The more we can use Flexbox layouts, the easier time we will have!

Then we will discuss how sometimes certain elements just do not work on smaller break points. In some cases, it does make sense to simply 'hide' that element all together at smaller screen sizes. This is a simple way to clean up your site and save time by avoiding wrestling with elements that just don't fit on smaller screens.

Finally, we will wrap up discussing two different ways that you can save time by using Webflow's unique UI. All of these tips together should save you countless hours when you are optimizing your site for mobile!

-------------------

Resources -

--------------------

Timestamps -
0:00 INTRO
0:55 Use Classes
2:54 Harness The Power Of FlexBox
4:18 Use Display 'None'
5:34 Optimize UP At Different Device Breakpoints
7:42 Use 'Preview' Button
8:21 CONCLUSION

--------------------

--------------------

👨 WHO AM I -

I'm Alex, a 26 year old Financial Analyst who lives in Nashville, TN. I'm now over half way through my twenties (I'm getting old!) and believe that I've acquired some valuable life advice over the past 6 years that I wish I knew when I was just entering my third decade of life. I make videos to pass on these life lessons to all of you (along with other ideas, tips, tricks, knowledge, experience, stories of success, stories of failure, etc.) so that you all can survive your twenties with more grace than I have managed so far!

[infinitedesigns_io]

Solid information for beginners! And a good reminder of the basics for more advanced users.

[munchkinm]

I love you literally, you saved me so much time.

[LesleyCowie]

Thanks for the great video! Your first 2 tips have already helped me greatly.

[peytonmoore]

You are a lifesaver. Thanks for sharing this!

[reynoldsj_]

Fantastic video, and very helpful. Thank you!

[Norainjoe]

every time I change something with the mobile tab clicked, it changes everything for desktop, too. I don't get it.

[SO-fbef]

at 5:20 setting my image AND the div that contains it to 'none' changes nothing, even checked preview mode. Don't spread lies please.

[ricksande]

You should mention these tips are for absolute beginners. Wouldve saved me time and irritation watching irrelevant content 😅