The web is buzzing with responsive web designs right now. To have a single site that will change its styling accordingly to fit to the device it's being viewed on. In this tutorial, I'm going to make a (very simple looking) web template that is responsive from desktop size down to mobile version.
HTML Structure
I'm writing this example in HTML5, so we can use the new semantic elements like header, footer, etc. I recommend putting the HTML5 shiv in there for IE, and using a reset.css file to start off from a nice blank sheet.
So we start out by making a page wrapping div, a header section with titles, tagline and navigation. A main content section with a featured article section, some recent blogs, a sidebar, an about section and finally a footer. Nothing really special here, just setting up the page structure with some useful CSS class names for later.
<div id="wrapper">
<header>
<h1><a href="index.html">Site Title</a></h1>
<h2>Tagline <span>&</span> Some clever comment about the company</h2>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
<div class="clearfix"></div>
</nav>
</header>
<section id="main-content">
<div id="featured">
<h3>Featured Article :</h3>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> <a href="#">Continue Reading →</a></p>
</div> <!-- END Featured -->
<hr/>
<div id="latest">
<section class="left-col">
<h3>Latest Articles :</h3><br/>
<h4><a href="#">Blog 1</a></h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p>
<h4><a href="#">Blog 2</a></h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p>
<h4><a href="#">Blog 3</a></h4>
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. <a href="#">Continue Reading →</a></p>
</section> <!-- END Left Column -->
<aside class="sidebar">
<h4><a href="#">Archives</a></h4>
<ul>
<li><a href="#">July 2010</a></li>
<li><a href="#">August 2010</a></li>
<li><a href="#">September 2010</a></li>
</ul>
<br/>
<h4><a href="#">Categories</a></h4>
<ul>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Roundups</a></li>
</ul>
<br/>
<h4><a href="#">Social</a></h4>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Google+</a></li>
</ul>
</aside>
</div> <!-- END Latest -->
<div class="clearfix"></div>
<hr/>
<div id="about">
<h3>About</h3>
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.<br/><br/>
Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
</section>
<hr/>
<footer>
<p>© 2011 - Responsive Website Template</p>
</footer>
</div> <!-- END Wrapper -->
So here is the structure without any styling.
CSS Styling
Structure
You'll see in the head tag of the HTML that I've included the Droid serif font from the Google Web Fonts API, so let's set the body general and typography styles.
body { background: #F9F9F9; color: #222; font-family: 'Droid Serif', serif; font-size: 16px; }
Now we'll style the #wrapper div, we'll give it a fluid width of 90% for when we resize the browser window, and a max-width for when viewing the site on a desktop machine.
Main Styling
Now for the rest of the styling, it's basically just to make the test page look presentable. In the middle section we have a 2 column layout, and remember, any widths have to have percentage values to stay fluid. Now you'll see some CSS Transitions in there, they won't do anything until we stick our media queries in there, which we'll do right now.
h1 { font-size: 90px;
font-family: 'Droid Serif', serif;
line-height: 75px; padding: 10px;
-webkit-transition-property: font-size;
-moz-transition-property: font-size;
transition-property: font-size;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
h1 a:hover { text-decoration: none; color: #27B3CF; }
h2 { font-family: 'Helvetica'; font-size: 18px; padding: 10px;
-webkit-transition-property: font-size;
-moz-transition-property: font-size;
transition-property: font-size;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
h3 { font-family: 'Droid Serif', serif; font-size: 30px; }
h4 { font-family: 'Droid Serif', serif; padding: 3px; margin: 5px 0 0 0; }
h4 a { text-decoration: underline; }
h4 a:hover { text-decoration: none; }
nav { background: #222; padding: 0; margin: 10px 0;}
nav a { color: #F9F9F9; display: block; float: left; padding: 10px; }
nav a:visited { color: #f9f9f9; }
nav a:hover { text-decoration: none; background: #27B3CF; }
nav a:active { position: relative; top: 0; }
.left-col { width: 70%; float: left; }
.sidebar { width: 20%; float: right; margin-bottom: 10px;
-webkit-transition-property: width;
-moz-transition-property: width;
transition-property: width;
-webkit-transition-duration: 0.5s, 0.5s;
-moz-transition-duration: 0.5s, 0.5s;
transition-duration: 0.5s, 0.5s;
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
}
#featured { padding: 20px; }
#latest { padding: 20px; }
#about { padding: 20px; }
p { padding: 0 5px 0 5px; }
ul { list-style: none; }
ul li { margin: 0 5px; }
footer { padding: 5px; }
So here's what our page looks like now.
Media Queries
We'll link the HTML file to another CSS file which we'll name media-queries.css where we'll target specific browser window sizes and change the font size of the h1 title, the h2 tagline, the overall body copy size, and finally change the 2 column design down to a one column one.
@media screen and (max-width: 478px) {
h1 { font-size: 70px; padding: 1px; }
h2 { font-size: 13px; padding: 1px; }
body { font-size: 13px; }
}
@media screen and (max-width: 740px) {
.left-col { width: 100%; }
.sidebar { width: 100%; }
}
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
iPhone View
Here's the same site at the smallest browser size possible on iPhone.
Conclusion
Now because of the CSS transitions that we added to the CSS file, the title, tagline and body copy will animation their font size so the page doesn't jump, and the sidebar will animate to it's position and not jump as well.
So that's about it, please do comment, maybe say how I could better the code or method. I'm not saying this is the best way to make a responsive web template, just that this is how I'd do it. Feel free to download and better or modify, or just use as a starting point for one of your projects.
Since when did responsive mean 100% width?
/rant start
The whole point behind responsive web design is to create the most appropriate view of your content for the targeted medium. I'll admit i've not read the article because the intro graphic in my RSS feed was enough to put me off.
/rant end
Never judge a book by its cover. Typical type of ordinary man like you are enough to put me off.
Just what I was looking for. I design mainly with CMS (Joomla!, Drupal, and WordPress) but I have seen the need for this and I think I would be a fool not to get involved in it as I'm thinking to do. Thanks! :O)
yeah Mr Anonymous,
how can you comment without reading? rant all you want.....
I agree with Phunky, it's not just about adjusting column widths. Galleries like http://mediaqueri.es/ showcase tons of responsive sites that careful choose to to reorganize content for different devices/browser widths.
What would be helpful to designers or developers learning responsive design are how to appropriate recognize various content sections. You wouldn't just adjust the width of a feature set list, and something like a content showcase or main content slider requires careful consideration and often completely different solutions for two different sites.
@phunky, @perhaps in your rush to comment you missed the fact that nowhere in the article did the author equate "responsive" design with "100% width"; nor, did you see that, in fact, he had actually used "tons" of other stuff besides "width" to make the final page "fit the browser that it is displayed on" -- the actual purpose of what is tagged "responsive design."
However, lets take this discussion the "other direction" as well! Is it "responsive" (or even basic practice or considersate) to force a desktop with huge real estate to "waste" 80% of its assets merely because the minority of toy screens fit in someones pocket - and wannabe programmers are too lazy or full of themselves to learn or use the more difficult "fluid design model"?
Sparring aside - imho - if designers/developers don't begin embracing the idea that in order to make ourselves useful to the industry we need to thoroughly understand and utilize ALL of the available screen real estate we will be doing not only users but the industry and ourselves a grave disservice.
It seems to me that this is essentially a primer for responsive web development rather than a complete guide. The examples in the tutorial give an adequate starting point for development of customised css to fit different devices. The reader can take what is provided here and expand it to suit their individual applicaiton.
Taken as such, I think this seems a sensible and useful starting tutorial.
reading this post makes me tingle all over. Thanks Harry!
Just a note that you should check out auto-clearing through use of the pseudo-element :after (http://www.positioniseverything.net/easyclearing.html). You will no longer need .
Hmph, it lopped off my HTML. What that was supposed to end with was: you will no longer need an empty div with a class="clearfix".
Whoa - seems like this article has caused some controversy amongst responsive design purists... Oh well :) Design is design, it either works or it doesn't. You either suck or you don't.
It seems to me this tutorial is useful and this css style can be used all other devices ..its good
One suggestion:
would it be better if you add this style to the media queries?
@media screen and (max-width: 478px) {
h1 { font-size: 70px; padding: 1px; }
h2 { font-size: 13px; padding: 1px; }
body { font-size: 13px; }
/* Give your nav elements that "blockie" look for mobile devices */
nav a { width: 100%; border-bottom: 1px solid #fff; text-align: center; text-transform: uppercase; }
nav a:hover { background-color: none; }
}
Hope you like it!
Great article!!
@Grassini. Thanks for that snippet. Big help!
Ha! Call me slow, but I've been neglecting this headline for maybe 2 years, and right now I feel like a fool for never clicking that headline... This is so simple man... I could have implemented this in all of my web projects by now!
Perhaps I'm not reading your article correctly. I've read Ethan Marcotte's book on Responsive Web Design and, yes, he emphasizes (as you do), designing for "mobile first". However, he designs (as I do) with a more "fluid" font measurement, for example. (And a more "elastic" measurement for articles and asides.)
This obviates the need for font-transitions by specifying fonts in ems instead of pixels, and setting a @media query for each medium based on the screen size desired. The font-size 100% in the reset takes care of the ems in the remaining elements.
Further, in your template, I see no @media query for large screen sizes such as desk- and lap- top screen sizes. Intentional?
Just what I was looking for! We are working on a photography site project, the proposal part, and have several challenges ahead. I say challenges because we have never worked with responsive web design even though we are proficient, knowledgeable, and as geeky as anyone getting into this.
Our goal is to work on websites that are mobile friendly while they also provide mobile functionality. I believe this tutorial is better than a lot of complicated ones out there explaining the whys of every tag.
Useful article, thanks. When I tried the example I found a typo that maybe you want to correct:
These tree lines have some missing dashes:
-webkit-transition-timing function: linear, ease-in;
-moz-transition-timing function: linear, ease-in;
transition-timing function: linear, ease-in;
should be:
-webkit-transition-timing-function: linear, ease-in;
-moz-transition-timing-function: linear, ease-in;
transition-timing-function: linear, ease-in;
Thanks again for a useful article!
Just what I was looking for! We are working on a photography site project, the proposal part, and have several challenges ahead. I say challenges because we have never worked with responsive web design even though we are proficient, knowledgeable, and as geeky as anyone getting into this
Thanks, I think this is a great introduction to coding responsive web pages.
Just what I was looking for.
Great tutorial.
Now that I have your tutorial at hand I think I can now apply my mind and further work on it to get what I desire.
Thanks man.
I have downloaded the file, but kind of curious: What is the script at the end of the html for? Thanks..