Web Accessibility: 35 Responsive Design

35 Responsive Design - Solution

responsive-design.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Sergio Luján Mora" />
<title>Responsive Design</title>
<link rel="stylesheet" href="responsive-design.css" type="text/css" />
</head>
<body>
<header>
<h1>Responsive Design</h1>
<h2>The best thing in the world after the invention of the Web</h2>
</header>

<nav>
<select>
<option>Home</option>
<option>Tutorial</option>
<option>Examples</option>
</select>

<ul>
<li><a href="">Home</a></li>
<li><a href="">Tutorial</a></li>
<li><a href="">Examples</a></li>
</ul>
</nav>

<section>
<article>
<h3>New responsive design examples</h3>
<p>Blah, blah, blah, blah.</p>
<p>Blah, blah, blah, blah.</p>
<p>Blah, blah, blah, blah.</p>
</article>

<article>
<h3>New tutorial</h3>
<p>Blah, blah, blah, blah.</p>
</article>

<article>
<h3>New tools</h3>
<p>Blah, blah, blah, blah.</p>
<p>Blah, blah, blah, blah.</p>
</article>
</section>

<footer>
<p>
Copyright &copy; 2012 Sergio Luján Mora<br />
Email: <a href="">sergio.lujan@ua.es</a>
Twitter: <a href="">@sergiolujanmora</a>
</p>
</footer>
</body>
</html>

responsive-design.css

/* (c) 2012 Sergio Luján Mora */
header, nav, section, article, footer, h1, h2, p {
  margin: 10px 0;
}

body {
  padding-left: 20px;
  padding-right: 20px;
}

header {
  background-color: yellow;
  text-align: center;
}

nav {
  background-color: orange;
  float: left;
  width: 200px;
}

nav select {
  display: none;
}

nav ul {
  padding-left: 10px;
  list-style-type: none;
}

section {
  margin-left: 220px;
}

article {
  background-color: blue;
  color: white;
  float: left;
  width: 300px;
  margin-left: 0;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
}

footer {
  background-color: pink;
  clear: both;
}

header, nav, section, article, footer {
  border-radius: 10px;
}


@media screen and (max-width: 600px) {
header {
  text-align: left;
}

nav {
  float: none;
  width: auto;
}

nav select {
  display: inline;
}

nav ul {
  display: none;
}

section {
  margin-left: 0;
}

article {
  float: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
}
}


@media screen and (max-width: 480px) {
header h2 {
  display: none;
}
}