Welcome back to our series in Responsive Web Design. This issue we will look at CSS3 media queries and how they can help build truly responsive web pages that can adapt to its device's viewport.
In the liquid layout we created in our last installment, we learned that by using CSS percentage rules we could bend our design and make it look proportional. However, the fonts we used remained the same size and the structure tended to break up on boundaries as the browser was resized smaller.
Here we will remedy this situation by:
<!doctype html>
<head>
<title>Fixed Width Responsive HTML 5 Liquid Layout</title>
<link rel="stylesheet" media="all" href="css/reset.css" />
<style type="text/css">
body {
font-family: arial, helvetica, sans-serif;
line-height: 1.8em;
}
#page {
margin: 2% auto;
width: 100%;
overflow: hidden;
}
@media screen and (max-width: 239px) {
body {
font-size: 8px;
}
#page {
width: 99%; /* default is one column */
}
aside {
float: left;
width: 99%; /* overrides one column layout */
clear: both;
}
#content {
float: left;
clear: both;
margin: 2% 2% 1% 1%;
background-color: white;
width: 96%; /* default is one column */
}
}
@media screen and (min-width: 240px) and (max-width: 479px) {
body {
font-size: 12px;
}
#page {
width: 99%; /* default is one column */
}
aside {
float: left;
width: 99%; /* overrides one column layout */
clear: both;
}
#content {
float: left;
clear: both;
margin: 2% 2% 1% 1%;
background-color: white;
width: 96%; /* default is one column */
}
}
@media screen and (min-width: 480px) {
body {
font-size: 16px;
}
#page {
max-width: 960px;
}
aside {
width: 27%; /* overrides one column layout */
}
#content {
float: left;
margin: 2% 2% 1% 1%;
background-color: white;
width: 68%; /* overrides one column layout */
}
}
header {
float: left;
clear: both;
width: 96%;
background-color: #eee;
padding: 2%;
}
nav {
float: left;
clear: both;
width: 98%;
padding: 1%;
background-color: #aaa;
font-size: 0.80em;
}
nav ul {
margin-bottom: 0;
}
nav ul li {
display: inline;
margin-right: 2%;
}
#content {
float: left;
margin: 2% 2% 1% 1%;
background-color: white;
width: 68%;
}
aside {
float: left;
width: 27%;
margin: 2% 1% 1% 1%;
padding: 1% 0;
background-color: #eee;
font-size: 0.80em;
}
aside ul li {
text-indent: 0.5em;
padding: 0.3em;
}
footer {
float: left;
clear: both;
width: 98%;
padding: 1%;
font-size: 80%;
background-color: #efefef;
text-align: center;
}
footer p {
margin-bottom: 0;
}
p {
margin-bottom: 1em;
}
</style>
</head>
<body>
<div id="page">
<header>
<h1>response layout</h1>
</header>
<nav>
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
</nav>
<aside>
<ul>
<li>Category</li>
<li>Category</li>
<li>Category</li>
</ul>
</aside>
<div id="content">
<img src="images/flower.jpg" alt="flower"/>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in the 1960s with the
release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<footer>
<p>Response, created by Kerry Kobashi,
<a href="http://www.kobashicomputing.com" title="Kobashi Computing">
Kobashi Computing</a>
</p>
</footer>
</div>
</body>
</html>
In the code above, we've added CSS3 media query rules for the screen device to handle various devices:
We do not write code based on the actual device size. Rather, we base it on the viewport, which is the size of the browser window. Users do not necessarily keep their browser window at full size and device screen sizes vary.
Lets take a look at a media rule:
@media screen and (min-width: 480px) {
body {
font-size: 16px;
}
#page {
max-width: 960px;
}
aside {
width: 27%; /* overrides one column layout */
}
#content {
float: left;
margin: 2% 2% 1% 1%;
background-color: white;
width: 68%; /* overrides one column layout */
}
}
This rule is for browsers who have their width greater than 480 pixels. Here we set the font size to be 16 pixels and set the maximum width of our page element to be 960 pixels. If you look at the other media rules you will notice the font size is different. We do this to scale the font according to the viewport. In the case of setting the maximum page width to 960 pixels, we do this because most users using large screens do not view at full width. 960 pixels is a convenient width as it is divisible by many integral numbers and looks nice on large width screens. This keeps people from not straining reading paragraphs on information that are too wide.
Another thing to note is that in a wide view, we can afford to create two columns - one for the sidebar and another for the content. Notice that in the other rules, we create only one column and stack the layout so that everything would look nice and fit. This is a perfect example of exploiting CSS3 media queries to create an adaptive layout.
Copy the code above and save it in your text editor. Call it r2.html and then load it with your browser. Resize the window and notice something cool - the fonts resize and the columns stack. Also, everything is nicely centered.
In our next installment to our responsive design series, we will learn how to scale objects within the page like images and video.
