Responsive Web Design Tutorial and Explanation

We’re going to be taking a look at responsive web design. A more technical name for this lesson might be an introduction to media queries. So, let’s dive right in we’ll begin with a question: what is responsive web design? It’s a term, that’s thrown around a lot. So, let’s clarify our terms. We’ll begin with a visual demonstration, so in front of you is a very simple web page.

It includes a header, a bit of content and a footer, so what is responsive web design? Well, let’s see it in action. If I start to make my browser window smaller, we can see that the columns begin to shrink a bit, but the layout isn’t changing. It’s still three columns here and two columns here. If I make my browser window a bit smaller, we see that now. This top section is only two columns and that if I go even smaller, it’s now single column, it’s only one column throughout the entire page, and this is a layout that is actually very well suited to smartphones, and this should look familiar.

This is a strategy that a lot of websites use if you view them on a smartphone. So what is responsive web design? It’s simply responding to the size of the browser window or the device with our code. Hence the name responsive. Now. The goal of responsive web design is to be able to create one website that looks great, both on large desktop monitors and small smartphones and everywhere in between it’s.

This notion that we can use responsive code to adapt and cater to the user’s device size. Now, I think one of the best ways to fully understand responsive web design is to look at a layout. That’s not responsive and try to make it responsive. So behind the scenes. I actually just went ahead and removed all of the responsive code from this layout and I hit the refresh button. So now, if I make the window smaller nothing changes, it stays three columns, no matter how small the window gets.

So this is emulating what a smartphone might look like, and this is simply unacceptable. These columns are too small. This needs to be single column, and this is what it would look like on a tablet about and that doesn’t look good either. So the remainder of this article is going to be recreating the responsive layout that you saw in the beginning of the article, and you are going to learn all of the code necessary to send conditional CSS to the browser at different times, depending on its size.

So, by the end of this article, you will have a firm grasp on how to create responsive, layouts and write all of the code necessary. So, let’s dive right in so this is the HTML that makes up the web page that we’ve been looking at in the browser. It’s a very simple page now a word of caution: if you’re not familiar with the basics of CSS or what CSS is I recommend reading some of my earlier articles on CSS, because all responsive web design is, is essentially conditional CSS, we want to send the web Browser different sets of CSS depending on the size of the viewport, so, for example, once the browser is smaller than say, 900 pixels, we simply want to send it different CSS instructions.

So, let’s write our first line of code in the head section of our website. We want to include a different style sheet at the appropriate time. We will name this new file, responsive, CSS and oops media equals screen and we’ll give it a max width of 900 pixels. So let’s go ahead and create this new file in our CSS folder new file, responsive CSS, okay and, let’s just say: color, oops, color, red okay.

So if I refresh the page and I make the window smaller than 900 pixels – we can see that now all the text is written now. Obviously that’s not. What we want to do is just a proof of concept, so let’s go back to our code, okay, so this line is really important. We’re just saying if this condition is met. Think of this almost like an if statement if this is met include this file. It’s that simple, so we’re off to the races.

Let’s begin writing code for when the browser reaches a certain size. So our first bit of business is to make this top section only two columns instead of three when the browser window is smaller than nine hundred pixels. So, let’s take a look at the code that makes up this current three column layout in the HTML. It’s nothing more than divs with a class of 1/3, see there’s one there’s another one and here’s another one.

Let’s take a look at the CSS, we’re saying, width of 30 % and float them to the left and give them margin right of 5 %. Now here’s where a little bit of arithmetic comes into play, we always want when we’re creating a column layout. We want it to add up to a hundred percent most of the time right so to create three columns. The width of each column is going to need to be approximately 33 %, but we want a bit of margin between each column and that’s where we make the number a bit smaller than 33 %.

And then we add a bit of margin. And then we tell the final column to have zero margin, so it adds up to a hundred percent. So let’s just tweak this a little bit in our new responsive file to get it to be two columns instead of three, so we will say div one. Third, no longer a width of 30, let’s go with 47 and a half percent. So if we refresh, we see that a change is taking place but something’s not quite right.

We need to tell the second div to no longer have any margin, so we’ll say div. One third second margin zero, and now we see that we’ve got the two column layout, let’s go ahead and go that extra mile and make this third column full width, because this looks a little bit odd. There’s this empty space. So all we need to do, there is just say, div one. Third last it targets that third column that used to be the third column.

Let’s go ahead and clear the floats above it we no longer want it to be floated we’ll make it a width of full width with Auto and then we’ll give it a bit of padding on the top. So it’s it’s a bit down from the other two. So now we can see that initially on a large screen, we have three columns. We get down to a certain size. Now two columns makes more sense and instead of having empty space, will make the final column fill up all of the available space.

