An introduction to responsive web design & media queries

Click here to view the live example, or click here for the ZIP file.

This week, I’ve prepared a simple one-page website to talk you through the basics of creating a responsive web page. Iif you’re fairly new to responsive web design this tutorial will get you started with a free template that utilises nothing more than a CSS 3 Media Queries and respond.js.

Useful Links from the video

Below you can find the two links to Respond.js and also a really helpful snippet from Chris Coyer

• Chris Coyer’s Snippets for Media Query Sizes
• Respond.js on Github
• Respond.js WordPress Extension.

The HTML from the video

Below is all of the HTML5 from the example above. From here you can simply copy and paste it in whole or in part.

		Example Responsive Website by Creare

		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]--><script type="text/javascript" src="respond.min.js"></script>
</pre>
<div id="perimeter"><header>
<h1>Responsive</h1>
<nav>
<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Share</a></li>
	<li><a href="#">Contact</a></li>
</ul>
</nav></header>
 <img id="splash" src="images/james-n-nick.png" alt="James & Nick" />
<div id="content"><section>
<h2>Section</h2>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </section><aside>
<h2>Aside</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</aside></div>
</div>
<pre><footer>
© Copyright 2012<span> - Example by James Bavington</span></footer>

The CSS from the video

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;

}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* End CSS Reset */

body {

	background: url('images/absurdidad.png');
	font-family: Arial, helvetica, sans-serif;
	font-size:62.5%;
}

p,li { font-size: 1.4em; color:#666; }

h2,h3 {
	color:#333;
	font-weight: bold;
	font-size: 2em;
	margin:0 0 10px;
}

#perimeter {
	width:90%;
	max-width: 960px;
	margin: 20px auto;
	background: #fff;
	padding:20px 0;
	height:auto;
	overflow:hidden;
}

header h1 {
	font-family: 'Mrs Sheppards', cursive;
	font-size:5em;
	color:#333;
	margin:0 0 20px 20px;
}

header nav ul {
	background:#333;
	overflow:hidden;
	padding:0 0 0 20px;
}

header nav ul li {
	display:inline;
	float:left;

}

header nav ul li a {
	color:#fff;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	padding:10px 20px;
	display:block;
}

header nav ul li a:hover {
	background-color: #555;
}

img#splash {
	width:100%;
	margin:20px 0;
}

#content {
	padding:20px;
}

section {
	float:left;
	width:47%;
	margin:0 6% 0 0;
}

aside {
	float:right;
	width:47%;
}

footer {
	width:90%;
	max-width: 960px;
	margin: 20px auto;
}

footer p {
	padding:0 0 0 20px;
	color:#333;
}

/* Start our Smartphone Media Query */
@media (max-width: 480px) {

	header h1 {
		font-size:5em;
		text-align: center;
	}

	header nav ul {
		padding:0;
		background-color:#fff;
	}

	header nav ul li {
		margin: 0;
		background: #333;
		display: block;
		margin-bottom: 2px;
		float:none;
	}

	header nav ul li a {
		display: block;
		padding: 10px;
		text-align: center;
	}

	section,aside {
		float:none;
		width:100%;
	}

	section {
		margin:0 0 20px 0;
	}

	footer span {
		display:none;
	}
	footer p {
		text-align: center;
		padding:0;
	}
}