Intro to HTML and CSS – Responsive Web Pages

Articles, Blog

Intro to HTML and CSS – Responsive Web Pages

Intro to HTML and CSS – Responsive Web Pages


We keep using this word responsiveness, but what are we actually talking about? People use many different devices to access the Internet. Everything from large desktops, to laptops, netbooks, or maybe even tablet’s or phones. In fact, more and more people every year are accessing the Internet primarily through their phones or through their tablet’s. In fact right now, there’s a pretty good chance that you’re watching this video on your phone or tablet. And every one of these devices uses a different size screen to show you the same content. But what do we mean by different size? Of course, we’re not talking about the physical size of the screen, the height and width of it. We’re talking about its resolution. Specifically, we want to talk about the resolution of the screen in pixels. Today, we commonly see desktop screens with widths of say, 1,440 pixels or 1,920 pixels. Some large screens today are even going as large as 2,560 pixels wide. But not too long ago, people were using screens that were only 1024 pixels wide or 1200 pixels wide. For screens like these, it was common to set max widths of 960 pixels meaning that web sites were only 960 pixels wide. The reason it wasn’t the full 1024 or 1200 was to actually leave room on the side of the screen for scroll bars. To this day creating content with the width of 960 pixels is still pretty common. On larger screens of 1920 pixels or 1440 pixels, you can simply center the 960 pixels wide content to make sure it still looks good. This max-width CSS style allows us to insure that our content won’t be any bigger than 960 pixels or whatever value we choose regardless of the size screen that we’re using. Following the principles of responsive design means that your website isn’t fixed with single size. It doesn’t matter the type of device. The page is going to respond and resize correctly to make sure everything looks great and is legible. It’s also important to note that for devices like tablet’s and phones users are using their thumbs, not a mouse, to manipulate the page. Which means that you may need to change your layout a bit further to make it easier to use. This is called adaptive design. For now though, we’re simply going to focus on responsiveness, which means simply changing the size of the page to fit. Let’s use the Reddit homepage to see an example of responsive design. Pay attention to his left column containing all of the posts on the homepage. I’ll resize the screen and we can see that the posts on the left side got smaller as we made the browser window smaller. These posts are responsive. They’re changing their width based on the width of the browser. And note that the column on the right wasn’t responsive. The width here is the same as the width when the browser is full screen.

Leave a Reply

Your email address will not be published. Required fields are marked *