HOW TO MAKE WEBFLOW SITE LOAD FASTER: Episode 3 - HTML Tags, Full-Width Image Sections, Header

hey hi everyone i hope you're doing great and welcome back to my channel so this is the third episode of our webflow optimization course and if you're brand new here i highly encourage you to go out there on my channel and view the first and the second episode now we recently covered how to optimize a font right we uploaded that font to our new webflow project and on the second episode we've been covered creating a basic design system so we have that so we have those guidelines and those basic classes that we're gonna reuse throughout our webflow project now in today's episode rain in today's episode we're gonna talk about the html structure we're gonna build the navigation and we're gonna build the header section of our adobe xd design so before before going into the design and showing exactly what we're going to do let's roll the credits okey dokey so just a small refresh for all of you out there this is our design and in today's episode we're gonna build our navigation on the top and we're gonna build our full width background image section which is basically the header good now before we get started and build these sections on a web flow just wanted to take a couple of moments and tell you guys that today will basically cover some some core html tags now you probably know that webflow it's not just a website builder it's also an html and css visual editor so it's important when you build your webflow site and when you optimize it you have this mindset that hey i'm developing a real html css and javascript code inside my webflow project so being said today we're gonna cover html tags and for some of you this may sound familiar so have different html tags like a which is using usually used for links for text links for link blocks and we're also going to cover the nav tag the header tag and later in the course we're going to talk way more of these tags we're going to implement them because so why it's important to use these tags is because browsers and search engines they love when you have a good structure of your webpage it's like reading a book you have you have the page where you have the table of contents and then from there you have the book breakdown by chapters and each chapters might have sub chapters might have the body text itself might have some images so of course that would be a greater reading experience if your book would have all of these components same goes for example for a youtube video now if a youtube video have chapters have different annotations that have different transitions and and tooltips on on the video itself this is going to be so much easier for you and so much enjoying to watch that youtube video and we have for so long time css version 3 and html version 5 that gives us additional html tags that we definitely need to use so our browser understand how our web page is structured and as well as any google bots that go out there on our website and scrape our information so without being said let's start diving into our navigation so i'm going to open up i'm going to open up my webflow project and i'm going to select the body tag so command a which will open up my quick find and i'm going to type div block everything we build inside the web flow it's a div block okay so a div block it's basically a box everything in web it's a box okay so with our div block selected i'm gonna go to my element settings or i can simply press the d key so element settings and right here we have tag now i want to make sure that i use a proper tag for this div block now i'm gonna click on this drop down menu and i'm gonna choose nav what this means is instead of the div tag applied to my html element to my d block so it won't be anymore it won't be anymore div class equal right it's gonna be nav class equal okay so it's important to note these html tags and why they're important now i'm gonna click in a moment nav but i just wanted to give you a quick glance on what exactly snaps as you can see webflow tells that here now it defines a set of navigation links such as those in your main site navigation so basically by applying this tag our browser and different accessibility features inside our browser they know that this is our navigation this is where all of our links will block all of our links will leave and then later on when google go out there and scrape our website for the site links he'll know exactly where our navigation links are located i have a really good article from html.com which explains the basic tags and why we would ever need to use these tags i'm gonna make sure that i have this article in the video description so if you guys have time go out there and fully read this article to better understand what are obviously html5 tags and why we would ever need to use them good back to our web flow so we have our div block which now it's a nav block and i'm gonna click my navigation my new navigation and hit control enter or command enter command return to add a class to my to my nav block so i'm gonna say nav bar now remember that it's also important to name your classes in a mnemonic way now a mnemonic a mnemonic practice in a mnemonic principle in naming your class means that you name your class so it's clear what this class do or what's the function of this class so for example i know that this class is called navbar which stands for navigation bar so this is a mnemonic way of naming your classes and you should apply this throughout your entire site because later on it's gonna be so much easier for you to understand what this class do and to what element it is assigned and what will happen if i'm gonna change that so navbar we have this new class right here yeah and now inside if you do remember from our previous episode we've built a div block which is a container so i'm gonna choose container from my from my selector pane right here and if you do remember we limited it to 1200 and we set the margin to auto just simply because now most of the websites out there they do have a container and they need to have a container because if any if anyone out there browsing my website on a 4k display i want to make sure it's easy to read and basically digest my website sections information content so it's important to have a container for your website good now i also know that let me go back to my design i know that my navigation have some padding here so i'm having 18 yeah i'm having 18 pixel padding from the top and from the bottom and with my nav bar selected what i'm going to do i'm going to hold the alt key this will allow me to add the same padding from the top and from the bottom and same goes if i hold alt from the left and from the right and as you can see webflow kind of um highlights me both directions but let's let's actually add padding from the top and from the bottom so we talked about 18 that's the power of two okey dokey so 18 good and what i also need is well because my container it's 1200 but my minimal desktop size it's 900 so guys it's it's 992 as you can see my my container my navigation it's on the limit so let's add 20 pixel padding 20 pixel padding for my nav bar from the left and 20 from the right good now right now my container my navigation container will not be wider than 1200 but also have this padding so it's clean and it's not going off limit good so now inside my container i need to i need to understand visually how my navigation container it's been structured so i'm having my link block right here which have this logo we previously built in our core in our basic design system and then on the right as you can see i'm having a group in my adobe xd and this group have this text this call to action text and it has these two buttons so what we're going to do is before we would ever translate these elements inside a web flow you need to group them just like you would group them inside the webflow so with this in mind let me just go to my design system and i'm gonna copy my brand link right here i'm gonna go back to the home and paste it right here don't worry that it takes full width because in a moment my container will have a display set to flex and now what else i want to have here inside this container i want to have a div block so let's add a class it's going to be nav bar cta dash w which stands for proper where you can use dash c which stands for container now i'm with wrappers so it's going to be wrapper good enter to apply the class and now inside this div block which in essence it's a group i'm gonna have my text block and let me copy so launch your course in the next two hours and i'm going to paste it right here now the reason why we don't have navigation links is as soon as the user will scroll past the header we can display the main navigation because we want to drive conversions from this landing page i want to make sure my call to action and call to value is visible in that very moment a client lands on my site so what else we have in this group we have these two buttons give it a try today and sign in so let's make sure we add those also now what i'm gonna do is you can see that these two buttons they kind of live in their own group right here so we have group number six and then we have these two buttons so let's do the same thing inside the web flow remember we're doing this because later on it's going to be so much easier to manage the elements inside the group so with my navbar cta wrapper selected i'm going to hit command a to open up my quick find i'm going to drop a d block right here and my d block will be navbar cta b btns which stands for buttons so inside my navbar cta buttons let me actually go to my design system and let me copy this black button let me go back to my home and let me paste it right here okay now we also have one more button which have this ghost style applied to it and if you do remember from our previous episode we created the combo class for our btn simple which is btn simple ghost good okay now you can see that these two buttons wait they're they're not so tall so their height is 54 pixel where our buttons right here are 65 so i want to maintain 65 for all my buttons that's important that you have a consistency so it's clear for the user that this is a button on the top of that we have the fitz law in user experience now paul fitz was an american psychologist and analyzing the human model system he discovered that the time it takes to click on the target on a button right or on the link it's proportional or it's dependent on the size of this target and the time it takes to arrive there so the distance so we want to make sure the button is wide enough it's big enough and it's positioned where it's easy to click on that button okay so i have my two buttons right here now what i'm going to do is of course i'm going to change the text so we have get give it a try today so my first bottom text will say give it a try today and please try not to use caps lock because we already have applied text transformation uppercase to our button and it automatically makes all of our letters uppercase and the second one is sign in good now because both of these buttons they leave inside another d block not another group what i'm going to do is i'm going to apply display grid why so because in a moment we're going to build some padding some space some gap between these buttons with my display grid selected now what i'm going to do is i want to switch off one row from here yeah and i'm going to switch one column from here actually no wait a second yeah one column and i'm gonna choose direction column because these are columns i'm gonna choose done and in a moment we will get back to our display grid but let's actually add a class to our text right here so that's going to be navbar cda copy maybe or it may be text let's make this even simpler and i know that i'm having a margin right here where is my design so i'm having a margin right here of 25 but i don't have to apply this margin because you'll see that we'll apply this display grid which will give us much more control over our gap between this all of these elements but at least what i know is it's not 16 in size it's 15 so i'm going to leave this as 15. good let's go back to our container our main big container and let's add a combo class which will be nav bar dash w which stands for wrapper hit enter and set a display to flex all the elements i wanted them to be horizontal the direction and for alignment i wanted them to be at the center and for justify i'm going to choose justify space between now what this does is because we have two we have two groups right here two elements inside our container one element will be pushed to the extreme left and another one will be pushed to the extreme right and the next thing to do is obviously to play a little bit with our navbar cta w without wrapper let's make even simpler and let's go with display flex and i want elements to be aligned in the middle and for the justify i'm going to choose justify and so my elements are all positioned are all floating to the right and remember this these buttons are right here now what you we can do is we can edit our we can edit our grid right here and for our second one we can make it smaller so let's let's try to make it smaller yeah wonderful so there's no need to apply a combo class to this button and define a margin from the from the right because we have this grid right here and now we can we can add whatever margin we want without adding an additional combo class good so we know that the space between these buttons are 11 but remember we have this fits law in accessibility and i want to make sure both buttons have enough gap so the user does not accidentally click on sign in instead of give it a try so i'm going to add the gap between the columns i'm going to set it to 16. good and then with my navbar cda tax selected i'm gonna add let's try to make 16 pixels set the margin good so it's 16 pixels here and it's 16 pixels here make sure there's enough room for every trigger for every target every button so it's easier for the user to digest and it's easier for the eye to view all the information and process it we're going to do our full with background image right here good now let's go back to our body right here and let me type let me type section and drop a section right here now remember even if this is a section it's still using the tag div so from our tag right here drop down we're gonna choose header and as you can see webflow tells that hey header specifies a header for a document or section so i'm going to go with header and i'm going to go back to style pane and add my class so that's going to be home header now probably you thought that hey this is going to be a css background but no in reality we don't want to use any css background so i'm going to tell you one more time do not use css backgrounds try to use real images like real img tag because first of all we have the lazy load secondly we have more control over the optimization of that image i need to define the width and the height of my header section so i know that it takes 100 percent width from my entire design so i'm going to say 100 percent and the height is 552 so let's paste it here and now what i love to do is since we're going to use laser load as your website will load up as your browser will access the resources on the webflow server we need to make sure we have a background color so the text is visible so i already have this here this this gray so i'm going to copy this grey color i'm going to copy the hacks i'm going to go back to my web flow and under the backgrounds where it says color i'm going to paste my hex wonderful now i have this background image and for those people for those users that have a really slow internet speed that's going to be displayed a grey color body also going to have the the rest of the content like our heading subheading and the bottom we're gonna add in a moment now the last thing i want to do for our home header section for our home header header tag is to go to the position right here and choose relative so that's why from static we went with relative so our image and gradient can be a child and be absolute to our home header okay so with this in mind let me drop an image right here so image and what we're going to do is we're going to go back to adobe xd and i'm going to show you exactly how you can optimize full width images so let me select my image it's right here i'm going to copy this image and i'm going to paste it somewhere outside my artboard and as you can see my image takes the full width of my artboard which is which is 920 so what i want to do is i want to think for a moment hey probably i'm not going to have traffic from desktop hd ultra hd monitors on 4k and on top of that my full width header section also have this gradient effect on the top which will smooth my pixelated and optimized image so what i'm going to do guys is remember in web every kilobyte every byte counts so instead of 920 for the width of this image i'm gonna go with 1280 to maintain my aspect ratio now the very next thing to do is obviously to export my image so right click on my image export selected so i have my jpeg and my png and as you can see my png is for 430 kilobytes and my jpeg is 193 but let's optimize both and see exactly how much we gain in terms of compressing an image and optimizing an image all the time well most of the time i'm using compressor.io it's a free tool and it do a really good job at using the lossy or loseless compression so i'm gonna choose my let me do a refresh and let me drag and drop my both images so my jpeg and my png right here so as you can see still my jpeg is way better than the png so i'm gonna download my jpeg version so download i'm gonna replace it with my this right here with gpac i'm gonna click save and just simply replace my original exported image now let's add this image right here inside the webflow so with this in mind let's click on assets the hotkey is ge and what i love to do so let me first delete these folders so i can take you step by step what i love to do is i love to have a folder for every page on my site but doing so it helps with the productivity and managing your assets so i'm gonna click new folder and i'm gonna type home page and inside this folder i'll have my image assets documents lot of files so let me drag and drop so yeah 27 kilobytes that's how much we saved so drag and drop so let me click on my image double click choose image and choose this image right here a lot of you when when you run pingdom gt matrix or google lighthouse audit you have this problem that hey your images width and height are not the exact as the original source images you're using so why this is happening this is happening because you haven't defined a width and a height for your image html tag what we want to do is we want to define the width and the height and the width and the height will be the same width and height we have for our source image so that's going to be 1280 in width by 368 in height so we want to make sure we tell the browser hey please do not rescale these images use use the same width and height as my source image now for the load you obviously want to go with loads and scroll this means that your image will only be loaded when it when it gets inside the viewport inside the screen we're going to cover the alt text in our next episode but for the moment i'm going to go with decorative lastly we need to apply a class so that's going to be header img hit enter maybe do header maybe do home header img and we can apply a really great css rule which is object fit so before we would ever do object fit what we need to know is the object fit take you your image takes the the full width and height of the parent in order to use this object fit so with my image selected for the width i'm going to go with 100 pixel 100 percent and for the height same thing 100 percent and now my image takes 100 from my entire width of my website and the height is 100 from this 552 so that's why we have defined a fixed width and height for our home header section good let's let let's select back our image and under the fit right here we're gonna change fill to cover and now you can see it works the same as our css background would work but in this instance it's a real image it's not a background image so it it will take into the consideration the laser load and will not have those problems with the width and the height inside our google lighthouse audit good now lastly what i want to add right here i wanna with my image selected i'm gonna go to position and change from static to absolute remember that's why we have defined a position relative to our home header because our image should be absolute to our home header section and that's gonna i'm gonna click on full because i wanna take the entire space so with the absolute in mind what i need to set is the z index and now what z index means it's it's like layers in photoshop if you want a layer to be on the top of another you obviously bring that to top same thing happens here because i want my image to be on the very bottom the z index will be zero and then for my fade for my gradient the z index will be one so that's gonna be on the top layer of my image and then we're gonna also add our container with the content with the heading and the button which will have a position relative and as the index set to 2 so it's on the top of both the image and our gradient okay so z index hit enter to apply and now i'm gonna go back to my home header and i'm gonna drop right here another div block and that's gonna be home header fade now same thing here it will take 100 of the width and 100 of the height it's going to be position absolute just like our image it will take the same full space and now the z index right here is going to be one so it's on the top of our image now let me go back and see exactly so we have this gradient right here we have the first point it's 17 percent in opacity and the end point it's 54 percent and both the color are black let me click on the plus to add a gradient right here now for the first for the first point right here i'm gonna click on a which stands for alpha i'm gonna type actually let's go with 18 so 18 percent i'm going to close this and i'm going to choose the end point double click and for the alpha i'm going to go with 50 56 actually and the color will be black good and now you can see that all works great by the way our image let's make our canvas a little bit bigger so i would say 920 oh 120 and as you can see our image works exactly as a background image in css takes cover yeah where we have applied our object fit right here i'm going to choose on these three dots which are basically the same as you would modify a css image and i'm going to choose the position right here so these two people they're always in the focus now finally what we need to add is obviously our container that have our heating one that have heating to and also have our button now remember that in web every page should have only one hidden one level that's going to be your main page title that's going to be a main search term that's going to be optimized for google and now every section inside your your web page should have a hitting 2 and then you can have as much heading 3 or heading 4 as it was so if you're using h1 the next level should be h2 don't use h3 so you have to kind of go down so from h1 all the way to h2 h3 h4 h5 never go with h1 and then the next hitting inside the section go with h3 never ever go with h1 and then h2 and then h3 hope this makes sense so let me copy my h1 level let me go back to my flow and i'm going to select my home header and i'm going to drop a div block right here let me add the class so that's going to be home header content and it's going to be position relative because position static does not have does not have a z index so i need to switch to relative and set the z index to 2 actually yeah and what i also love to do is i love to keep everything organized so my home header content is the first item on the top and then we have the fade and then the image on the bottom now this will help you in the long run when you optimize i'm going to quickly modify some stuff on your webflow project good now i'm gonna select my home header section i'm gonna choose display flex vertical and align my home header content okay now my whole home header content will have a heading so h1 and remember only one heading level per page that's going to be your main title and your main search term and obviously i want to do what i want to do right here is i want to apply a class to override this black color so that's going to be home header dash head the color should be wide and i also love to click on this center just to make sure that if some browser did not support flex well at least they are centered in a moment i'm gonna apply a margin from the top and from the bottom to this heading to level why because remember it's a flex and i wanted my middle element right here to push my extreme elements to the proximity to the top and to the bottom so let's select our heading 2 let's select our content back in webflow and let's drop another heading but this time it's going to be in h2 let's add a class so that's going to be home header dash dash sub head sub hat good the color will be wide so rubik normal the size will be 16 and the height usually it's 1.5 so it's it's 26. okay and now i also need a button so with my home header content selected let's drop a button right here and if you do remember we have already created the class btn simple and let's add the text so start today and if you do remember we we have been talked about the margins from the top and from the bottom of our sub head so it pushes both our heading and our button to the proximity of our container so with my heading two selected i'm gonna go to margins and i'm gonna do let's say 12 maybe 12 is too much i'm gonna go with eight and from the bottom it's 26 but i don't know go with 26 because i know this is not a native text it's a d block in essence so it does take a little bit of one pixel two pixel padding inside by default so i'm gonna go with 24 looking good okey-dokey now you can definitely add the hover effect to this bottom maybe make this white on hover but that's not the case of our tutorial i only need to limit the width of my header content so let's see what i usually do is i choose the widest element and in this case we have the subheading and the width is 423 so let me copy that let me go back to the webflow and with my home header content selected i'm going to go to the max with value and i'm going to paste it right here i'm going to choose my subheading and on the alignment i'm going to center my text voila looks looks perfect finally don't worry about your button remember defeats law our buttons should take enough space so it's easy to click on them don't make buttons where the user will need to click on the text with their mouse or with their finger yeah especially on the mobile the feed slow is super important make sure the button is wide enough it's big enough have enough space so even right here yeah even right here it's easy to click it will save a couple of milliseconds for the user but trust me this a couple of milliseconds means a lot for accessibility and side speed what i also do i don't love that my button is black so let me add a class right here btn light i'm gonna switch the color so the color right here will be black oh it's already black so we need to override so let me override by doing this and then for the background color i'm gonna go with white so the border will still be two so let me reset but the color will be wide so being said today we've successfully covered our navigation and the header we've been talked about the importance of using the proper html tags we've been discovered how to optimize a full width background image and we talked about compression compressing those images and we talked about accessibility and having well control over these resources over these image assets that are being loaded on our site so without being said i hope this video was super informative for you guys and yeah if you have any questions remember in the video description you're gonna have an an faq section with the most asked questions so you'll probably find and ask for there finally if you found this video informative please consider to like this video subscribe to my channel and hit that notification bell so next time when we're gonna dive into building our svg logos right here and building our our three boxes with the features you will be notified okay so one more time thanks for watching this video thanks for taking the time and i hope it was super useful for you love you all bye bye

Channel: Chris Tsurcanu

Views: 1,225

Keywords: webflow, image-optimization, site-speed

Id: 4yKmwKUcml0

Length: 37min 27sec (2247 seconds)

Published: Fri Feb 19 2021