Create a Responsive Web Design Template

Create a Responsive Web Design Template

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.

Create a Responsive Web Design Template

[tut demo=”http://www.onextrapixel.com/examples/responsive-website-template/” download=”http://www.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=”http://www.onextrapixel.com/examples/responsive-website-template/” download=”http://www.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.

Harry Atkins is a freelance web, graphic and 3D designer who runs the blog Calvados Web Design and is passionate about the web, photography, design and Apple.

Comments

    • Anonymous,
    • September 12, 2011
    / Reply

    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

      • Linda Williams,
      • September 12, 2011
      / Reply

      Never judge a book by its cover. Typical type of ordinary man like you are enough to put me off.

      1. / Reply

        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)

      • Jake,
      • January 2, 2012
      / Reply

      yeah Mr Anonymous,

      how can you comment without reading? rant all you want…..

    • Odt,
    • September 12, 2011
    / Reply

    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. 

    • DJ,
    • September 12, 2011
    / Reply

    @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.

  1. / Reply

    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.

  2. / Reply

    reading this post makes me tingle all over. Thanks Harry!

  3. / Reply

    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 .

  4. / Reply

    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”.

  5. / Reply

    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.

  6. / Reply

    It seems to me this tutorial is useful and this css style can be used all other devices ..its good

  7. / Reply

    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!!

      • joe,
      • December 29, 2011
      / Reply

      @Grassini. Thanks for that snippet. Big help!

  8. / Reply

    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!

    • fjpoblam,
    • September 26, 2011
    / Reply

    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?

  9. / Reply

    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.

  10. / Reply

    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!

  11. / Reply

    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

    • goggo,
    • January 19, 2012
    / Reply

    Thanks, I think this is a great introduction to coding responsive web pages.

    • Prodyot,
    • January 25, 2012
    / Reply

    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.

    • Hari,
    • February 12, 2012
    / Reply

    I have downloaded the file, but kind of curious: What is the script at the end of the html for? Thanks..

    1. / Reply

      actually it has nothing to do with the tutorial, just a piece of Google code that help Google bot index the page

  12. / Reply

    This is just what the doctor orders, thank a lot man. I’m going to work a responsive website and gotta read up on a lot of info in making this kind of websites. This probably makes me easier to start a new one.

    • Jacqueline Claire,
    • March 18, 2012
    / Reply

    This is a great starting point for responsive design! Thank you for taking the time to share.

    • Ejaz,
    • March 26, 2012
    / Reply

    This is certainly a good place to begin experimenting with responsive design especially if the term “frameworks” scares you.

  13. / Reply

    Great Share about responsive web design, Its help to convert my existing website into more responsive. previously my site not good visible in below 1280 pixels, now its getting, thanks

  14. / Reply

    Many thanks..nice tutorial-sweet…..

  15. / Reply

    Thanks a lot Harry. Excellent tutorial and template.

  16. / Reply

    well i’m new to responsive design so this was an absolute find.

    • Jakob Pless,
    • October 11, 2012
    / Reply

    What is the transition properties used for?

  17. / Reply

    I am just trying to come up with a responsive template to play with and look at on different devices to use a starting point. This was perect.

  18. / Reply

    This is very amazing article.

    Thank you for sharing

    • Carlos Barrionuevo,
    • March 16, 2013
    / Reply

    Excelent article thanks

    • Balu Raut,
    • April 17, 2013
    / Reply

    Awesome article Thank you very much for sharing this article!!!

  19. / Reply

    cool tutorial! thanks

  20. / Reply

    Cool presentation

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.