Create a Responsive Web Design Template

September 12, 2011 in Tutorials by Harry Atkins

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.

[tut demo=”https://onextrapixel.com/examples/responsive-website-template/” download=”https://onextrapixel.com/examples/responsive-website-template/responsive-website-template.zip”]

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 &rarr;</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. &nbsp; <a href="#">Continue Reading &rarr;</a></p>
				<h4><a href="#">Blog 2</a></h4>
				<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. &nbsp; <a href="#">Continue Reading &rarr;</a></p>
				<h4><a href="#">Blog 3</a></h4>
				<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. &nbsp; <a href="#">Continue Reading &rarr;</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>&copy; 2011 - Responsive Website Template</p>
	</footer>		

</div> <!-- END Wrapper -->

So here is the structure without any styling.

HTML Structure No 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.

Full Width Page With CSS

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.

Smallest Width Page

[tut demo=”https://onextrapixel.com/examples/responsive-website-template/” download=”https://onextrapixel.com/examples/responsive-website-template/responsive-website-template.zip”]

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.