[Newbie Guide] Responsive Design Crash Course For Oxygen

hey this is elijah with the oxygen team and in this video we're going to do a sort of responsive design crash course for folks that are new to oxygen or new to responsive design in general now responsive design most people are somewhat familiar with it just means that our website adapts to the viewport with so depending on which device users are using to visit the website the website should adapt and layout appropriately to make sure the experience is good for the users now oxygen makes this incredibly easy to do and it's actually one of the first things that drew me to oxygen as a user back in 2016-2017 when i started using it we'll get into some of those tools but first i want to show you what the problem is with a site that's been built maybe without considering too much how the design will flow down to smaller viewport widths now one of the first ways to check for responsive problems on a site is to go to the front end of the site in chrome open up dev tools you can just right click click inspect and that will bring devtools up at the bottom and then click this little toggle device toolbar button and when you click it it'll give you this frame around the viewport that allows you to resize now this is usually my first stop for trying to identify responsive problems on a site but it's definitely not the only thing to do but let's start here and go down and just see what kind of issues we have as this site gets smaller so i'm seeing this image kind of squishes in from the left and right and becomes skewed a little bit we don't want that as we go down we're going to see that this heading is probably way too large on a smaller viewport yeah and i usually will jump to the smallest viewport reasonable which is somewhere between 320 pixels and 400 pixels and look for issues there to see kind of what the worst case scenario is and see this image is kind of getting squished and if we go down this obviously isn't right and if you look we have a scroll bar so this is going to provide you a quick look at issues you have with your layout on smaller viewport widths now one thing i found is pretty important to identify the most issues possible is to actually use the responsive drop down up here to choose a device as well so in this case we can choose like iphone five slash se and see we see a bit of a different issue here even though it's still caused by the same thing we have this white gap instead of a scroll bar so by using the device previews you're gonna get a better look again this is the first stop if you really want to know what issues are going to be present on mobile devices it's important first to test on an actual mobile device i used to keep an iphone that was one of the really small older ones because if things looked good on that then i knew they'd look good on newer devices but if you don't have a physical device to use to test you can use something like browser stack or lambda test both offer the ability to preview websites on real devices so here we can choose android ios windows mac we'll go to ios we'll choose the iphone 12 pro and we'll choose the safari browser so this is going to tell us what the website actually looks like on safari on ios which is super important because sometimes the mobile versions of the browsers are going to have different issues than the browsers will on a desktop operating system even if you size the viewport down so i'm just going to paste in this tunnel link so that we can see and here we see a very similar issue to what we saw when we previewed with the specific device in chrome's dev tools so you can see that that's that's a very helpful kind of first stop to see what kind of issues you're going to run into so since we have similar issues on the chrome dev tools preview we're going to get rid of browser stack for now but again i do recommend using a service like browser stack or lambda test in order to preview across multiple real-world devices because those aren't just emulators they're actually firing up real devices and showing you what you would see if you were using that device so we'll go back here to chrome dev tools and just scale down and we'll start fixing these problems now that we know how to see the issues the next step is how do we solve them so let's go into oxygen and get started now it's important to understand in oxygen how responsive design works the main tool you have at your disposal in oxygen is the viewport drop down over here on the left side in the properties pane this allows you to view your design at the break points that are available in oxygen and the important part to remember is that when you have a break point selected let's say i choose less than 992 pixels and i have this section selected and i make a change in the properties pane we'll just make it this terrible red color that actually has been saved in the css in a media query that means that red background color only appears at less than 992 pixels and we can see this if we go back up to all devices it's white again let's save and go up to the front end and as we change our viewport let's see here that was 990 less than 992 pixels so as we go down we're going to see that change kick in at that break point that we had selected so we're at 992 and of course the break point was less than 992 which means it kicks in at 991 pixels let's go down by one pixel and you can see now that the background is red so that is a fundamental aspect of designing responsively in oxygen and as long as you remember that it's very very easy to make the changes that are needed in your design so to clear out a change that you've made on a breakpoint you can just go ahead and click the x button on that breakpoint and that'll clear it out now let's go back to all devices and let's just get started with some global changes that will make responsive styling a lot easier so one of the main things we can do to make our lives easier as we're designing responsively is we can go into manage settings global styles and we can make adjustments to our body text and heading font sizes so as you can see here we have the h1 set to 96 pixels and if you look on the front end as we narrow the viewport down that h1 is way too big now there are a couple of ways to address this one is to use a special css function called clamp which we can do by clicking the little pixel icon clicking none and then we can type our clamp function in so it'd be something like clamp and then we can set like a minimum value so like 22 pixels that's the smallest we ever want it to be a scaling value so something like 9 viewport width and then a maximum value which would be 96 pixels so now you can see that we have our heading back to a pretty big size but if we save that in preview on the front end you'll see that it scales with our viewport now clamp is super cool and it has a lot of great features in that you can set a minimum and a maximum size so i really like it for that but they're always considerations and always multiple ways to do these things when you're looking at css and one of the other ways that i've found that i like to handle my headings is by using rem values so rem is a value based on the font size of the html element and all you really need to know is that that font size by default is 16 pixels so one rim will equal 16 pixels unless you've changed the font size of the html element and then it'll equal whatever the font size is that you've set so if we do something like one rim so we'll click our little unit icon and choose rem instead this time we now have a 16 pixel heading but we want it to be a bunch bigger and previously it was 96 pixels so we want to find a rem value that's close to that so we'll do six ram which will get us back up to about the size that we had and then similarly we'll go down here and do 4 rim for the h2s and of course we we still have pixel selected so make sure that you click that pixel icon and choose rem and then that actually is a little bit bigger than we probably want so we'll try something like 3.75 and then down here this is going to be something like 2 rem and so on and so forth and we can switch all of the headings to use rem values but since we're only using h1 through h3 on this page we won't do all of those now the nice thing about rem is because it's based on the font size of the html element and because oxygen makes it so easy to adjust element properties at specific breakpoints we can easily cause these headings to scale down as the viewport narrows in size so what we need to do is we need to go to manage selectors and we're going to add an html selector this will allow us to set the font size on this element so it's 16 pixels by default and we don't want to change that we like that for all devices but let's say down at 992 pixels we want to drop the size of all our headings a little bit we can go to advanced typography and we can change the font size if we put it at 16 everything's going to stay the same but if we drop it down to something like 12 we will see on the front end that our headings will adapt so again we're at the less than 992 pixel break point so if we go down to 992 on the width and then just go down one more pixel you'll see all of our headings suddenly change and we didn't have to make adjustments for each individual heading that's really the beauty of rem is we can change one value and that's the font size of the html element and all the properties that use rem not just font sizes will adapt since they're just a multiplier for the html font size so that looks pretty good but we might want to go one step further and go down to our smallest break point and set our html font size to something like 10 pixels now let's save that and go to the front end and we'll just look at what that looks like when we get down to that break point so let's go on down and almost there and there's the change so let's go back up so we can see the change occur and that looks pretty good and then of course we always want to test at a fairly small width so that looks pretty good but another thing we can use rem on is the spacings in our sections you see we have a bit of excessive white space here and that's because while that amount of space on a desktop device looks pretty good on a narrower viewport with that vertical space can seem like a bit too much so we can go over here and adjust our section spacing as well and we don't need to make any more changes to our html element unless we aren't happy with the sizes we're getting out of our rem units but i think what we have is good for now so we're going to go back to manage settings and go back into global styles and we're going to sections and columns and we're going to change these values to use ram as well now this is going to look really crazy at first when we swap it out because we're at 75 rim which is just a ton instead we want to use four rim and then on the left and right side we can use something like two rim so let's just make that adjustment here four on the bottom and then we can do the same thing with columns so we're going to do rem for the columns and we'll do one rim on all sides for column padding you can see things jumping around that's just because we have a high pixel value in there uh that is kind of a crazy amount of rems to use so it looks a little crazy until we switch it to the appropriate value so now if we look on the front end our white space should make a little bit more sense for our mobile device so as you can see we don't have as much of a gap above and below our sections so my recommendation is to either if you're more advanced with css then use clamp uh of course you need to research the trade-offs because with any method you choose to use there can be ramifications as far as accessibility and other things so really make sure that clamp fits your needs and doesn't have any negative trade-offs that you personally are concerned about but for me the simplest way to make sure things scale is to use rem and by using rem from the very beginning and setting up your global styles using rem you're going to have a much easier time scaling everything down to narrower viewports and one final adjustment i do want to make here is to the body text which is 16 pixels by default we're going to switch that to one ram so that it also scales now this can present a bit of a problem with rim because with rem there's no way to set a minimum font size unlike with clamp where we can tell it only go down to say 16 or 22 pixels or 14 or whatever that may be ram is just a multiplier of the html font size so our body text now is going to be 10 pixels on mobile devices which is just way too small so what i like to do here in this case is to create a class that kind of sets our text to a higher rem value at a certain break point so if we look up here it's probably fine it's fine here it's fine on desktops it gets a little small at the 992 or 991 pixel breakpoint so maybe that's where we make our adjustment so if we look here at our text element we're going to add something like we'll just call it font size minimum and then all we need to do really is select our 992 pixel less than 992 pixel breakpoint and change our font size ram value to something a bit higher like two so that may be a bit much but let's just look a little bit okay that doesn't look too bad it's going to get a little bit bigger which i personally don't mind slightly larger body font sizes on mobile devices since the screens are a bit smaller makes it easier to read and that does look pretty good as it scales down but i think it's a bit big here between our smallest breakpoint and our less than 992 pixel breakpoint so i think two is a bit much let's try 1.5 that looks quite a bit better and then we'll choose our less than 480 break point and there we'll go to 2 which means it'll be 20 pixels so this looks much better we go down it gets a little bit bigger and then on mobile devices it maintains a really good size so that looks pretty good and i think that's all the things that we want to tweak with rem but what we do want to do is we want to add this class to all of our text elements so font size minimum there and font size minimum there now if you're good with css a more efficient way to do this would be to add a style sheet with some settings that adjust the font size as the viewport narrows using media queries and we can take a quick look at that because i do think that that's probably a bit more efficient if you have a very big or complicated site so instead of our class we can then go into manage style sheets add a style sheet and we'll call this body bond size and we can do some rules so media max with 991 pixels so we're essentially going to do the same thing we did with the class but we're just doing it in css instead let's switch the editor theme so this is a bit more visible and we're going to do body p and that means we're going to affect any paragraph elements within the body and we're going to do font size 1.5 rem and then we need one more media query media max width 479 pixels body p font size to rem now we can actually take that class away even though we just went through and added it we can take this away and see what the result is on the front end so i've removed the class that we just added to all of these text elements and again if you're doing a really simple like landing page the class is fine and it's easy to add but the style sheet is going to actually take care of this scaling problem on a more universal level so it should also adjust the font sizes of text from the wordpress editor for instance which will be really handy so let's refresh and let's inspect to see responsively what's happening and we should see that our font size is now going to adjust as we get smaller and not get too little so it does literally the same exact thing that the class we created did but it does it on a more universal level which is just much more efficient you can see the class isn't there and if we look at computed our font size is now coming from that special css rule those media queries that we just set up in the style sheet so if you have a blog or something and you're using the rem approach for body font size this would be the way i recommend to make the adjustments as the viewport scales down so finally moving on from rem let's take a look at some of the other issues that we have on the page and how to fix them so our font sizes are now adjusting properly and if it were me i would probably tweak the bottom padding on this top section so let's just jump in and do that so here it's a bit close let's say at less than 768 we want to add some more padding on the bottom of this section so we can click and drag the padding or we can go to advanced size and spacing and just adjust the padding up a bit so we could go to something like 6 rim and that's going to give us a little more breathing room below that heading on mobile devices the adjustment is pretty subtle but it does make a difference if we want more we can of course change that to something like eight rim and just keep tweaking it until it looks right and you'll notice that that change does not impact our desktop site again oxygen saves those responsive changes to specific media queries so that it only affects that device width and below so that looks pretty good now let's go up and take a look at what else we might want to adjust so here we have these images that have a couple of problems first i'd like this image to be above my text content and it's not so how do we fix that so first we want to see when it's dropping below the text content it looks like it's at the less than 992 pixel break point so that's where we need to kick in our changes but we also have another problem with this image it's not scaling properly you can see it's kind of getting squished and it doesn't look right when the viewport narrows that's a common issue caused by setting explicit dimensions on images that's something you generally want to avoid besides setting a width you almost never want to set a height on an image so if i were to guess that's probably what's happened here so let's go back up to all devices this is one of those changes that we can make on all devices and then we don't have to make adjustments on smaller viewport widths because we're just using wise choices from the beginning here you can see this image has a height set so let's just clear the height because the image is going to go ahead and scale appropriately and maintain that aspect ratio as long as we haven't set the height explicitly so let's refresh here and instantly that is better it's now going to scale much much better and it will never get squished but we have an issue with the image down here as well so we'll need to make an adjustment there so let's scroll down to this image and same problem there it had a height set in pixel values so save that and jump up to the front end and scroll on down and now this one looks much better too so we just fixed those images now we need to fix the problem we have where this image is below our text content and we don't want it down there we want it at the top just like it is for this second section down there so how do we fix that luckily oxygen's columns element makes this super easy and this is in fact in a columns element so we're going to select the columns element itself it's set to stack the columns vertically at less than 992 pixels which is fine that's what we want but we also want it to reverse the column order at less than 992 pixels so let's save that and jump up to the front end and refresh and you'll see immediately we have the layout we want so we're getting much much closer on this layout we've solved a lot of problems already but we still have kind of a major one and that is this situation here this little interstitial information section has shot right out of the bounds of our viewport and is causing problems so how do we fix this if we go back to responsive we can see that we have this scroll bar how do we fix this problem a lot of times this will manifest as your site looking like this with a white gap which we saw earlier so if you see this white gap a lot of times you'll see the element that's overflowing and you can fix it but if you're not sure which element is overflowing there's an easy trick to figure that out so we can go into chrome dev tools and we're going to click this little plus icon on the styles pane and this creates a new style rule and we're going to create a style rule with body and star which means it's going to select everything within the body then we want to add a border one pixel solid red to everything now you can see the boundaries of all of the elements and you can kind of scroll down on this white gap and assuming this element let's say it had a white background for some reason it might be hard to see that that was the overflowing element but with the border it's easy to see that it's the one causing the problem so now that we know that's the problem child here we can go back into oxygen and correct the issue 99 of the time when you have a white gap or an overflow issue where it's causing a horizontal scroll bar it's because a width has been set on an element in pixels rather than like a percentage or something that would scale so since we know this is the element that has a problem we can click it and immediately we can see the width is set to 768 pixels now the problem is we want this thing to be 768 pixels so how do we achieve that without the scroll bar or the white gap well we can do a little bit more finesse over here under advanced size and spacing what we want to do is set a max width of 768 pixels and then set the width to a scaling value like a hundred percent you can see it looks identical but what's going to happen is if we go to the front end let's make this big again so that we can scale down for maximum effect refresh let's fix our zoom here and then as we scale down that div is going to be 768 pixels wide until the viewport makes it so it can't be anymore and then the div scales so now you can see we no longer have a horizontal scroll bar or a white gap problem so the key point here is just avoid using static pixel values for element widths and you will likely never run into the overflow problem that we just saw so now let's move on and see what other issues our page has looks like the final problem is this gallery here this is an oxygen gallery element but the oxygen gallery element isn't super responsive with the default layout that it has when you first insert it luckily oxygen has css grid now so that's super easy to fix so let's jump into the oxygen visual editor and let's select our gallery element and what we're going to do is go to layout and choose grid we're going to choose set image fit to cover so everything's about the same size and now instead of setting a column count we're going to set auto fit columns this is going to allow our grid cells to intelligently collapse down to the next row when the viewport width is too narrow to accommodate that cell on the row it was in previously so we can adjust how many images are shown per row by adjusting the minimum width value and as we scale this up or down we're going to see at some point it kind of kicks in and makes a change but for this we actually like the three column layout so with just a couple of clicks we can go back to the front end and see what the effect is so as we scale the viewport down instead of getting really really tiny it's actually going to adapt to the viewport with and as it goes down again it's going to jump over to a full width layout so with css grid it makes it super easy to use autofit columns and this min width value to make your gallery responsive without a whole lot of work so let's just refresh this page and we'll just scroll through again to see what it looks like now before we had a way too big heading that's been solved our spacing up here on this top section is much better our images are no longer getting squished our headings are all scaling our body text is scaling this interstitial information section is no longer causing overflow the same image fix for this image to keep it from getting squished and then our gallery is adapting dynamically as the viewport scales down so this is obviously a fairly simple example but it gives me an opportunity to show you most of the tools that are available for you to use to design your oxygen sites responsively and if you are able to master the way that oxygen uses its break points and master units like rim and master things like clamp eventually if you want to delve into that then designing responsive sites in oxygen is incredibly trivial especially if you lay the groundwork early in the global styles and settings so again this is elijah with the oxygen team and that is a responsive design crash course for oxygen thank you very much for watching

Channel: Oxygen

Views: 8,228

Keywords: Oxygen, Oxygen Builder, Responsive, Responsive Design, Page Builder, Site Builder, Mobile Design

Id: gCFzYM4aTwg

Length: 28min 39sec (1719 seconds)

Published: Sun May 30 2021