How to Save HOURS When Optimizing For Mobile In Webflow

hey everybody welcome back to the channel today i'm going to show you how to save countless hours when you're optimizing your site for mobile in webflow here we go [Music] okay so this is probably my least favorite part about building websites and that is when you finally have your desktop website built and it's gorgeous and pristine and perfect and you put hours and sometimes weeks and months into the process it's finally done and then you have to basically do it all over again across different break points whether it's on tablet or mobile you have to optimize every little pixel again it is so arduous but the good news is this i have put together a list of five tips and tricks that i've learned over the years that now i use to save hours and hours of time every time i'm optimizing my site for mobile in webflow so without further ado let me tell you what these tricks are all right so the first pointer i'm going to give you that you need to use every time you're optimizing your site for mobile is you need to use classes to save yourself time all right so what does this mean let's look at some examples i have two boxes here okay my left box i have two headings with different classes and two paragraphs with no class okay and in my right box i have two headings that share the same class and two paragraphs that also share the same class so let's pretend i'm optimizing these two boxes for my mobile break point so we'll go to mobile and i'll just show you what happens to our no class box so i need to bump this text probably down a little bit for my mobile view so i'll just come in here and i'll just drop the text down to 30 pix and i'll drop the paragraph down here to 14 pixels okay the problem is as you can see these have not changed so i'm gonna have to go in to every single heading at every different break point across my site and update every element like this it's going to take forever you don't want to do this the key to really speeding up your mobile optimization of your site across different break points is to share classes as you can see with box two so for example i need to drop this down the heading and they both drop down both headings drop down at the same time same thing with the paragraphs i'm going to drop this down to 14 pixels and they both drop down at the same time this is absolutely crucial because for big large websites you're gonna have similar text across all the different pages of your website and if you have to go into every page and update each element individually you're going to lose hours and hours of time but if you can use classes to bulk style your elements across different pages of your website then the time you spend optimizing your site across different break points will decrease substantially this is a major key all right so let's move on to the second tip the second tip that you can use to streamline the optimization of your site across different break points is to use the horizontal and vertical flexbox options what do i mean by this well let me show you so as you can see right here on my desktop breakpoint i have three cards and it looks very good looks clean i like it but when i come into my mobile view my mobile break point you can see these three cards are basically hanging off the screen it looks horrible it's too scanning it's too narrow it looks gross now what you could do is you could come in here and this is what i did when i started i started just playing around with each of these cards and messing with their margin their padding trying to get it all lined up but what you can do instead and this is the tip is to come in here to our container that we have flexed horizontally the container holding our cards and just change it to flex vertical and as you can see the cards just line up perfectly right down the page and it looks beautiful now when you come back to your desktop the cards are still aligned horizontally when you come down to mobile you can see they hold their vertical flexbox alignment so do not manually play around with your cards on the mobile site use the power of flexbox directional layouts to streamline the optimization of your site across different breakpoints alright so tip number three is to use your display none button to clean up your mobile view let me show you what i mean so here i have a section here we have three different pictures on top of each other and it looks really good again on the desktop breakpoint but when i go to my mobile break point you can see that it's kind of ugly like the bears are just the picture of the bears just isn't working there it's just kind of too close you can't see all of it it's awkwardly set a lot of the times when you're optimizing for mobile you'll run into this problem where you just can't get an element to look good on smaller screens that's okay i used to fight it i used to wrestle it and try to make it all fit but sometimes it really is better to just hide the element altogether and move on instead of wrestling with it and still playing with it for so long just get rid of it sometimes it looks just as fine on mobile so how would i do this well i'd come into my section i'd choose the image and i just for my mobile class just hit hide and at that point it finally starts to look a little cleaner obviously i need to like bump this text down some but the bears are gone and it looks a lot better so don't be scared to hide different elements on your page that just aren't working on smaller screens all right so tip number four is to optimize your site at the smallest width at each different devices break point what does this mean well as you can see in webflow we have these different like default break points for our different devices so we have tablet mobile landscape and just normal mobile the problem i found in the past is like for mobile landscape for example this default value is not as small as you can go for a mobile landscape so if you grab this little tab here and slide you can actually see the different devices that pop up or that you're optimizing for at the different pixel widths so what i found really helps is to actually just go down to the smallest devices you can for the mobile landscape and optimize at that pixel width because otherwise if i optimize out here at 600 it might look good but as i drop down to 480 for these smaller mobile landscape devices it might not look good so i like optimizing up for each different device so lowest to highest now obviously you don't need to do this for like if i go to mobile and i go all the way down to 250 pix my lowest option you can see i'm optimizing for the nintendo entertainment system i don't need to do that i don't need to optimize for 250 pix i'm not even going to worry about 320 where it's just iphone 5s and ipod touches those are lame but i am going to come up here to 360. you can see all the different phones you're optimizing on and that's the one i'm going to optimize on for the mobile portrait i'm going to optimize at the smallest pixel width that kind of makes sense for me at the different devices so 360 for mobile portrait for mobile landscape i'm probably going to optimize down here at 480 and tablet i'm going to optimize at 7.68 and again the reason i'm doing this is because if i optimize small then when i make it bigger normally the layout still works on that screen but if i start high up here at 912 and i optimize for that sometimes at my smaller tablet sizes it does not work now finally my fifth tip for you when you're optimizing your site for different break points is to use this preview button this is the most helpful thing i have found in all of my time instead of having to publish your site every time onto a domain refreshing and then actually dragging and pulling the window on your computer left and right to get different sizes hit this little preview button grab this tab here and you can see how at every different break point down to the pixel your website will look so just drag back and forth and you can see how it looks this is absolutely critical when you're optimizing your site like this alright guys so that's it that's how you can save yourself loads of time when you're optimizing your site across different break points if you like this video please go down smash that like button i really appreciate it if you want to see more content like this in the future consider subscribing if you have any questions go down in the comments i will get back to you as soon as i can thank you all for being here i'll see you guys next week peace

Channel: Alex Leischow

Views: 7,868

Keywords:

Id: v_nkfss5y6I

Length: 8min 41sec (521 seconds)

Published: Thu Jun 02 2022