A while back we took A Look at Responsive Web Design and how different designers utilize it in different ways. Now that we’ve seen a few examples in action, let’s create a responsive website of our own.
In this installment we’re going to set up the structure of our homepage and add in a few media queries that will help the site load quicker, navigate better, and keep our desired appearance across multiple devices, platforms, and resolutions.
Before we dive in to the HTML, let’s cover the “viewport” meta tag. The Apple iPhone and iPod touch are programmed to automatically scale down websites in the iOS version of Safari.
This will allow the user to see the site as it’s intended, but scaled down in order to fit in the smaller screen. Since we’re going to create a media query specifically for the screen, we don’t want the iPhone to scale it. The viewport meta tag will also allow you to set parameters on how much a viewer is able to zoom in or out, as well as what scale your site should initially load in. For this tutorial we’re going to tell it not to scale at all.
Beginning with the HTML, you’ll notice that it’s pretty basic HTML5 stuff with the exception of our viewport meta tag and our main background div.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainBG" class="homeContent" data-type="background">
</div><!--end div "mainBG"-->
</body>
</html>With our HTML in place, let’s create our CSS file. I like to reset my CSS by getting rid of unwanted margins, padding, and borders with this basic bit of code to start off my CSS file.
body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, fieldset, legend, label, input, textarea {
margin: 0; padding: 0; border: 0;
}
sh1, h2, h3, h4, h5, h6, p {
margin: 0 0 1em 0;
}
h1{font-size: 200%;}
h2{font-size: 170%;}
h3{font-size: 160%;}
h4{font-size: 140%;}
h5{font-size: 120%;}Now that we’re starting from scratch we can open up our body tag and add some style to it. I set my background color to white and chose a dark gray for my text coloring. Using a white background with black text often is too sharp of a contrast and can put a strain no the eyes of a viewer, going with a dark gray helps avoid that issue.
html, body { height: 100%; }You’ll also notice that I set my font size using em, this is a crucial step when developing a responsive site because it is percentage based and will dynamically adjust itself on the fly. If you were to set your font to a specific pixel size, once your site was scaled down to mobile phone dimensions it won’t flow as nicely with the rest of your design and may fill the entire screen, or the letters may overlap each other.
We can also add the style to our .homeContent class as well as our #mainBG id. I’ve defined the height of the page, set the width to 100% and centered the content within the .homeContent class. The #mainBG id pulls in our background image, which is a stock photo I got from 123RF. I also set the background-size property to “cover”, which will scale the image to fill the screen and allow our background image to maintain proper proportions in larger resolutions. The size of my “big.jpg” background image is 1920 x 1189.
.homeContent {
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
}
#mainBG {
background: url(images/big.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}Now that we’ve got the basics entered, we can write our media queries. The first two we’re going to set are for tablets. We’re going to call in our medium sized background image as some tablet viewers may be relying on their network to load the site and there’s no need for them to waste the data or time to load an image twice the size of their display. The size of my “medium.jpg” background image is 1024 x 770. We’re also going to position it so that it will still display properly across various tablets.
@media only screen and (max-width: 1024px) and (orientation:landscape) {
#mainBG { background: url(images/medium.jpg) 50% 0 no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
#mainBG { background: url(images/medium.jpg) 50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}The last media query we’re going to write is for mobile phones. We’re going to pull in our “small.jpg” background image, for the same reasons noted with our tablet query, as well as position it to display properly. My “small.jpg” background image is 767 x 475.
@media only screen and (min-width: 0px) and (max-width: 767px) {
#mainBG { background: url(images/small.jpg) 75% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}Preview your work in a browser. Start with your browser window full screen, then squeeze it in and watch as the image immediately begins adjusting to the new dimensions. See if you can spot where your media queries occur and your background image changes to a smaller version.
Download the full source code from this tutorial here.
