Responsive Web Design Best Practices

Aug 01, 2019

In this video, you will learn about responsive web design best practices. An effective, responsive design displays equally well on any platform from desktop to tablet to mobile device.

In this video, we'll consider the concept of responsive web design. An effective, responsive design displays equally well on any platform from desktop to tablet to mobile device. There are three considerations that we need to make in order for this to work. One, the responsive design, that is the way the page should appear for each layout, should be considered and created in mock-ups. Two, the CSS rules that will implement each layout need to be considered. And three, the media queries to apply those CSS rules need to be created. Best practice means we separate content from presentation, and that's the essence of HTML and CSS. The HTML defines the structure of the document. The presentation and appearance are handled separately in CSS.

[Video description begins] The Visual Studio Code window and browser window are open. [Video description ends]

In Visual Studio Code, I have four files open, index.html in the designFolder and styles.css in the designFolder.

[Video description begins] The other two files are index.html and styles.css, which are opened in the myResponsiveApp folder. [Video description ends]

These two are related and work together.

[Video description begins] He points to the files: index.html and styles.css of designFolder in the Visual Studio Code window. [Video description ends]

The index.html is a very simple blank HTML document, in other words, there's nothing in the body content.

[Video description begins] He points to the lines of code, code starts: <body> </body>. Code ends. [Video description ends]

And styles.css, here, I'm using media queries to implement my responsive design.

[Video description begins] He switches to the styles.css file of designFolder. [Video description ends]

Lines 10 through 14, implement the mobile only, and this has a media query that uses only screen as the media type.

[Video description begins] He points to the lines of code, code starts: @media only screen and (max-width: 360px) { body { background-color: green; } }. Code ends. [Video description ends]

And the media feature is the max width of 360 pixels, and the background color is green. From lines 17 through 21, that implements the tablet.

[Video description begins] He points to the lines of code, code starts: @media only screen and (min-width: 361px) and (max-width: 800px) { body { background-color: palevioletred; } }. Code ends. [Video description ends]

And 24 through 28, that's the desktop.

[Video description begins] He points to the lines of code, code starts: @media only screen and (min-width: 801px) { body { background-color: lightskyblue; } }. Code ends. [Video description ends]

Let's see how this works. So over in index.html, I'll right-click the tab, select Open in Default Browser. And it opens in the mobile view.

[Video description begins] The browser window opens in the mobile view. [Video description ends]

So there's less than 360 pixels of width here. As I resize, however, so I'll drag the window to the right.

[Video description begins] He points to the browser window. [Video description ends]

As I resize, once it surpasses 360 pixels, watch the color change to pink, and there it is. So this is the tablet layout. Now the tablet layout is good up to and including 800 pixels. Once I surpass 800, then that's the desktop screen layout, and the background will turn blue here. And there it goes. All right, and that's simply implemented using these three media queries. Okay, the other two files on the right, index.html in myResponsiveApp folder, and styles.css in myResponsiveApp folder. These are vastly different.

[Video description begins] He switches to the index.html file of myResponsiveApp folder in Visual Studio Code window. [Video description ends]

So in the index.html file here in the document, I've got a new value in the meta tags on line 5.

[Video description begins] He points to the line of code: <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />. [Video description ends]

And then I've set up some sections, page to menu, header, content, action, and three features.

[Video description begins] He points to the lines of code, code starts: <div class='page'> <div class='section menu'>Menu</div> <div class='section header'>Header</div> <div class='section content'>Content</div> <div class='section action'>Action</div> <div class='section feature1'>Feature1</div> <div class='section feature2'>Feature2</div> <div class='section feature3'>Feature3</div> </div>. Code ends. [Video description ends]

I've used the concept known as mobile first. In fact, it's considered best practice to begin with the mobile layout first, then work up to the full desktop version.

[Video description begins] He switches to the styles.css file of myResponsiveApp folder. [Video description ends]

Now, examining the styles.css file here, I've got a universal selector rule which is there to reset margins and padding.

[Video description begins] He points to the lines of code, code starts: * { margin: 0; padding: 0; box-sizing: border-box; }. Code ends. [Video description ends]

Then I've got my base styles. My base styles are set up in such a way that they configure my mobile first. Scrolling down, all of these styles reflect my mobile content first.

[Video description begins] He points to the lines of code, code starts: .page { display: flex; flex-wrap: wrap; } .section { width: 100%; height: 180px; display: flex; justify-content: center; align-items: center; } .menu { background-color: darkslategray; height: 50px; } .header { background-color: lightskyblue; } .content { background-color: beige; height: 300px; } .action { background-color: lightgreen; } .feature1 { background-color: yellowgreen; } .feature2 { background-color: pink; } .feature3 { background-color: darksalmon; }. Code ends. [Video description ends]

Which means that the code here from lines 52 through 57, I can highlight and delete, they're not necessary. But I do, however, need to change my mobile first layout to accommodate tablet and then desktop screens.

[Video description begins] He points to the lines of code, code starts: @media only screen and (min-width: 361px) and (max-width: 800px) { .action, .feature1, .feature2, .feature3 { width: 50%; } }. Code ends. [Video description ends]

So for tablet, here I've considered that with my tablet layout, I want the feature and action sections to form a two-by-two grid. Then with the desktop layout, I don't want to allow the page to expand infinitely so I give it a fixed width and I center it with an auto margin.

[Video description begins] He points to the lines of code, code starts: @media only screen and (min-width: 801px) { .page { width: 801px; margin: 0 auto; } .action { height: 300px; order: 1; } .content { order: 2; } .feature1, .feature2, .feature3 { width: 33.3%; } .header { height: 360px; } }. Code ends. [Video description ends]

I'm also using reordering, because when I consider this layout I want the action and content sections to appear after the features sections. So all of that with the desktop layout is happening on line 63 through to 83. Okay, let's see this in action. I'll right-click index.html, select Open in Default Browser, and there's my mobile first design.

[Video description begins] He right clicks on index.html file of myResponsiveApp folder and selects the Open in Default Browser option. The browser window opens. The Responsive Web Design web page is open. It includes the following sections: Menu, Header, Content, Action, Feature1, Feature2, and Feature3. [Video description ends]

So each section comes one on top of the other. All right, now, let's drag the window and make it larger, so that we exceed 360 pixels and see that it changed the layout. So in fact, in this tablet layout, we have the action and three features as a two-by-two grid, as we designed. Expanding further to get to the desktop, we have the features coming before action and content, again, as designed. Now one other thing, first I want to resize this window so we can look at the code. In index.html, note line 5, on line 5, I'm disabling viewport zooming.

[Video description begins] He switches to the Visual Studio Code window and clicks on index.html file of myResponsiveApp folder. He points to the line of code: <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />. [Video description ends]

This is necessary because before responsive design became important, mobile devices had just the desktop layout to display the full web app. To accommodate, the entire desktop layout was zoomed out to the width of the screen, which allowed users to zoom in as required. What an ugly solution. And it also prevents mobile devices from using any mobile layout that you've designed. So we add this one element to the head of our HTML document to disable viewport zooming.