Now, if you’re, following along or if you’re, going to pause this article or after the article write your own code, one thing I want to point out very quickly is in order to get your images to be flexible themselves. You need a little bit of code, so I’m targeting all images and then I’m saying give them a max width of a hundred percent and then make their height automatically proportionate to their width.

Okay. So without this, let’s take a look at how the layout just falls. Apart, so we can see that these images are quite large which allows them to be responsive, but without giving them a max width. The layout just completely breaks so add that code back in and that’s what allows the images you can see here. The image actually isn’t that wide, but once it breaks down and sits on the full column, it’s actually fairly wide.

So that’s what makes that possible? Is this little bit of code anyways, that’s just a side note moving on with the lesson now for our next bit of business, let’s focus on the smartphone size, so once we get down to the smartphone size, we want everything to be single column. We don’t want two columns here and down below. We don’t want two columns here. We want everything to be full width single column, so I already showed you one way to include conditional CSS by the head section of your HTML file and this code.

Here’s a second way in the actual CSS file in our responsive CSS. You can write media screen and max width, we’ll say: 500 pixels, okay, now any code that I place in between these curly brackets will only run at 500, pixels or smaller. So we can say something like div mobile collapse. Be full width with auto. Do not float so we want to create any columns and don’t have any margin to the right. So now, if I refresh, we can see that everything’s single column, once the browser is 500 pixels or smaller.

So we see we’re three okay, now we’re at two columns with the 900 threshold. Now, once we hit the 500 pixel threshold, we’re down to a single column now this is all made possible with some classes that we added to our HTML file earlier before this article. So this hide mobile class. Excuse me mobile collapse class. We simply add that to any element in the HTML that is floating, or that is a column at the traditional level, so that we can then target it in our responsive file.

So an alternative approach would be instead of saying mobile collapse. Here we could actually spell out every element that we wanted to targets because a div one-third, we could say div main div side. You could list out all of the elements that you no longer want it to be a certain width and floated, but with that one helper class, it makes things a lot easier. Now, along those same lines, let’s say: there’s certain content that we want to display at the large desktop level, but maybe it’s not vital.

So once we get down to something with less screen real estate like a smartphone, we don’t want to show it. So a good example: are these boxes in the bottom right hand corner? You can see this one says important content and these two yellow ones say not vital. So once we get down to a tablet level, we can still show them, but once we get down to a smartphone size, we let’s say for example, we want to hide these two boxes that say not vital, so in our HTML I’ve actually given those class those Elements a class of hide mobile now, obviously, in our main stylesheet there’s no corresponding code for elements with a class of hide mobile, but in our responsive file within the curly brackets of this 500 pixel threshold.

Let’s say: hide mobile display none! So now, if we refresh, we see that once we’re at the traditional smartphone size were no longer going to show those elements. So, with one class we can sort of create this layered approach that, if something’s not super important just say hide mobile, give it a class of high mobile, so our layouts already beginning to be a little bit responsive we’ve got three columns.

We’ve got this content that maybe is not so important by the time, we’re down to a smart phone, everything so no column or hiding certain content or making a lot of progress. Now, let’s take a look at the navigation of the site because, honestly, in my opinion, this doesn’t look great. I think we can do better. So, let’s take a look at the navigation at the traditional full width size. We can see that it’s just a collection of links sitting horizontally once we get down to about you know our 900 pixel threshold.

Things start to not look great, they break down onto two lines and the way that the borders are set up. It just doesn’t look good, however, it does look good at the full size. So let’s write a bit of new code targeting the 900 pixel size, so in our responsive file, create some new code here, say: navigation instead of just being free-flowing, we want you to have a width of 25 %, so you can fit four on the line.

No more no less, and if we refresh, we see that that already looks better in my opinion, but let’s give them a bit of border bottom as well, so they look clearly defined border bottom. One pixel solid will go with a little bit darker of a gray. So if we refresh, we see that now there are four on a line. They have bottom border just to show the difference without this code. It would look something like this and I think this looks a lot better.

However, what if the browser now gets a little bit smaller at some point, this isn’t going to work. We’re going to want to go three per row instead of four, so we’ll write a new bit of code, we’ll say: media screen’, max width, 620 pixels. We now want three per row instead of four, so if we refresh, we see that we’re at four Y in the navigation, the window gets a little bit smaller, now we’re down to three wide and then finally, let’s optimize it for the smartphone size.

