FREELessons: 17Length: 2.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Dealing With Displays

With devices from smart watches up to giant TVs, resolutions from 122px wide up to 7680px, plus viewport and physical sizes anywhere in between, there’s a lot to think about. Learn how to make your sites fit every size like a glove.

3.5 Dealing With Displays

Hello and welcome back to Bombproof Web Design. In this lesson you're going to learn how to deal with all the different aspects of user display. So there is a lot of different things to think about. As a part of user display, there are four key aspects to consider. One is the resolution of the display. The second is the pixel density of the display, how many pixels per inch. The third is the viewport size, the amount of space in the screen itself that your site has to take up. And the fourth is the physical size of the display. Right now, there are a million different resolutions that a device might be working with. And on top of that, one resolution could have a completely different physical size, depending on the pixel density of the device, and the physical size of the device. So for example, a 1920 by 1080 resolution, could be something that appears on a 5 inch smart phone, or it could be something that appears on 65 inch smart television. We're back at Google Analytics here to have another look at the statistics for the same website that I took you through earlier. I just want to show you how many different resolutions there are, even on just this one website. So, we have the two most popular resolutions here which are probably resolutions that you'll recognize and be familiar with but if you page through, you'll see that there's quite a lot of variance. We have smaller devices that are just 320 pixels wide. We have larger devices that are 2048 pixels wide. We even have very small devices at 122 by 133 which is most likely a smartwatch. And smartwatches are only a couple of centimeters wide. So there is a massive variance in the resolution and the screen sizes that you have to deal with now when you're creating your websites. Now you probably don't have to worry too much right now about smartwatches and about massive televisions because it's still a relatively small edge case, and most smartwatches are not equipped to allow direct internet browsing. So, they're more designed to have smartwatch optimized apps running on them. However, there are web browsers that are designed to run on smartwatches that people may well be accessing your site through. And there are people using very large televisions to access your site. So what this all boils down to Is kind of counterintuitive. The best way to deal with all of these different resolutions and screen sizes and device sizes is actually to deal with none of them at all. Now what I mean by that is all of your sites should be completely flexible and completely adaptable and they should basically be device agnostic. So that means they're not designed to work with devices x, y, and z. They're designed to work with all devices, they're designed to fit any screen size, no matter how small, or how large. You've already gone a long way towards enabling that just by working with the approach to base font size that we covered in the last video. So that means that any site you create that way, say for example, somebody is browsing that on a smartwatch they're going to be able to shrink down your font size, and your whole site will shrink down with it. So it will fit much, much better on that tiny little screen than an average website will. And the same thing goes for a television. If you allow your site to be boosted up many people that are browsing on televisions, have the default font size set up to the very large setting. And they also have, the browser zoomed in by default. Because your websites will be fully flexible and fully scalable, they will fill up that screen and instantly become readable right off the bat. So you've already taken care of most of what you need to take care of to allow for completely display and devise agnostic layouts. There are just a few more things that you will need to incorporate, and that's what you're going to learn how to do in this lesson. There are two main aspects to creating these display agnostic layouts. The first is that every single aspect of your layout should have a fully flexible width. So it should never be fixed. The second aspect is using media queries to adjust the layout on increasingly small screens. In this simple layout here we have a basic demonstration of width flexible layout elements. If I shrink this window you'll see that both of the columns start to shrink along with the window. There are a few components to this particular layout. We will just inspect the code so you can see them. Around the whole layout we have a wrapper. Within that we have a main area and to the side we have a sidebar. This is the style list that we are using to control the layout of all of those elements. The base level of that flexible width functionality comes from that wrapper element. And we're able to use just a couple of lines of code and enable the entire site to be flexible in width and yet still have a maximum size so that you don't end up with a layout that becomes too large and therefore unwieldy and difficult to read. The way that you do that is rather than setting an explicit width value, you always set your width to be 100% and as well as that width value of 100%, you also use the max width value to determine the biggest possible size for your layout. To help you understand how this works, I'm just going to comment out the max width for a second. Now with the maximum width property removed, you can see the site just fills up flush to the edges. But because it's set to be 100% wide. It's set to be 100% of the available viewport space. It will completely stretch, and shrink to fit. Now to show you the opposite effect. Let's see what happens when we reduce the size of this overall wrapper width. And we're not changing the actual width value, we're just changing the maximum width value. And now you can see the overall layout is much smaller and yet it will still collapse. So this gives you the basis of your flexible layout approach. Then within that layout, within that flexible wrapper, you wanna use only percentage based values. Our content area is set to be 64% width. With a gap to the right of 2% width. And our sidebar is set to be 34% width. Now because these layout elements are set to be a percentage width of their parent, they, too, will always stretch and shrink to go along with the available space in the viewport. Now once you have your layout set up to use this flexible width approach, the next thing you have to do is factor in some media queries to change up the layout as required for different widths. As you can see, when I start to shrink this design down at a certain point it starts to look a little bit funny. We have not enough words per line to be readable and we have to much space around the inside of these elements and there's really not much good in there being two separate columns with this amount of available space. So what you want to do is use media queries to start to adjust these elements. There's no hard and fast rules for exactly how you should collapse a site down for different widths. Every layout is different. Every layout has different typography. It has different columns, and it has different requirements. So, what you would need to do for each project is something that you have to determine on a case by case basis. And, to a degree, there's going to be just some trial and error. For example, we can gradually shrink this down and just determine at what point we think it starts to look a bit funny. Now, I think around about here is where we have more padding in these internal boxes than we really need. So I'm going to use the inspector to have a look at how wide the space is at this point And all up we've got about 840 pixels worth of width here, so that's where we're going to put our first media query in. Every media query that you use in a site is referred to as a breakpoint. Now I like to think of that term as being something literal. That you use a breakpoint at the point at which your layout breaks. So use your eye and your judgment to determine at what various points does your design break? Then create your media queries at that point, and adjust the layout as best you can. We're back in our stylus code now, and what I'm doing here is creating a little string that will include our media query, and I'm saving that against a variable. The reason I'm doing this rather than just typing out a media query in the usual way is this allows us to generate REM based media queries using the pixel variable that we covered in a previous video. We saw that about 840 pixels was where our design reached its first point of being too cramped. So we are figuring out a REM value by multiplying it with our pixel variable and then this whole media query string is being saved against this variable, query 1. Now, all we have to do is enter in a little bit of code that will reduce the amount of padding on those internal boxes. The class that contains the padding is this panel class here. So we will add that in. We will also grab a copy of the existing padding code, and add that in. Now we'll reduce the amount of padding that's being applied to 1.5 ems. Now when we save this out, we should see that as we shrink the design down, when it gets to a point that's below our breakpoint, the amount of padding should reduce. So we'll shrink down the window and watch the padding closely. And there you go. You can see that transition when we reach a certain point. Now that's probably a little bit too small an amount of padding, so as you put these breakpoints in, you can make additional tweaks. The main areas that you'll want to adjust are the padding, the margin, the number of columns, and the heading size. Back in our stylus, I've added two extra media queries. Query 2, and query 3. This second query collapses our two-column layout down into a single column. Rather than the width of each column being 64% and 34%, both columns are now set to be 100% width. And instead of floating to the left, both have now been set to float none. And because we have to have a gap in between the columns before, which we achieved by setting a right margin, we've set that margin down to 0. And we've also added an extra margin, below the content area, so that there would be a vertical gap between the two. Now, as you shrink down, when you reach that breakpoint, you'll see it turn into one column. There you go. The third query fires off at around about 450 pixels of width or its equivalent and this query reduces the size of all the headings. Now I have a little function that I wrote that generates my heading tags for me. I call it once in my basic code and that just outputs all of my heading tags for me. And what it does is it also allows me to have all the heading tags output again at a specific fraction of the original size. So, if I want all of my heading tags to be reduced to 80% of their original size, then I just call my little H tags function with a value of 0.8 in-between the brackets. Now you'll get that function as part of your source code download. The effect of that function is you'll see as I decrease the width even further, watch this heading here and you'll see it decreased 80% of its original size. There you go. And you can use these techniques to continually adjust your text so it fits well on the page, to adjust your layout. And to make sure that no matter what sized display you're working with, it doesn't matter. You won't have to worry about 50 different resolutions or about pixel density or physical size, as long as you use these flexible principles. Next, you'll learn how to move beyond mouse based interaction and cater for the full range of today's input mechanisms.

Back to the top