Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:27Length:3 hours
Crs 107011
  • Overview
  • Transcript

2.7 Introduction to Responsive Web Design

Hi, welcome to lesson number seven, where I'll talk about responsive web design. So what is a responsive website? It's simple. It's a website that adapts or responds to the device its being viewed on. Either it's desktop, a tablet, a mobile phone, et cetera. By creating a responsive website, you make sure that website will look good no matter what device is being used. So, for example, on a desktop, you'll display the website fully. On a mobile phone, though, since you're dealing with a very small screen, you might want to hide the navigation, center the content, make the font size bigger, and so on. It depends from site to site. So let me give you an example of a responsive website. It's the Envato website. This is the desktop version. You can see there is content organized in columns. We have a slider here. We have a navigation on the top. So watch what happens when I start shrinking, see? There was a little difference there. The menu just got a bit smaller. The logo got a bit smaller, as well. And the overall text got a bit smaller. That's called a break point. It's a place, it's a, a size where things start to change. And these break points usually refer to the various devices. So, for example, a tablet will usually have a viewport size of about 780 pixels. So, at 780 pixels, we have a break point. We start changing how different things look like, just like it happened here. If I go down even further, [BLANK_AUDIO] yeah. Here, it's another break point. Now, the navigation completely disappeared, we don't have any more columns. As you can see, the content is now a single column. So the navigation is now being hidden, and you can show it by clicking this button. This is also good for mobile devices, because it's very touch friendly. You can tap this button, show the navigation. The slider that we saw in the full version also works here. It has these bullets on the bottom. As I said, there are no more columns. The three columns are now just three separate blocks of information. And the stuff at the bottom, which was basically four columns, Explore, Social, Engage, and Quick Links are now similar to the navigation on top. So click them and it shows you the sub-links. Okay, going down even further, and this is probably around 480 pixels in width, I think. You can see the smallest version of the website, which is basically a mobile version. It's something you would do on your mobile phone. Yeah, and this is how it looks like. And let's take let's take a look at some of the other pages, like Careers, for example. Yeah, notice we have another menu here. So, if I bring it down, we can see how the menu looks like. [BLANK_AUDIO] So that's what a responsive website is, basically. And I guess the point I'm trying to make with this lesson is, always account for other devices when building a website. Now, I'll go into more detail on how to actually make a website responsive in the exercise part of the course, which is actually coming up next.

Back to the top
Continue watching with Elements