Webflow Tutorial: Ten Tips for Creating a Responsive Website

hey guys my name is Hosea Conda I'm a Chattanooga based web designer and a web developer and in this video we're talking about the very exciting topic of responsive website development in a web flow I've created this kind of like micro site where we can go through and in real time make these responsive changes so you guys can take those techniques and apply them to your own projects before we get started I just want to say a special thank you to Alexandre Isaiah I hope I'm saying your name right but Alexandre I love your photos they're beautiful and I use them to populate this website so this one say thank you and I encourage you guys to check out his his profile here on unsplash okay so let's begin with talking about the container class so container classes are kind of like the foundational element for creating responsiveness by creating a container that responds to the words of the browser if you put all of your content if you nest all of your content in that container class then all of your content across your website will respond to the width of the browser pretty key idea right so here we've got an example now I created a combo class and I added a gray border kind of like a bounding box around the container so you can see exactly where it is and right now if I click on it you'll notice that it's set to a width of 1080 pixels as I scroll in the browser you'll notice that eventually it breaks it overlaps the browser and it doesn't look good all right so so what we want to do is we want to use a proportional container instead so instead of 1080 pixels I'm gonna make this 85% you'll notice immediately that this now jumps to be a fairly a bit wider and if I start to scroll in my browser again you'll notice that the container is now responding to the browser width and not only that but eventually and it's close enough to the text the text will now start to respond and cascade down to the next line to make sure there's plenty of room and white space that's exactly what we want now if you don't like how wide that part curly is you can always use a max width to make sure that your container doesn't exceed a certain amount so for example let's say we liked that 1080 pixels now it snaps back to the original location but once we get close enough it's responding again and that text isn't responding as well so that is the beauty of a responsive container again your website structure should be like collapse all of this you should have a body tag well in one flow you're always gonna have that body tag you should have sections inside of that body tag and each section should have a container the exception would be of course full bleed sections were for whatever we're using you need the content to be the full width of the browser all right so that's the container class next up let's talk about responsive or proportional units now here we're talking about typography in general we're gonna be styling this piece of white text in the background that says responsive but this is really a tip for any uh when I say any object or element that you're trying to get style some dimension to it you do not you don't have to restrict yourself to using hard pixels consider using proportional units here I've listed them out there are percentages M's Remz viewport width and viewport height and in this sick this example here we're going to be using VW or viewport width to style our mind the wrong section here iam to style this piece of text now now right now it's kind of doing what I wanted to do I want this kind of like editorial look where the word responsive is huge it spans the entire width of the browser and it kind of exceeds the edge a little bit but when I go to preview preview mode you'll notice that now it doesn't have that same effect it's not scaling beyond the browser I'm not saying it looks bad it's just not what I what I want right ended of my design and the reason for that is because I've got 390 pixels as the hard fixed amount so instead of using pixels let's try using viewport width to style the font size I'm gonna start off with 20 and see where that gets us we're going to do 20 VW it's a bit too small so just using the arrow keys I'm going to just go up one at a time and right there is probably right there's perfect 24 VW if I hop back into the preview it's now responding so that where previously there was that white text it's not overlapping the edges of the browser like I want and not only that but when I scroll in it's responding to the browser and scaling in but still fixing to that kind of like edge to edge look that I want all right so that's proportional units Lex up let's look at flexbox wrap children I have found this technique to be super helpful for anything like well here I've gotten a bad section with team profile pictures it could also be useful for like like a blog collection if you have a row of thumbnails and article titles this would be super helpful for that kind of thing as well so what I mean is that right now these profile pictures look pretty good they're side by side just plenty of whitespace but if I hop down into the tablet mode but inside it's not broken the profiles are overlapping the edge of the screen and an unsightly way and that's definitely not what we want not only that but if I copy this and I want to add more to this like let's say I'm using a web flow collection and I'm having an ADD these automatically as I add them they start breaking they're going beyond the edge of the screen in one single line to infinity and that's also not what we want so I'm gonna make one small change that is gonna fix all of that and that is over here in the layout section under children I'm going to click wrap now if I go to tablet mode my profile pictures are now wrapping to the next line or cascading down to the next line to make sure they have enough room and essentially what this wrap children thing does is and make sure that as soon as the elements start to overlap each other or they exceed the browser then they snap down to the next line so super useful not only that but if I copy and start pasting this in its gonna start pasting these a below instead of pasting these in a single and infinite line so super useful for CMS collections as well all right let's move on to flexbox alignment reverse I have found this particular technique to be super helpful for you know what I just realized I think I made I think I left this 1080 pixels on and I want to actually take that off oh here we go okay because this should be bigger all right that's nice and big and I've found the flexbox alignment technique to be really helpful for these two column layouts here in this particular example I've got this image on the left and then supporting content on the right it's a very common layout for websites and this alignment thing just makes it super easy to go from a two column layout on desktop to a one column layout on tablet or mobile so let's actually see how this works so again here on desktop it looks great once I got a tablet though it doesn't look as good the image is way too small and the text is starting to feel pretty scrunched so if I go to the flexbox parent that's holding all this content I can simply change the direction from horizontal to vertical and we're starting to see some improvement there now stacking on top of each other in a one column layout and that's pretty good but we can do better I'm going to click on my image that I set to 50% and change it to 100 I'm gonna give it 30 pixels of margin on the bottom and I'm gonna switch the alignment from middle to left and now we've got this beautiful layout where my images on the right my content is here if I really wanted to I could get rid of this max width so I could say none and now the paragraph looks a little bit more natural okay so that is flexbox alignment reverse next up is keeping your classes tidy this is a pretty simplistic foundational concept and so some of you guys might think should you have included this in your 10 tips but the answer is a resounding yes because thinking strategically about your classes is critical critical to developing a good website and web flow or any website in general let me give you an example I had a client who hired me a couple of months ago and they wanted to build their website and web flow they wanted to do it themselves and they just wanted to me kind of consult they wanted to become after them and just make sure that they had done the work correctly the problem was when I went in after they had created the site I realized that any time they had a new element they created a brand new CSS class to go with it and so anytime I found a bug in order to fix that bug not only would I have to change that in that one spot but I'd have to go to multiple elements across multiple pages to make sure that bug got squashed them and that's not what we want we want to be able to with one kind of like a simple streamlined class be able to make changes across the website and where that doesn't break it but just makes it really easy on us in the future let's look at a real world example of how this affects responsiveness or just creating websites in general and so here I've got here I've got basically the same exact thing as the section above it but I want it to I want to be reversed I want the image on the right-hand side and I want the content on the left so what my client would have done is create a whole new CSS class to achieve that but instead what we're going to do is just add a reverse combo class and here under direction change it to reverse all right so just by that one change that one combo class we've not achieved exactly the layout we we have the same kind of like overlapping structure so that it just kind of feels like there's a pattern to this site and it looks good all right so that's keeping your classes tidy I'm going to take a little break here to rest my voice and we're going to jump back in in a second to the next five tips all right give myself a little bit of a voice break and now I get to move on to tip number six text columns I'm really excited about this section for a couple of reasons first is that text columns can be used of course with paragraphs and text elements to create early attractive kind of editorial looks but you don't have to have just text so in this situation we created three columns with the text column technique and then we filled those columns with images by doing that we created this really fun masonry grid and masonry grids are I think they're named after kind of like that brick laying pattern were the where two bricks meet is kind of like in the middle of the adjoining brick but anyways places or websites like Pinterest kind of like made the masonry grid really popular and for a reason it looks really attractive and it kind of helps you to scan the images in a different way but anyways we created this mixture new grid or I did I should say with text columns so let's let's dig in until they could actually see how this works so if I go to the masonry grandparent here and you can scroll down to the typography section this column I don't we would call this field is where I created the columns so I just get rid of that by entering and 3 I've created our columns and you'll notice that the spacing is a little off between the elements that's because if I click the expand menu I can go ahead and set the gap between the elements I think that was probably like 20 pixels just kind of automatically you can even add lines in between your columns and give them a color all that stuff but just with those two styles I was able to create this really attractive masonry grid the reason I think it's a good tip for responsiveness is because it's not really easy to make a change to this mystery grid in tablet so maybe I think actually it looks pretty decent here but maybe in landscape mode it's starting to get a little too close together the images are too small no problem so just by adding to here instead of three I can switch to a two column layout but it's still retaining that spacing I think I would maybe adjust this a little bit so that I try to get a more vertical photo here to give me that masonry grid look but I just got one change it makes it super easy to have a responsive layout and it still looks good on on mobile all right so that's text columns next up is the max width technique and what this has to do is with how you cause line breakages on website so so here in this example I don't want this paragraph to or this headline to span the entire width of the container when it's this long it just doesn't look very attractive and it's hard to read I think I read somewhere that the ideal max width for a line is like 80 characters this is probably less than that but since it's quite a big headline it's just a little bit difficult to read when we break it up it's easier for the eye to digest the sentence so one way to do that is by clicking here deleting the space and hitting Enter and what that does is if you kind of read down here it's creating this HD HTML element called a break now that's fine it looks great on here but if I keep going down to what is this called landscape mobile you'll notice that all of a sudden this looks really weird there's this unnatural line break and that's because right after this comma there's that br tag so so when you do that artificial line break it tends to create unnatural line breaks on mobile and this is not very attractive so another option instead of doing that is to use max-width alright so let's do max width we'll just do like X all right and what I can do is here under max width I can add something like let's start off with 500 pixels oh by the way you have to make sure that this is set to auto margin on both sides so it's in the middle and we're just gonna kind of like key this up one a little bit of time until we get to that place where we've created our line break and that looks pretty good I might go just a little bit more just to make sure and let's change this to 600 already exists really we'll just leave it in X anyways now when I go to that landscape mode there's a more natural line break and it's easier to read and it looks good all right so that's max width next up is background images all right this one's pretty key links are all key anyways there's two types of images that you can use on a website one is when you use the image element and in the HTML you get that image tag and another is to use background images and the way that works is that instead of being an HTML element itself it's actually the background image is being referenced in a CSS class and it's just referencing the image asset in your assets folder and there's a pretty big difference between those two but and there's some drawbacks to each but what the background image lets us do is it lets us change the dimensions of this image to whatever we want whereas when you add when you add an image element you kind of stuck with the image ratio that you imported it as alright so what does that mean so let's look at this in real time this I named this 3/4 image and that's because it's a 3/4 ratio and you'll notice that I gave it a width of 100% to take up this width right here I give it a height of zero pixels a kind of interesting and I gave it a padding of 133 points 33% that's what gives me that 3/4 ratio but I can change that up so let's say instead of 133 I wanted to have a 2:3 ratio I believe that 75% so that is now a 3:2 ratio a little bit more of a classic thumbnail or let's say I wanted to have that like cinematic look I can give it that 50 6.25% ratio and now it's got more of a 16 by 9 but that's the beauty of background images is that I can kind of give this whatever ratio I want and it looks good okay so how does that how does it impact responsiveness so so here I've got this same let that we have above with the two column layout and so I'm gonna go ahead and give this a combo class and we'll do a background image layout and I'm gonna switch from horizontal to vertical whoops I wanna do that on mobile or tablet I guess I should say I want to switch from horizontal to vertical I want to align to the left and I want to go and give this 30 pixels of padding the other thing is this width 33 its constraining this to 33 percent I'm just going to make that 100 now the issue here is that well it's an attractive image it's just too tall so if I'm scrolling on an iPad or on landscape mode I'm like seeing a lot of image before I get to what this text is about so to make this a little more responsive friendly I need this image to be a more landscape ratio it's what I can do is what we did previously I can change this to 75% and now it's more of a landscape orientation and it's more likely that on tablet I would see the image and the text all at the same time I've been the same window and it just looks a little bit more attractive of a layout all right so that's the power of background images and just FYI in order to make sure that the images suffer is responsive I changed it to size cover so that it's always as small as possible while covering up the container and the position is set to middle and do not tile that's background images all right next up is landscape declarations and essentially what this section means is that I guess let me back up and say CSS stands for what does it stand for cascading style sheets I lost it for a second all right so what that means is that things cascade from the topmost element down to its children and it cascades from in the case of web flow from desktop down to portrait mode mobile and so what we want to do is whenever we make a change we want to make sure that it's at the highest level possible so that we don't have to set styles multiple times for different devices all right so in this section we've got we've got this like blog layout where there's four thumbnails and here in tablet it's starting to look pretty scrunched and so here on table I probably want to go ahead and switch to two and then on mobile I probably want to switch to one so what I can do is I can add another row in tablet mode get my blog wrapper and scoot it over here and get rid of my last two columns all right so so with CSS grid we've been able to make a change that makes this really look good on tablet now again on mobile we probably want to switch to using a one column layout so I could be tempted to see here it looks way too scrunched I could be tempted to make this change directly here but I probably don't want to do that I probably want to go ahead into landscape mode and make the change in landscape so that everything looks good in both landscape and mobile so I want to add two more rows and then bring in my wrappers alright let's delete this row or column I guess I should say all right so now this is gonna look nice and big and attractive on landscape and it cascades down to mobile as well mobile portrait I should say so that it's gonna look good on portrait as well all right so that is kind of like the essence of just trying to style things at the highest level possible so that you prevent double work and then the last section is ephemeral units or MS so if I scroll up to I think it was maybe the second section yeah we've got proportional units here and M's and REMS are one of them ephemeral unit stands for MS and I have found that using M's is a little bit of a better idea when it comes to styling your typography so where the M's work is that if I go to my body tag go to body all pages you'll notice that in the typography section I made some style choices and perhaps most important of all I set the font size to 17 pixels so this is like the one place where you have to set a hard pixel amount but since I set my body font size to 17 pixels that means that anytime I add a new M unit it's referencing this 17 pixels size of my body tag so for instance if I go to heading 2 all h3 headings you'll notice that I set this to 2.1 5ms so in other words it's 17 times 2.15 that's probably close to 32 or something like that 32 pixels and not only that but my line height is an M so when I set the M's here for my h2 it's saying it's 1.25 x 2.15 so you see how it's kind of like proportional it's kind of like building off of that 117 pixel size of for my body here's where it becomes kind of brilliant is just with one change I can change the typography across my entire site alright so I'm here in tablet mode if I go to body let's say I just want the font size to be a little bit bigger in tablet mode I can go to body all pages and from 17 just switched to 18 you'll notice right away that the all of the typography on the whole website why not by a little bit the headline went up this over line went up the paragraph obviously went up and even my drop cap here line up alright and then let's say in landscape mode I want to be even bigger because I want it to be nice and big for people to read I can move up to 19 and it's gonna size of all of the typography across the entire site what's that one change so let me go back to desktop mode so it's kind of up to you about why I guess you'd say let me back up and say that in order to use m's properly you have to make sure that your body size uses a hard pixel like font size like 17 pixels but then everything else on your font size you have to use the EM unit and that way it's referencing that body size and your website will respond to any changes you make in the body size all right if you want to go even further you can do changes like for example this 20 pixels below this headline I could make that I could make that an EM unit as well so I could say oh I want this to be 1.25 MS as opposed to as opposed to a 20 pixel amount it's almost there it's kind of close and then as I change the body font size it's gonna increase it's going to increase that space in relationship to the body font size as well so everything is kind of like proportional to itself so I just saw a really interesting way to build in some responsiveness to your website all right and that's the last of our 10 tips I hope this was helpful to you I'm gonna go ahead and post I'm gonna finish making this site responsive and post a link to it in the comments I'll also include a link to the the web flow link so that you can actually look in the designer to see how things were created and you can even use these little anchor links or these up here to move around and just kind of like get yourself familiar with all of these tips if you found this video to be helpful I hope you would consider subscribing and hitting the bow so you get notified of future videos the next video I'm gonna release is a making of how I created this website it's microsite so you'll kind of see behind the scenes of how I created all of this and it's gonna be a longer video like an hour and a half or so but I do really fun stuff like using CSS grid to create this and some other neat stuff so thank ya so much for sticking with me and I hope I catch you soon bye

Channel: Jose Ocando

Views: 28,075

Keywords: webflow, tutorial, web development, responsive website, flexbox, web developer, reponsiveness, responsive, website, development, developer

Id: caFn_vpc7EA

Length: 29min 9sec (1749 seconds)

Published: Mon Jan 21 2019