In Guide to Responsive Web Design Pt.1 we talked about philosophy and principles of RWD and also inspect the case of responsive images. In part 2 I want to talk about layout and media queries. There will also be more of coding and real-life examples. So let’s continue.
Layouts and media queries
When switching between larger (desktop) and smaller (mobile) resolution, you will have to consider the structure of your page’s layout. The reason is simple. Mobile devices don’t have as much space for your content as desktops. On large resolution you can easily view three column layout with equal widths and text on the page will remain readable and legible. Try this on mobile phone or low-resolution tablet and you will come to grief. To overcome this situation, we can use the powers of media queries and play a little with structure of our layout.
For example, let’s say we have a page with navigation, one sidebar on the left, one on the right, main container in between and footer on the bottom of the page. Code might look like this:
<!doctype html> <html lang="en"> <head> <title>Example 1</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <nav></nav> <aside class="sidebar-left"></aside> <aside class="sidebar-right"></aside> <main></main> <footer></footer> </div> </body> </html>
I will explain the code just a bit. First line is for setting the type of document, in our case it’s HTML5. Then follows the basic structure of html document (lang specifies the language of the page – English). Inside the head part is title tag, metas and link for stylesheet. 1st meta tag is for setting the coding of page into “utf-8” standard, 2nd specifies how you want the browser’s viewport to render your web page. Between the body tags is div for wrapping up whole page. The “nav” tag is for navigation; “aside” for sidebars on the left and another on the right; “main” for main content of the page – e.g. the center column (depend on purpose, you can use section or article tag) and the last tag is “footer”. These tags are from HTML5 specification. If you didn’t heard about them or saw them, the difference is that they, unlike divs, have semantic meaning. For this example, I’m not going to write any more content into the structure since we don’t really need it. Next thing we have to do create some CSS rules for our page.
.wrapper {
margin: 0 auto;
width: 100%;
}
nav,
aside,
main,
footer {float: left;}
aside,
main {
width: 33.3%;
height: 30em;
}
nav {
width: 100%;
height: 2em;
}
main {background: #a00;}
footer {
width: 100%;
height: 2em;
background: #34495e;
}
.sidebar-right {
float: right;
background: #f1c40f;
}
.sidebar-left {background: #9b59b6;}
First rule for wrapper sets its width to browser width and height appropriately to its child’s elements. In other words, the wrapper will grow shrink by inner elements. Second and third rule is for our elements with content. To make it easier, I set the width of all of them to 33,3% which is approximately 1/3 of the whole width for each of the page’s width. Footer will take full width. Those colors are just for differentiation individual parts of layout.
For those of you who don’t have access to some code editor, we have navigation on top, three columns lying next to each other and footer on the bottom. Pretty simple layout to start with.
This layout is good for desktop devices but when screen or display get smaller, it may cause some troubles (like the need to use magnifying glass). With responsive design we have to keep in mind that the page might not look always exactly the same as on the desktop. In our example, if put some text into individual parts of our page, the content would be unreadable on smaller resolutions. The user would have only two options… Zoom in and out like crazy or leave the page. We don’t want either one to happen. The solution is to restructure the layout. For simplicity we will target screens and mobile phones with resolution 480px and smaller. Let’s create a media query inside our style sheet.
@media screen and (max-width: 480px) {}
To change the flow of content we have to do only slight change to width properties and just for case add the clearing for main element:
@media screen and (max-width: 480px) {
aside {
width: 50%;
}
main {clear: both; width: 100%;}
}
This will cause resizing both sidebars to 50% the page. Great! No we have both sidebars on the top of the page and main element in the bottom. Another thing we can do is to hide sidebars completely by adding a property “display” with value none to our query:
@media screen and (max-width: 480px) {
aside {display: none;}
}
This way, if the sidebars are not that important, we can hide them for smaller resolution and keep just navigation, main content and footer. Let’s close it for this part. Next week, in the last part, we will talk about connection between JavaScript and RWD.
link to codepen:
https://codepen.io/d3v3r0/pen/sDewB?editors=110
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