So down in this 500 pixel thrush showed threshold in this curly bracket. Let’s say navigation give them a width of 50 %, so there’s only two per row and let’s actually make the font size a little bit smaller. So now, if I refresh the navigation, looks good even at a mobile level and now that the navigation is in place, I think our work is done. We have created a responsive web layout, let’s review at the desktop level.

We’ve got three columns, a simple navigation that sits on one line and then a section down here with two columns. Once we get down anywhere in the tablet range, we have a navigation that now sits on two lines with even widths. We have two columns in this main area. We have a simple two column layout at the bottom and finally, once we get down to something like a smart phone, we have a navigation that sits two per line and that the rest of the content sits on a single column and we’ll also remember hiding content.

That’s not vital, that’s a really important topic is screen. Real estate is very limited at the mobile level, and a huge part of responsive design is asking yourself what content is really vital in what content is not. Let’s optimize it for the mobile experience once a user’s browser is really small. So let’s now review the technical side of things, we learned that there are two primary ways of including conditional code.

The technical name for this is a media query, so the first method was in the head section of our HTML file. We simply supply a location to a file and then here’s our media query, we’re saying if the screen has a max width of 9 and rickson’s. So if it’s 900 or smaller include this code, the second way to include conditional, CSS or the second form of media query is to include code in your actual CSS file and just say media screen and then then the same conditions max width.

That’s really it now. Let’s talk about what we can learn in the future, the biggest idea that I want to stress and we’ll cover it in another lesson: is this notion of mobile first, so what we did today is actually desktop. First, we took a layout that was designed for a traditional web browser on a computer and we sort of retrofitted it to work on tablets and smartphones, and that approach is called desktop first or I guess you could just call it traditional responsive design.

However, different design agencies take different approaches and I’m not going to get into the politics of device trends and extrapolating trends and noticing that more traffic is actually going to be coming from mobile devices than desktops. I don’t want to get into all that in this article. I just want you to be aware of the fact that some design agencies take a mobile-first approach and basically, all that is doing is taking our responsive media queries and just flipping them on their head.

So it’s saying instead of our baseline Styles lying in Maine and then including code conditionally, to work on tablets and smartphones. Why not start at the other end of the spectrum? Why not start with mobile first and include all of our baseline styles at this level and then include the CSS needed to create two columns and three columns through media queries. So it’s basically taking this and just turning on its head and using min-width.

Instead of max width now, another notion to mobile first is to actually use JavaScript to go the extra mile. So, for example, remember this content some of its vital and then these two boxes are not vital in order to serve the smallest possible file size to mobile devices, because you want to conserve data on a smartphone, we could simply not include these non-vital boxes. We could just not include those in our markup just delete them and then use JavaScript and Ajax that detects if the screen is large enough, then to then load that content in on the fly so that that way, the initial HTML file as small as possible for Mobile devices – that’s totally outside the scope of this article and you can go as far with the mobile first approaches.

You want to go, but that’s getting more into market demographics and device trends. It’s completely outside the scope of this article. But the other thing we will cover in the future is using javascript and jQuery to enhance the navigation area for the smartphone’s. So, for example, this layout is actually rather poor for a smartphone, because the navigation area takes up way too high of a percentage of the screen space.

When a user first comes to your site, they might not even want to use your navigation, so it doesn’t need to take up half the screen. So what we can do with something like jQuery or another JavaScript library is hide the navigation initially and then include a menu icon, that smartphone users tap, and then we can show this navigation. So that’s something that we will look into in further articles, but just know that, with a bit of JavaScript, we can take our responsive layouts to the next level.

Just a quick note at the end, if you’ve ever viewed an older website on a smartphone or a smaller tablet, you might have noticed that by default the page starts out very zoomed out and you need to pinch zoom in to be able to read the text And to see the images clearly and obviously if we spent all this time and effort creating a responsive layout, we don’t want that to happen when we view this page with a smartphone, we don’t want it to look like this and for users.

You have to pinch zoom in to still see this exact three column layout. We want the smartphone to display this layout by default. Okay and all you need in order to tell the device to not zoom out and instead use a one-to-one pixel scaling ratio. Is this line of code? This line of code is basically telling the browser to make your viewport the width of the device. So this will create a one-to-one scaling ratio and that’s exactly what we want.

So then the devices will take advantage of our responsive code and it won’t create the situation where users need to pinch zoom to scale in. That’s a very quick note, but it’s very important so remember to always include this line if you’re creating a responsive layout and that’s actually going to conclude this article. Thank you for reading. I hope you feel like you, learn something and stay tuned for more web development.

Tutorials Thanks

Web Design
SEO Service
Google Citation Service
Contact us Today