<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 16: Mobifying & Responsive Layouts — INFO 343 Autumn 2012</title>
</head>
<body>
<div class="layout">
<div id="controls"><!-- DO NOT EDIT --></div>
<div id="currentSlide"><!-- DO NOT EDIT --></div>
<div id="header"></div>
<div id="footer">
<h1>INFO 343 Lecture 16</h1>
<h2>Mobifying & Responsive Layouts</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>Mobifying & Responsive Layouts</h1>
<h3>Lecture 16</h3>
<!-- <h4>Reading: 10.3–10.4</h4> -->
<p class="license">
© 2012 Morgan Doocy
</p>
<div class="w3c">
<a href="http://validator.w3.org/check/referer"><img src="../s5/images/w3c-xhtml11.png" alt="Valid XHTML 1.1" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="../s5/images/w3c-css.png" alt="Valid CSS!" /></a>
</div>
</div>
<div class="slide">
<h1>Mobile device web traffic</h1>
<div style="width: 60%; float: right; margin-left: 1em"><img src="Mobile-share-of-web-traffic.png" alt="Mobile devide web traffic" style="max-width: 100%" /></div>
<ul>
<li>Mobile devices now make up 20% of all web traffic
<ul>
<li>Tablets: 5.6%<br>(95–98% iPad)</li>
<li>Phones: 14.6%<br>(72% iPhone, 26% Android)</li>
</ul>
</li>
<li class="incremental">UI needs are different at smaller screen sizes:
<ul>
<li>Larger tap area for links/buttons</li>
<li>Hidden-away navigation leaves room for more content</li>
<li>Only enough room for a single column of information</li>
</ul>
</li>
<li class="incremental">How do we accommodate smaller screen sizes?</li>
</ul>
</div>
<div class="slide">
<h1>Mobifying layouts: “Responsive” web design</h1>
<p class="description">Layouts that adjust themselves (“respond”) to optimize for screen size</p>
<div style="float: right; width: 50%; margin-left: 1em;"><img src="Boston_Globe_responsive_website.jpg" alt="Boston Globe responsive website" style="max-width: 100%;"/></div>
<ul>
<li>Make your site always look good — no matter what screen size!</li>
<li>Degrade gracefully in older or less-sophisticated browsers</li>
<li>Use <a href="http://www.w3.org/TR/css3-mediaqueries/">CSS3 Media Queries</a> to apply different styles at different sizes</li>
<li>Site design can change dramatically with size. Examples:
<ul>
<li><a href="http://mediaqueri.es">mediaqueri.es</a></li>
<li><a href="http://socialdriver.com/2012/07/20-best-responsive-websites/">20 Best Responsive Web Design Examples of 2012</a> (SocialDriver)</li>
</ul>
</li>
<li>Replaces redundant “mobile site” approach, which adds another page to maintain</li>
</ul>
</div>
<div class="slide">
<h1>Fluid columns example</h1>
<div class="example">
<pre class="examplecode css">
<span class="comment">/* Three-column fluid layout with gutters */</span>
<span class="comment">/* 32% + 2% + 32% + 2% + 32% = 100% */</span>
.col { float: left; <em>width: 32%; margin-right: 2%</em> }
<span class="comment">/* remove extra 2% at right of every 3rd column */</span>
.col:<em>nth-child(3n)</em> { margin-right: 0; }
</pre>
<div class="exampleoutput">
<style type="text/css">
#threecol_fluid {
margin: 0; padding: 0;
list-style-type: none;
}
#threecol_fluid li {
margin: 0; padding: 0;
float: left;
width: 32%;
min-height: 3.4em;
margin-right: 2%;
margin-bottom: 1em;
background-color: fuchsia;
}
#threecol_fluid li:nth-child(3n) {
margin-right: 0;
}
#threecol_fluid li:nth-child(4n) {
clear: left;
}
</style>
<ul id="threecol_fluid">
<li>Small batch bushwick scenester, banksy salvia mlkshk williamsburg post-ironic.</li>
<li>Freegan gentrify aesthetic jean shorts raw denim pour-over +1</li>
<li>Wes anderson ethnic godard brooklyn mixtape carles cred.</li>
<li>Retro twee fap, cardigan etsy pitchfork farm-to-table next level vice.</li>
<li>Brunch pickled bespoke biodiesel, lomo swag street art four loko jean shorts forage.</li>
<li>Umami fixie shoreditch, single-origin coffee cred quinoa ethnic brunch lomo aesthetic</li>
</ul>
</li>
</ul>
</div>
</div>
<ul style="margin-top: 0">
<li style="float: left; width: 45%">Notice the fencepost problem: Spacing goes <em>between</em> columns
<ul>
<li>n − 1 spaces (“gutters”) for n columns</li>
</ul>
</li>
<li style="float: left; width: 45%; margin-left: 5%">Nice, but…
<ul>
<li>At small sizes, gutters get too cramped; at larger sizes, too wide</li>
<li>At small sizes, columns get too narrow (line lengths too short); at larger sizes, get too wide/long</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Adapting with CSS3 Media Queries</h1>
<div class="example">
<pre class="examplecode html">
<head>
...
<link rel="stylesheet" href="<em>default.css</em>" type="text/css" <em>media="screen"</em>>
<link rel="stylesheet" href="<em>mobile.css</em>" type="text/css" <em>media="screen and (max-width: 800px)"</em>>
<link rel="stylesheet" href="<em>large.css</em>" type="text/css" <em>media="screen and (min-width: 1200px)"</em>>
...
</head>
</pre>
<pre class="examplecode css">
<span class="comment">/* default.css - 3-column */</span>
.col { float: left; <em>width: 32%;</em> margin: 0 <em>2%</em> 1em 0; }
.col:nth-child(<em>3n</em>) { margin-right: 0 }
</pre>
<pre class="examplecode css">
<span class="comment">/* mobile.css - switch to 2-column */</span>
.col { <em>width: 48%; margin-right: 4%;</em> } <span class="comment">/* 48% + 4% + 48% = 100% */</span>
.col:nth-child(<em>3n</em>) { margin-right: 4% } <span class="comment">/* "undo" the 3n rule from default.css */</span>
.col:nth-child(<em>2n</em>) { margin-right: 0 }
</pre>
<div class="exampleoutput">
<style type="text/css">
#threecol_responsive {
margin: 0; padding: 0;
list-style-type: none;
}
#threecol_responsive li {
margin: 0; padding: 0;
float: left;
min-height: 3.4em;
margin-bottom: 1em;
background-color: fuchsia;
}
@media screen and (max-width: 800px) {
#threecol_responsive li {
width: 48%;
margin-right: 4%;
}
#threecol_responsive li:nth-child(2n) {
margin-right: 0;
}
#threecol_responsive li:nth-child(3n) {
clear: left;
}
}
@media screen and (min-width: 800px) and (max-width: 1200px) {
#threecol_responsive li {
width: 32%;
margin-right: 2%;
}
#threecol_responsive li:nth-child(3n) {
margin-right: 0;
}
#threecol_responsive li:nth-child(4n) {
clear: left;
}
}
@media screen and (min-width: 1200px) {
#threecol_responsive li {
width: 24%;
margin-right: 1.333333333333333%;
}
#threecol_responsive li:nth-child(4n) {
margin-right: 0;
}
#threecol_responsive li:nth-child(5n) {
clear: left;
}
}
</style>
<ul id="threecol_responsive">
<li>Small batch bushwick scenester, banksy salvia mlkshk williamsburg post-ironic.</li>
<li>Freegan gentrify aesthetic jean shorts raw denim pour-over +1</li>
<li>Wes anderson ethnic godard brooklyn mixtape carles cred.</li>
<li>Retro twee fap, cardigan etsy pitchfork farm-to-table next level vice.</li>
<li>Brunch pickled bespoke biodiesel, lomo swag street art four loko jean shorts forage.</li>
<li>Umami fixie shoreditch, single-origin coffee cred quinoa ethnic brunch lomo aesthetic</li>
</ul>
</div>
</div>
</div>
<div class="slide">
<h1>Responsive Techniques</h1>
<ul>
<li>Reduce/add number of columns as size shrinks/grows</li>
<li>Un-float elements to make them stack</li>
<li>Calculate widths of columns and gutters based on some fixed size. Ex:<br>
3 × 300px + 2 × 20px = 940px<br>
Columns: 300px / 940px = 31.91489%<br>
Gutters: 20px / 940px = 2.12766%</li>
<li>Common stop points:
<table class="standard" style="font-size: 80%">
<tr><th>240px</th><th>320px</th><th>480px</th><th>768px</th><th>1024px</th><th>1200px</th></tr>
<tr>
<td>small phone</td>
<td>iPhone portrait</td>
<td>
iPhone landscape<br>
small tablet portait
</td>
<td>iPad portrait</td>
<td>
iPad landscape<br>
standard desktop
</td>
<td>wide desktop</td>
</tr>
</table>
</li>
</ul>
</div>
<div class="slide">
<h1>Use case: Dropdown navigation</h1>
<div class="example" style="overflow: hidden;">
<pre class="examplecode html" style="float: left; width: 55%">
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/about/">About</a></li>
</ul>
<select>
<option <em>value="/"</em>>Home</option>
<option <em>value="/blog/"</em>>Blog</option>
<option <em>value="/about/"</em>>About</option>
</select>
</nav>
</pre>
<pre class="examplecode css" style="width: 44%; float: right;">
<span class="comment">/* default.css */</span>
nav ul { display: <em>block</em>; }
nav select { display: <em>none</em>; }
</pre>
<pre class="examplecode css" style="width: 44%; float: right;">
<span class="comment">/* mobile.css */</span>
nav ul { display: <em>none</em>; }
nav select { display: <em>block</em>; }
</pre>
<pre class="examplecode js" style="width: 44%; float: right;">
<span class="comment">// scripts.js</span>
<span class="comment">// handle dropdown nav using JS</span>
$('<em>nav select</em>').change(function() {
<em>window.location = this.value;</em>
});
</pre>
</div>
<ul>
<li>Use Media Queries to show/hide <code>select</code> dropdown at smaller sizes</li>
<li>Use JS to handle changes to the dropdown menu, and change the <code>window.location</code> to manually navigate</li>
</ul>
</div>
<!--#include virtual="../s5/commonbottom.html" -->