<!--#include virtual="../s5/commontop.html" -->
<title>Lecture 4: Positioning, Layout & Typography — INFO 343 Autumn 2011</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 4</h1>
<h2>Positioning, Layout & Typography</h2>
</div>
</div>
<div class="presentation">
<div class="slide">
<h1>Positioning, Layout & Typography</h1>
<h3>Lecture 4</h3>
<!-- <h4>Reading: 2.2.2, 3.2.6, 4.4.4</h4> -->
<p class="license">
Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp, Jessica Miller, and/or 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 titleslide">
<h1>1. Web typography</h1>
<ul>
<li>
<strong>1. Web typography</strong>
</li>
<li>
2. The <code>position</code> property
</li>
<li>
3. Layout techniques
</li>
</ul>
</div>
<div class="slide">
<h1>Line spacing (“leading”): <a href="http://www.w3schools.com/css/pr_pos_line-height.asp"><code>line-height</code></a></h1>
<div class="example">
<pre class="examplecode css">
p {
font-size: 18px;
<em>line-height: 3em;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p>
<a href="http://en.wikipedia.org/wiki/Lorem_ipsum" style="text-decoration: none">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Proin ut leo enim. Curabitur eleifend interdum enim, mattis dignissim lacus placerat gravida. Donec et eros et leo gravida condimentum et non lorem. Morbi velit quam, imperdiet a sodales in, laoreet in lectus. Vestibulum auctor massa sit amet metus ultricies nec vestibulum lacus adipiscing. Duis hendrerit malesuada diam ac porta.
</p>
</div>
</div>
<ul>
<li>Leading is measured from baseline to baseline.</li>
<li>The longer lines are, the more leading is required for readable text.
<ul>
<li>Rules of thumb: <code>line-height</code> ≈ <var>length of line</var> (in ems) × 5% ≈ <var>size of body font</var> (in ems) × 1.5</li>
</ul>
</li>
<li>Control line length (“measure”) by setting a width on the containing element
<ul>
<li>Good line length: ~28em (25–33 times the base font size)</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>
More CSS properties for text
<span class="readingsection">(3.1.6)</span>
</h1>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_vertical-align.asp">vertical-align</a></code>
</td>
<td>
vertical offset from the line of text
</td>
</tr>
<!-- <tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_text-align.asp">text-align</a></code>
</td>
<td>
alignment of text within its element
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_text-decoration.asp">text-decoration</a></code>
</td>
<td>
decorations such as underlining
</td>
</tr> -->
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_dim_line-height.asp">line-height</a></code>
</td>
<td>
distance between lines of text
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_word-spacing.asp">word-spacing</a></code>
</td>
<td>
distance between words
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_letter-spacing.asp">letter-spacing</a></code>
</td>
<td>
distance between letters
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_text-indent.asp">text-indent</a></code>
</td>
<td>
indents the <em>first line only</em> of a paragraph
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_text-transform.asp">text-transform</a></code>
</td>
<td>
alters the capitalization of text
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_font_font-variant.asp">font-variant</a></code>
</td>
<td>
switches to (or simulates) small caps variant
</td>
</tr>
<tr>
<td>
<code><a href="http://www.w3schools.com/css/pr_text_white-space.asp">white-space</a></code>
</td>
<td>
controls how whitespace is handled within an element
</td>
</tr>
<tr>
<td colspan="2" class="completelist">
<a href="http://www.w3schools.com/css/css_reference.asp#text">Complete list of text properties</a>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Anatomy of type</h1>
<div>
<img src="../s5/images/typeanatomy.png" alt="Anatomy of type: ascent, descent, baseline, median line, x-height, cap height" />
</div>
<ul>
<li>Typefaces can be <em>serifed</em> (with flourished “feet”) or <em>sans-serif</em> (without)
<ul>
<li>Serifed fonts are more legible at smaller sizes</li>
<li>Sans-serif is better for display (=header) fonts</li>
</ul>
</li>
<li>A taller x-height often leads to greater readability</li>
</ul>
</div>
<div class="slide">
<h1>The <a href="http://www.w3schools.com/css/pr_pos_vertical-align.asp"><code>vertical-align</code></a> property</h1>
<p id="vertical_align_p" style="font-size: 600%; font-family: serif; background-color: fuchsia; position: relative; margin-bottom: .167em;">
<span id="vertical_align_span" style="background-color: yellow;">
Sphinx <img class="vertical_align_example" src="../s5/images/sphinx.png" alt="Sphinx" /><span class="vertical_align_example" style="background-color: cyan;">þ</span>
</span>
</p>
<fieldset id="vertical_align_fieldset" style="width: 60%; margin-left: auto; margin-right: auto; font-size: 80%">
<legend>Interactive Example</legend>
<code>vertical-align</code>:
<select id="vertical_align_select" style="font-size: 80%">
<option value="baseline">baseline</option>
<option value="top">top</option>
<option value="bottom">bottom</option>
<option value="text-top">text-top</option>
<option value="text-bottom">text-bottom</option>
<option value="middle">middle</option>
<option value="super">super</option>
<option value="sub">sub</option>
</select>
<script type="text/javascript">
// var vertical_align_markers = {
// 'baseline': ['bottom', 'span', 'baseline'],
// 'top': ['top', 'p', 'top'],
// 'middle': ['middle', 'p', 'middle'],
// 'bottom': ['bottom', 'p', 'bottom'],
// 'super': ['bottom', 'span', 'x-height'],
// 'sub': ['middle', 'span', 'baseline'],
// };
$('vertical_align_select').observe('change', function() {
var val = this.value;
$$('.vertical_align_example').each(function(elem) {
elem.style.verticalAlign = val;
});
});
</script>
</fieldset>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<code>vertical-align</code>
</td>
<td>
specifies inline element’s vertical position on the line of text;
can be <code>top</code>, <code>middle</code>, <code>bottom</code>, <code>baseline</code> (default), <code>sub</code>, <code>super</code>, <code>text-top</code>, <code>text-bottom</code>, or a length value or <code>%</code>
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Common bug: space under image</h1>
<div class="example">
<pre class="examplecode html">
<p style="background-color: red; padding: 0px; margin: 0px;">
<img src="../s5/images/smiley.png" alt="smile" />
</p>
</pre>
<div id="common_bug_output" class="exampleoutput insertoutput"></div>
</div>
<fieldset id="common_bug_fieldset" style="width: 25%; text-align: center; margin-left: auto; margin-right: auto; font-size: 80%">
<legend>Interactive Example</legend>
<button id="common_bug_button" style="font-size: 80%;">Add text with descenders</button>
<script type="text/javascript">
$('common_bug_button').observe('click', function() {
if (this.innerHTML.match(/^Add/)) {
var text = document.createTextNode(" Zyxzzy");
$('common_bug_output').firstChild.appendChild(text);
this.innerHTML = "Remove text with descenders";
} else {
$('common_bug_output').firstChild.removeChild($('common_bug_output').firstChild.lastChild);
this.innerHTML = "Add text with descenders";
}
});
</script>
</fieldset>
<ul>
<li>red space under the image, despite <code>padding</code> and <code>margin</code> of 0</li>
<li>this is because the bottom of the image is aligned to the baseline of the line of text, and there is space beneath for descenders</li>
<li>setting <code>vertical-align</code> to <code>bottom</code> fixes the problem (so does setting <code>line-height</code> to <code>0px</code>)</li>
</ul>
</div>
<div class="slide">
<h1>Letter & word spacing</h1>
<div class="example">
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,800italic,300italic,600italic,400,300,600,700,800);
#letter-word-spacing-example {
text-align: center;
}
#letter-word-spacing-example h1 {
font-size: 5em !important;
word-spacing: -.05em;
letter-spacing: -.05em;
font-style: italic;
font-family: 'Open Sans', sans-serif !important;
line-height: .5em;
height: .75em;
/* background-color: fuchsia;*/
font-weight: 300 !important;
margin: 0;
}
#letter-word-spacing-example h2 {
font-size: 3em !important;
letter-spacing: .03em;
word-spacing: -.075em;
line-height: .75em;
height: .9em;
font-family: Haettenschweiler, Impact, sans-serif;
font-weight: normal;
margin: 0;
/* background-color: blue;*/
}
#letter-word-spacing-example p {
font-size: 62.5%;
margin: .5em 0 1em;
}
#letter-word-spacing-example abbr {
font-size: 78%;
letter-spacing: .075em;
}
</style>
<pre class="examplecode css">
h1 { font-size: 5em; <em>word-spacing: -.05em; letter-spacing: -.05em;</em> }
h2 { <em>letter-spacing: .03em; word-spacing: -.075em;</em> }
abbr { font-size: 80%; <em>letter-spacing: .075em;</em> }
</pre>
<div id="letter-word-spacing-example" class="exampleoutput">
<h1>Avant Garde</h1>
<h2>wharves and warfingers</h2>
<p>The <abbr>W3C</abbr> standards <abbr>HTML</abbr>, for content, and <abbr>CSS</abbr> for presentation.</p>
</div>
</div>
<ul>
<li>Larger and smaller type sometimes benefits from letter- and word-spacing adjustments.</li>
<li><em>Very slight!</em> Usually ≤ .1 em. (Use Firebug to toggle these and see the improvement!)</li>
</ul>
</div>
<div class="slide">
<h1>Hanging indentation: The <a href="http://www.w3schools.com/css/pr_pos_text-indent.asp"><code>text-indent</code></a> property</h1>
<div class="example">
<pre class="examplecode css" style="float: left; width: 45%;">
p {
<em>text-indent: 2em;</em>
margin: 0;
}
</pre>
<pre class="examplecode css" style="float: left; width: 45%; margin-left: 5%;">
p:first-child {
text-indent: 0;
}
</pre>
<div class="exampleoutput" style="clear: left;">
<p style="margin: 0">
<a href="http://en.wikipedia.org/wiki/Lorem_ipsum" style="text-decoration: none">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Proin ut leo enim. Curabitur eleifend interdum enim, mattis dignissim lacus placerat gravida. Donec et eros et leo gravida condimentum et non lorem.
</p>
<p style="text-indent: 2em; margin: 0">
Morbi velit quam, imperdiet a sodales in, laoreet in lectus. Vestibulum auctor massa sit amet metus ultricies nec vestibulum lacus adipiscing. Duis hendrerit malesuada diam ac porta.
</p>
</div>
</div>
<ul>
<li>Indents <em>only</em> the first line of text in a block-level element</li>
<li>Use <em>either</em> <code>text-indent</code> or <code>margin-top</code>/<code>margin-bottom</code> (never both!)
<ul>
<li>If you use <code>text-indent</code>, don’t indent the first paragraph in each section.</li>
<li>If you use vertical margin spacing, default is 1em; ideal is <var>line height</var> × 75%.</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Capitalization: The <a href="http://www.w3schools.com/css/pr_pos_text-transform.asp"><code>text-transform</code></a> property</h1>
<div class="example">
<style type="text/css">
#texttransform dt {
float: left;
clear: left;
line-height: 1.5em;
}
#texttransform dd {
margin-left: 5.75em;
}
</style>
<pre class="examplecode css">
dt.charactername {
<em>text-transform: uppercase;</em>
font-size: .8em;
letter-spacing: .075em;
}
</pre>
<div class="exampleoutput insertoutput">
<dl id="texttransform">
<dt class="charactername">Thomasina:</dt>
<dd>Septimus, what is carnal embrace?</dd>
<dt class="charactername">Septimus:</dt>
<dd>Carnal embrace is the practice of throwing one’s arms around a side of beef.</dd>
</dl>
</div>
</div>
<ul>
<li>Possible values: <code>uppercase</code>, <code>lowercase</code>, <code>capitalize</code> (Title Caps)</li>
<li>Set to <code>uppercase</code> and reduce font size for mini-caps</li>
<li>Also, the <code>font-variant</code> property switches to (or poorly simulates) <span style="font-variant: small-caps">Small Caps</span></li>
<li>Good idea to letterspace all caps/faux small caps slightly
<ul>
<li>Increase at small sizes, decrease at large sizes</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>“Core” web fonts</h1>
<ul id="firstcol"></ul>
<ul id="secondcol"></ul>
<ul id="thirdcol"></ul>
<ul id="fourthcol"></ul>
<style type="text/css">
#firstcol, #secondcol, #thirdcol, #fourthcol {
float: left;
width: 22%;
font-size: 60%;
line-height: 100%;
}
</style>
<script type="text/javascript">
var injectWebFonts = function() {
[
'Arial Narrow',
'Arial Rounded MT',
'Baskerville Old Face',
'Bauhaus 93',
'Bell MT',
'Book Antiqua',
'Bookman Old Style',
'Bradley Hand ITC',
'Britannic Bold',
'Brush Script MT',
'Calibri',
'Calisto MT',
'Cambria',
'Candara',
'Century Gothic',
'Century Schoolbook',
'Colonna MT',
'Consolas',
'Constantia',
'Cooper Black',
'Copperplate Gothic Bold',
'Copperplate Gothic Light',
'Corbel',
'Curlz MT',
'Edwardian Script ITC',
'Engravers MT',
'Footlight MT Light',
'Franklin Gothic Book',
'Franklin Gothic Medium',
'Garamond',
'Gill Sans MT',
'Gill Sans Ultra Bold',
'Gloucester MT Extra Condensed',
'Goudy Old Style',
'Haettenschweiler',
'Harrington',
'Imprint MT Shadow',
'Lucida Bright',
'Lucida Calligraphy',
'Lucida Fax',
'Lucida Handwriting',
'Lucida Sans',
'Lucida Sans Typewriter',
'Lucida Sans Unicode',
'Mistral',
'Modern No. 20',
'MS Reference Sans Serif',
'Onyx',
'Palatino Linotype',
'Papyrus',
'Perpetua',
'Perpetua Titling MT',
'Playbill',
'Rockwell',
'Rockwell Extra Bold',
'Stencil',
'Tahoma',
'Tw Cen MT',
'Wide Latin'
].each(function(font, i) {
var id = ['firstcol', 'secondcol', 'thirdcol', 'fourthcol'][parseInt((i / 58) * 4)];
var li = $(document.createElement('li'));
var span = $(document.createElement('span'));
span.style.fontFamily = "'" + font + "'";
span.innerHTML = font;
li.appendChild(span);
// console.log(font);
$(id).appendChild(li);
});
};
document.observe('dom:loaded', injectWebFonts);
</script>
</div>
<div class="slide">
<h1>Font “stacks”: similar, consistent, cross-platform</h1>
<p class="description"><strong>Stack:</strong> A list of similar, cross-platform, fallback typefaces in order of preference</p>
<div class="example">
<pre class="examplecode css">
body {
font-family: Garamond, "Hoefler Text", "Times New Roman", Times, serif;
}
h2 {
font-family: Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
}
</pre>
</div>
<ul>
<li>Fonts can be wider/narrower, or appear taller/shorter than others at the same size.</li>
<li>Different fonts look better as body (paragraph) or display (header) text.</li>
<li>Stacks are carefully chosen to maximize readability and consistency across platforms.</li>
<li><a href="http://coding.smashingmagazine.com/2009/09/22/complete-guide-to-css-font-stacks/">More info and common stacks</a></li>
</ul>
</div>
<div class="slide">
<h1>CSS3 web fonts</h1>
<div class="example">
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100italic,700);
</style>
<pre class="examplecode css">
@font-face {
font-family: 'Josefin Sans'; font-style: italic; font-weight: 100;
src: local('Josefin Sans Thin Italic'), local('JosefinSans-ThinItalic'),
url('http://themes.googleusercontent.com/static/fonts/josefinsans/v1/s7-P1gqRNRNn-YWdOYnAOUU4uDXlcIT8_0bdRGwoYww.woff')
format('woff');
}
h2 {
font-family: 'Josefin Sans', sans-serif;
font-weight: 100;
font-style: italic;
}
</pre>
<div class="exampleoutput insertoutput">
<h2>Sphinx Letterpress</h2>
</div>
</div>
<ul>
<li>Browser compatibility varies; doing this safely is somewhat complicated. (Hint: use <a href="http://www.fontsquirrel.com/">FontSquirrel</a>)</li>
<li>Several web font linking services: <a href="http://typekit.com/">Typekit</a>, <a href="http://kernest.com/">Kernest</a>, <a href="http://www.google.com/webfonts">Google Web Fonts</a>, <a href="http://typotheque.com/">Typotheque</a></li>
<li>Services offer easy importing:
<pre class="examplecode css">@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100italic,700);</pre>
</li>
</ul>
</div>
<div class="slide">
<h1>CSS3 type effects</h1>
<div class="example">
<style type="text/css">
#type-effects {
text-align: center;
}
#type-effects h1 {
font-size: 72px !important;
letter-spacing: -3px;
line-height: .75 !important;
font-family: 'Open Sans' !important;
font-weight: 300 !important;
color: #484848 !important;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) !important;
background-color: #efefef;
height: 1em;
}
#type-effects h2 {
font-family: 'Josefin Sans';
text-shadow: rgba(0, 0, 0, .5) .25em .25em .25em;
-webkit-text-stroke: 1px red;
opacity: .5;
color: white;
margin: .5em 0;
}
</style>
<pre class="examplecode css">
h1 { color: #484848; <span class="comment">/* embossed look */</span>
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }
h2 { text-shadow: rgba(0, 0, 0, .5) .25em .25em .25em; <span class="comment">/* drop shadow */</span>
-webkit-text-stroke: 1px red; <span class="comment">/* outline */</span>
opacity: .5; <span class="comment">/* transparency */</span> }
</pre>
<div id="type-effects" class="exampleoutput">
<h1>Built for the Web</h1>
<h2>Sphinx Letterpress</h2>
</div>
</div>
<ul>
<li><a href="http://www.w3schools.com/cssref/css3_pr_text-shadow.asp"><code>text-shadow</code></a>: creates a drop shadow effect</li>
<li><a href="http://www.w3schools.com/cssref/css3_pr_text-shadow.asp"><code>-webkit-text-stroke</code></a> (Safari/Chrome only): creates a text outline</li>
<li><a href="http://www.w3schools.com/cssref/css3_pr_opacity.asp"><code>opacity</code></a>: transparency (0.0–1.0); can be applied to more than just type</li>
</ul>
</div>
<div class="slide">
<h1>More precise font-weights</h1>
<div class="example" style="float: left; width: 40%">
<style type="text/css">
#weight100 { font-weight: 100; }
#weight200 { font-weight: 200; }
#weight300 { font-weight: 300; }
#weight400 { font-weight: 400; }
#weight500 { font-weight: 500; }
#weight600 { font-weight: 600; }
#weight700 { font-weight: 700; }
#weight800 { font-weight: 800; }
#weight900 { font-weight: 900; }
.opensans { font-family: 'Open Sans', sans-serif }
/* .unavailableweight { color: red; }*/
</style>
<pre class="examplecode css">
strong {
font-family: 'Open Sans';
font-weight: 100;
}
</pre>
<div class="exampleoutput">
<div id="weight100" class="opensans unavailablewight">Open Sans 100 (*)</div>
<div id="weight200" class="opensans unavailablewight">Open Sans 200 (*)</div>
<div id="weight300" class="opensans">Open Sans 300</div>
<div id="weight400" class="opensans">Open Sans 400</div>
<div id="weight500" class="opensans unavailablewight">Open Sans 500 (*)</div>
<div id="weight600" class="opensans">Open Sans 600</div>
<div id="weight700" class="opensans">Open Sans 700</div>
<div id="weight800" class="opensans">Open Sans 800</div>
<div id="weight900" class="opensans unavailablewight">Open Sans 900 (*)</div>
</div>
</div>
<ul style="margin-left: 45%">
<li>Some fonts come in a wider range of weights than just <code>normal</code> and <code>bold</code>.</li>
<li>Can specify range from 100–900 (in increments of 100).</li>
<li>Browser will round to nearest available weight.
<ul>
<li>Algorithm for doing this varies a little across browsers.</li>
</ul>
</li>
</ul>
<p style="margin-left: 45%">(*) Not available; rounded to nearest available weight</p>
</div>
<div class="slide">
<h1>
Font sizes: How ems work
<small style="font-size: .5em; font-style: italic">(or, “Em Is For Math”)</small>
</h1>
<div class="example">
<pre class="examplecode css" style="float: left; width: 48%">
.before, .after {
margin: 0;
background-color: lightblue;
}
p {
font-size: 1em; <span class="comment">/* default */</span>
margin-top: 1em; <span class="comment">/* default */</span>
margin-bottom: 1em; <span class="comment">/* default */</span>
}
</pre>
<pre class="examplecode css" style="margin-left: 50%">
p, h2 {
line-height: 1em;
background-color: fuchsia;
}
h2 {
font-size: 1.5em; <span class="comment">/* default */</span>
<em>margin-top: 1em</em>;
<em>margin-bottom: 1em</em>;
}
</pre>
</div>
<div class="exampleoutput">
<div style="float: left; width: 48%">
<div style="background-color: lightblue; margin: 0">before</div>
<p style="font-size: 1em; margin: 1em 0; background-color: fuchsia; line-height: 1em;">Sphinx</p>
<div style="background-color: lightblue; margin: 0">after</div>
</div>
<div style="margin-left: 50%; width: 50%">
<div style="background-color: lightblue; margin: 0">before</div>
<p style="font-size: 1.5em; margin: 1em 0 1em; background-color: fuchsia; line-height: 1em;">Letterpress</p>
<div style="background-color: lightblue; margin: 0">after</div>
</div>
</div>
<ul>
<li><code>margin</code>, <code>width</code>, <code>border</code>, etc. specified in ems are relative to the <code>font-size</code> of that element.</li>
</ul>
</div>
<div class="slide">
<h1>
How ems work (cont’d)</small>
</h1>
<div class="example">
<pre class="examplecode css" style="float: left; width: 48%">
.before, .after {
margin: 0;
background-color: lightblue;
}
p {
font-size: 1em; <span class="comment">/* default */</span>
margin-top: 1em; <span class="comment">/* default */</span>
margin-bottom: 1em; <span class="comment">/* default */</span>
}
</pre>
<pre class="examplecode css" style="margin-left: 50%">
p, h2 {
line-height: 1em;
background-color: fuchsia;
}
h2 {
font-size: 1.5em; <span class="comment">/* default */</span>
<em>margin-top: 0.333em</em>; <span class="comment">/* = .5em/1.5em */</span>
<em>margin-bottom: 0.666em</em>; <span class="comment">/* = 1em/1.5em */</span>
}
</pre>
</div>
<div class="exampleoutput">
<div style="float: left; width: 48%">
<div style="background-color: lightblue; margin: 0">before</div>
<p style="font-size: 1em; margin: 1em 0; background-color: fuchsia; line-height: 1em;">Sphinx</p>
<div style="background-color: lightblue; margin: 0">after</div>
</div>
<div style="margin-left: 50%; width: 50%">
<div style="background-color: lightblue; margin: 0">before</div>
<p style="font-size: 1.5em; margin: .3333em 0 .6667em; background-color: fuchsia; line-height: 1em;">Letterpress</p>
<div style="background-color: lightblue; margin: 0">after</div>
</div>
</div>
<ul>
<li><code>margin: 1em</code> at <code>font-size: 1em</code> is equal to <code>margin: .6667em</code> at <code>font-size: 1.5em</code></li>
</ul>
</div>
<div class="slide">
<h1>Base font sizes & scales</h1>
<div class="example" style="float: left; width: 30%; margin-top: 1em">
<pre class="examplecode css">
body {
font-size: <em>62.5%</em>;
}
h2 {
font-size: <em>2em</em>;
}
</pre>
</div>
<ul style="margin-left: 35%">
<li>Best practice: specify base font size in %, then specify other sizes in ems or %.</li>
<li>
Pixels (e.g., <code>16px</code>) are still common but cause problems in mobile browsers
<ul>
<li>Points (<code>pt</code>) rarely used</li>
</ul>
</li>
</ul>
<p>Decide on a sequence (“scale”) of sizes:</p>
<ul>
<li>traditional:
<!-- <span style="font-size: 0.5833em">0.583</span> -->
<span style="font-size: 0.6667em">0.667</span>
<span style="font-size: 0.7500em">0.75</span>
<span style="font-size: 0.8333em">0.833</span>
<span style="font-size: 0.9167em">0.917</span>
<span style="font-size: 1.0000em">1.0</span>
<span style="font-size: 1.1667em">1.167</span>
<span style="font-size: 1.3333em">1.333</span>
<span style="font-size: 1.5000em">1.5</span>
<span style="font-size: 1.7500em">1.75</span>
<span style="font-size: 2.0000em">2.0</span>
<span style="font-size: 3.0000em">3.0</span>
<!-- <span style="font-size: 4.0000em">4.0</span> -->
<!-- <span style="font-size: 6.854em">6.854</span> -->
<!-- <span style="font-size: 11.089em">11.089</span> -->
</li>
<li>1:1.618 (golden ratio):
<!-- <span style="font-size: 0.090em">0.090</span> -->
<!-- <span style="font-size: 0.146em">0.146</span> -->
<!-- <span style="font-size: 0.236em">0.236</span> -->
<span style="font-size: 0.382em">0.382</span>
<span style="font-size: 0.618em">0.618</span>
<span style="font-size: 1.000em">1.000</span>
<span style="font-size: 1.618em">1.618</span>
<span style="font-size: 2.618em">2.618</span>
<span style="font-size: 4.236em">4.236</span>
<!-- <span style="font-size: 6.854em">6.854</span> -->
<!-- <span style="font-size: 11.089em">11.089</span> -->
</li>
<li><a href="http://modularscale.com/">Scale calculator</a>; <a href="http://lamb.cc/typograph/">scale designer</a></li>
</ul>
</div>
<!-- <div class="slide">
<h1>Italic vs. Oblique</h1>
<ul>
<li>Leading is measured from baseline to baseline.</li>
<li>The longer lines are, the more leading is required for readable text.
<ul>
<li>Rule of thumb: <code>line-height</code> ≈ <var>length of line</var> (in ems) × 5%</li>
<li>Increase leading for blacker faces, super/subscripts, and sans-serif fonts</li>
</ul>
</li>
</ul>
</div> -->
<!-- <div class="slide">
<h1>Horizontal and vertical alignment</h1>
<h2>Horizontal alignment:</h2>
<ul>
<li><code>text-align</code> (horizontal alignment) is <em>set</em> on block-level elements, but it <em>applies to</em> their inline content only</li>
<li>Auto margins center the block-level element itself (as long as an explicit width is set)</li>
</ul>
<h2>Vertical alignment:</h2>
<ul>
<li><code>vertical-align</code> aligns an <strong>inline element with respect to the line</strong></li>
<li>There’s <strong>no easy way</strong> to vertically align:
<ul>
<li>text within its containing block-level element</li>
<li>a block-level element within its containing block-level element</li>
</ul>
</li>
</ul>
</div> -->
<div class="slide">
<h1>Web typography articles</h1>
<ul>
<li>“<a href="http://informationarchitects.net/blog/the-web-is-all-about-typography-period/">Web Design is 95% Typography</a>” — <cite>iA</cite></li>
<li>“<a href="http://coding.smashingmagazine.com/2011/03/14/technical-web-typography-guidelines-and-techniques/">Technical Web Typography: Guidelines and Techniques</a>” — <cite>Smashing Magazine</cite></li>
<li>“<a href="http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/">Typographic Design Patterns and Best Practices</a>” — <cite>Smashing Magazine</cite></li>
<li><a href="http://www.alistapart.com/topics/design/typography/">Typography articles</a> at <a href="http://www.alistapart.com/">A List Apart</a></li>
<li>“<a href="http://www.smashingmagazine.com/smashing-book-1/typography-rules-guidelines-and-common-mistakes/">The Smashing Book – Typography: Rules, Guidelines and Common Mistakes</a>” — <cite>Smashing Magazine</cite></li>
</ul>
</div>
<div class="slide titleslide">
<h1>2. The <code>position</code> property</h1>
<ul>
<li>
1. Web typography
</li>
<li>
<strong>2. The <code>position</code> property</strong>
</li>
<li>
3. Layout techniques
</li>
</ul>
</div>
<div class="slide">
<h1>
The <a href="http://www.w3schools.com/css/pr_class_position.asp"><code>position</code></a> property
(<a href="http://www.w3schools.com/css/css_positioning.asp">examples</a>)
<span class="readingsection">(4.4.2)</span>
</h1>
<div class="example">
<pre class="examplecode css">
div#ad {
<em>position: absolute;</em> background-color: red;
right: 10%; top: 45%;
}
</pre>
<div class="exampleoutput insertoutput">
<div id="ad">Here I am!</div>
</div>
</div>
<table class="standard">
<tr>
<th>
property
</th>
<th>
value
</th>
<th>
description
</th>
</tr>
<tr>
<td rowspan="5">
<code>position</code>
</td>
</tr>
<tr>
<td>
<code>static</code>
</td>
<td>
default position
</td>
</tr>
<tr>
<td>
<code>relative</code>
</td>
<td>
offset from its normal static position
</td>
</tr>
<tr>
<td>
<code>absolute</code>
</td>
<td>
a fixed position <em>within its containing element</em>
</td>
</tr>
<tr>
<td>
<code>fixed</code>
</td>
<td>
a fixed position <em>within the browser window</em>
</td>
</tr>
<tr>
<td>
<a href="http://www.w3schools.com/css/pr_pos_top.asp"><code>top</code></a>,
<a href="http://www.w3schools.com/css/pr_pos_bottom.asp"><code>bottom</code></a>, <br />
<a href="http://www.w3schools.com/css/pr_pos_left.asp"><code>left</code></a>,
<a href="http://www.w3schools.com/css/pr_pos_right.asp"><code>right</code></a>
</td>
<td colspan="2">
positions of box's edges
</td>
</tr>
<tr>
<td>
<a href=""><code>z-index</code></a>
</td>
<td colspan="2">
"layer" (depth) on the page
</td>
</tr>
</table>
</div>
<div class="slide">
<h1>Absolute positioning</h1>
<pre class="examplecode css">
#menubar {
<em>position: absolute;</em>
left: 400px;
top: 50px;
}
</pre>
<div class="rightfigure">
<img src="../s5/images/absoluteposition.png" alt="absolute positioning" />
</div>
<ul>
<li>removed from normal document flow</li>
<li><code>top</code>, <code>bottom</code>, <code>left</code>, and <code>right</code> properties specify its new location</li>
<li>new location is relative to either:
<ul>
<li>the page (<em>body</em> tag), or</li>
<li>a relatively- or absolutely-positioned parent</li>
</ul>
</li>
<li>should usually specify a <code>width</code> as well</li>
</ul>
</div>
<div class="slide">
<h1>Relative positioning</h1>
<pre class="examplecode css" style="float: left; width: 45%">
#area2 {
<em>position: relative;</em>
left: 100px;
top: 50px;
}
</pre>
<pre class="examplecode css" style="float: left; width: 45%; margin-left: 5%">
#menubar {
position: absolute;
<em>left: 0px;</em>
<em>bottom: 0px;</em>
}
</pre>
<div class="rightfigure">
<img src="../s5/images/relativeposition.png" alt="absolute positioning" />
</div>
<ul style="clear: left">
<li>shifts the element relative to its default position</li>
<li>leaves empty space where the shape used to be; surrounding elements do not re-flow</li>
<li>also becomes the new bounding box for any absolutely-positioned children
<ul>
<li>most common use: don’t shift at all, just become a bounding box</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Fixed positioning</h1>
<div class="rightfigure">
<img src="../s5/images/fixedposition.png" alt="fixed positioning" />
</div>
<ul>
<li>removed from normal flow (like absolutely-positioned elements)</li>
<li>positioned relative to the browser window — <em>not the document</em>
<ul>
<li>
when the user scrolls the content, element will not move with it
</li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>Layering: the <a href="http://www.w3schools.com/cssref/pr_pos_z-index.asp"><code>z-index</code></a> property</h1>
<pre class="examplecode css" style="float: left; width: 45%">
#area2 {
position: absolute;
left: 100px;
top: 50px;
<em>z-index: 1;</em>
}
</pre>
<pre class="examplecode css" style="float: left; width: 45%; margin-left: 5%">
#menubar {
position: absolute;
left: 200px;
top: 100px;
<em>z-index: 5;</em>
}
</pre>
<div class="rightfigure">
<img src="../s5/images/zindex.png" alt="z-index" />
</div>
<ul style="clear: left;">
<li>adjusts the depth order (“layer”) of an absolutely/relatively/fixed-positioned element</li>
<li>elements of higher z-index will appear “in front of” elements with lower z-index that they overlap</li>
</ul>
</div>
<!-- <div class="slide">
<h1>Interactive example: the <code>position</code> property</h1>
<style type="text/css">
#position-container p {
background-color: lightgray;
}
#position-example-a {
background-color: orange;
}
#position-example-b {
background-color: lightblue;
}
</style>
<div id="position-container">
<div id="position-example-a">
div a
<div id="position-example-b">
div b
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lectus est, convallis vel suscipit a, hendrerit eget sem. Fusce in enim libero, in egestas ipsum. Fusce non sapien quis erat suscipit laoreet. Nulla eu malesuada felis. Aenean mollis rhoncus augue ac consectetur. Sed vitae urna est, in tempus diam. Aliquam erat volutpat. Nulla tincidunt, sapien id porttitor feugiat, justo magna egestas lacus, vel euismod ante nunc id massa. Vivamus in lectus sed leo lobortis eleifend.</p>
<p>Phasellus augue enim, malesuada eu tincidunt elementum, pellentesque ut dui. Aenean nec mauris eget nisl ornare condimentum. Vivamus tellus sapien, faucibus quis ultrices in, suscipit id sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec aliquet, nisl mollis fringilla elementum, risus ligula vehicula purus, non fermentum nisl nisl at massa. Vestibulum semper, nibh lobortis congue cursus, odio elit auctor sapien, at auctor enim mauris in dolor. In varius iaculis convallis.</p>
<p>Pellentesque cursus nisi id turpis fringilla feugiat. Ut eu massa vel turpis dignissim sagittis. Nam eget turpis augue. Morbi massa mauris, tincidunt sodales tristique et, ultricies et elit. Integer mi tellus, scelerisque vitae dignissim nec, cursus non elit. Duis auctor, est at posuere pulvinar, magna leo aliquet felis, ac consectetur elit lacus ut nunc. Donec mollis nisl nec sapien pharetra ullamcorper et id mauris. Nam risus libero, tristique in tempor vel, gravida ac erat. Nunc eleifend pretium semper. Donec porta nunc sed lorem vehicula placerat. Sed vel elit metus. Sed tristique, lacus sed consequat hendrerit, sem dui lobortis purus, eu pellentesque sapien enim vel metus. Morbi vestibulum magna quis diam tincidunt ut consequat risus euismod. Nulla in orci non nisl egestas tincidunt. Duis eu justo est.</p>
</div>
</div> -->
<!-- <div class="slide">
<h1>HTML tables:
<a href="http://www.w3schools.com/tags/tag_table.asp"><code><table></code></a>,
<a href="http://www.w3schools.com/tags/tag_tr.asp"><code><tr></code></a>,
<a href="http://www.w3schools.com/tags/tag_td.asp"><code><td></code></a>
<span class="readingsection">(2.2.2)</span>
</h1>
<p class="description">
A 2D table of rows and columns of data (block element)
</p>
<div class="example">
<pre class="examplecode html">
<table>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>
</pre>
<div class="exampleoutput">
<table>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>
</div>
</div>
<ul>
<li><code>table</code> defines the overall table, <code>tr</code> each row, and <code>td</code> each cell's data</li>
<li>tables are useful for displaying large row/column data sets</li>
<li>
NOTE: tables are sometimes used by novices for web page layout, but this is not proper semantic HTML and should be avoided
</li>
</ul>
</div>
<div class="slide">
<h1>Table headers, captions:
<a href="http://www.w3schools.com/tags/tag_th.asp"><code><th></code></a>,
<a href="http://www.w3schools.com/tags/tag_caption.asp"><code><caption></code></a>
</h1>
<div class="example">
<pre class="examplecode html">
<table>
<em><caption></em>My important data<em></caption></em>
<tr><em><th></em>Column 1<em></th></em><em><th></em>Column 2<em></th></em></tr>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>
</pre>
<div class="exampleoutput">
<table>
<caption>My important data</caption>
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>
</div>
</div>
<ul>
<li><code>th</code> cells in a row are considered headers; by default, they appear bold</li>
<li>a <code>caption</code> at the start of the table labels its meaning</li>
</ul>
</div>
<div class="slide">
<h1>
Styling tables
<span class="readingsection">(3.2.6)</span>
</h1>
<div class="example">
<pre class="examplecode css">
table { border: 2px solid black; caption-side: bottom; }
tr { font-style: italic; }
td { background-color: yellow; text-align: center; width: 30%; }
</pre>
<div class="exampleoutput insertoutput">
<table>
<caption>My important data</caption>
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>1,1</td><td>1,2 okay</td></tr>
<tr><td>2,1 real wide</td><td>2,2</td></tr>
</table>
</div>
</div>
<ul>
<li>all standard CSS styles can be applied to a table, row, or cell</li>
<li>table specific CSS properties:
<ul>
<li><a href="http://www.w3schools.com/css/pr_tab_border-collapse.asp"><code>border-collapse</code></a>, <a href="http://www.w3schools.com/css/pr_tab_border-spacing.asp"><code>border-spacing</code></a>, <a href="http://www.w3schools.com/css/pr_tab_caption-side.asp"><code>caption-side</code></a>, <a href="http://www.w3schools.com/css/pr_tab_empty-cells.asp"><code>empty-cells</code></a>, <a href="http://www.w3schools.com/css/pr_tab_table-layout.asp"><code>table-layout</code></a></li>
</ul>
</li>
</ul>
</div>
<div class="slide">
<h1>The <a href="http://www.w3schools.com/css/pr_tab_border-collapse.asp"><code>border-collapse</code></a> property</h1>
<pre class="examplecode css">
table, td, th { border: 2px solid black; }
table { <em>border-collapse: collapse;</em> }
</pre>
<div class="bordered" style="float: left">
<table>
<caption>Without <code>border-collapse</code></caption>
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>1,1</td><td>1,2</td></tr>
<tr><td>2,1</td><td>2,2</td></tr>
</table>
</div>
<div class="bordered" style="float: right">
<table style="border-collapse: collapse">
<caption>With <code>border-collapse</code></caption>
<tr><th>Column 1</th><th>Column 2</th></tr>
<tr><td>1,1</td><td>1,2</td></tr>
<tr><td>2,1</td><td>2,2</td></tr>
</table>
</div>
<ul style="clear: both; padding-top: 20px;">
<li>by default, the overall table has a separate border from each cell inside</li>
<li>the <code>border-collapse</code> property merges these borders into one</li>
</ul>
</div>
<div class="slide">
<h1>The <code>rowspan</code> and <code>colspan</code> attributes</h1>
<div class="example">
<pre class="examplecode html">
<table>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><td <em>colspan="2"</em>>1,1-1,2</td>
<td <em>rowspan="3"</em>>1,3-3,3</td></tr>
<tr><td>2,1</td><td>2,2</td></tr>
<tr><td>3,1</td><td>3,2</td></tr>
</table>
</pre>
<div class="exampleoutput insertoutput bordered"></div>
</div>
<ul>
<li><code>colspan</code> makes a cell occupy multiple columns; <code>rowspan</code> multiple rows</li>
<li><code>text-align</code> and <code>vertical-align</code> control where the text appears within a cell</li>
</ul>
</div>
<div class="slide">
<h1>Column styles:
<a href="http://www.w3schools.com/tags/tag_col.asp"><code><col></code></a>,
<a href="http://www.w3schools.com/tags/tag_colgroup.asp"><code><colgroup></code></a>
</h1>
<div class="example">
<pre class="examplecode html">
<table>
<em><col class="urgent" />
<colgroup class="highlight" span="2"></colgroup></em>
<tr><th>Column 1</th><th>Column 2</th><th>Column 3</th></tr>
<tr><td>1,1</td><td>1,2</td><td>1,3</td></tr>
<tr><td>2,1</td><td>2,2</td><td>2,3</td></tr>
</table>
</pre>
<style type="text/css">
.urgent {
background-color: pink;
}
.highlight {
background-color: yellow;
}
</style>
<div class="exampleoutput insertoutput bordered"></div>
</div>
<ul>
<li><code>col</code> tag can be used to define styles that apply to an entire column (self-closing)</li>
<li><code>colgroup</code> tag applies a style to a group of columns (NOT self-closing)</li>
</ul>
</div> -->
<!-- <div class="slide">
<h1>Don't use tables for layout!</h1>
<ul>
<li>(borderless) tables appear to be an easy way to achieve grid-like page layouts
<ul>
<li>many "newbie" web pages do this (including many UW CSE web pages...)</li>
</ul>
</li>
<li>but, a <code>table</code> has semantics; it should be used only to represent an actual table of data</li>
<li>instead of tables, use <code>div</code>s, widths/margins, floats, etc. to perform layout</li>
</ul>
<hr />
<ul style="margin-top: 2em">
<li>tables should not be used for layout!</li>
<li class="incremental" style="font-size: 120%">Tables should not be used for layout!!</li>
<li class="incremental" style="font-size: 140%">TABLES SHOULD NOT BE USED FOR LAYOUT!!!</li>
<li class="incremental" style="font-size: 180%; text-decoration: blink;"><strong>TABLES</strong> SHOULD <strong>NOT</strong> BE USED FOR <strong>LAYOUT</strong>!!!!</li>
</ul>
</div> -->
<!-- <div class="slide">
<h1>Morphing to table elements</h1>
<div class="example">
<pre class="examplecode html">
<ul id="requirements">
<li>more cowbell</li>
<li id="lovin">your lovin’</li>
<li>to get out of this place if it’s the last thing I ever do</li>
</ul>
</pre>
<pre class="examplecode css" style="float: left; width: 45%;">
#requirements { <em>display: table-row;</em> }
#requirements li {
<em>display: table-cell;</em>
width: 4em;
<em>vertical-align: middle;</em>
border: solid 1px black;
}
#lovin { <em>vertical-align: bottom;</em> }
</pre>
<div class="exampleoutput insertoutput" style="margin-left: 55%; clear: none"></div>
</div>
<ul>
<li>values: <code>table</code>, <code>inline-table</code>, <code>table-row</code>, <code>table-cell</code>, <code>table-header</code>, etc.</li>
<li>can make any element behave like parts of a table
<ul>
<li>allows for true vertical alignment with <code>vertical-align: top</code>/<code>bottom</code>/<code>middle</code></li>
</ul>
</li>
<li>they aren’t <em>semantically</em> parts of a table—they just <em>appear</em> as though they are!</li>
</ul>
</div> -->
<!-- absolute pos and 100% body size -->
<div class="slide">
<h1>Showing/hiding an element</h1>
<div class="example">
<pre class="examplecode css" style="float: left; width: 48%">
p.secret {
<span class="comment">/* still there! just invisible */</span>
<em>visibility: hidden;</em>
}
</pre>
<pre class="examplecode css" style="margin-left: 50%">
p.nonexistent {
<span class="comment">/* like it never existed */</span>
<em>display: none;</em>
}
</pre>
<div class="exampleoutput insertoutput">
<p class="secret" style="visibility: hidden">
Since nobody can see this anyway: ca-ca poo-poo pee-pee!!!
</p>
</div>
</div>
<table class="standard">
<tr>
<th>
property
</th>
<th>
description
</th>
</tr>
<tr>
<td>
<a href="http://www.w3schools.com/css/pr_class_visibility.asp"><code>visibility</code></a>
</td>
<td>
sets whether an element should be visible on screen; <br />
can be <code>visible</code> (default) or <code>hidden</code>
</td>
</tr>
<tr>
<td>
<code>display: none</code>
</td>
<td>
sets whether an element is in the document flow
</td>
</tr>
</table>
<ul>
<li><code>hidden</code> elements are not removed from the document
<ul>
<li>leave an empty “gap” on screen (it’s there, it’s just invisible!)</li>
</ul>
<li>elements with <code>display: none</code> are completely removed from the document; other elements re-flow</li>
</ul>
</div>
<div class="slide titleslide">
<h1>3. Layout techniques</h1>
<ul>
<li>
1. Web typography
</li>
<li>
2. The <code>position</code> property
</li>
<li>
<strong>3. Layout techniques</strong>
</li>
</ul>
</div>
<div class="slide">
<h1>Alignment vs. float vs. position vs. display</h1>
<ol>
<li>if possible, lay out an element by <em>aligning</em> its content
<ul>
<li>horizontal alignment: <code>text-align</code>
<ul>
<li>set this on a block element; it aligns the content within it (not the block element itself)</li>
</ul>
</li>
</ul>
</li>
<li>if alignment won't work, try <em>floating</em> the element</li>
<li>if floating won't work, try <em>positioning</em> the element
<ul>
<li>absolute/fixed positioning are a last resort and should not be overused</li>
</ul>
</li>
<li>if alignment won't work, try <em>morphing</em> the element (using <code>display</code>)
<ul>
<li>vertical alignment: change a container to be <code>display: table-cell</code>, then set <code>vertical-align</code> within it</li>
</ul>
</li>
</ol>
</div>
<div class="slide">
<h1>Types of layout designs</h1>
<ol>
<li><strong>Fixed:</strong> static pixel- or em- widths for everything
<ul>
<li>doesn’t change size when window resized (ex: Facebook, Twitter)</li>
</ul>
</li>
<li><strong>Fluid (“liquid”):</strong> percentage widths for everything
<ul>
<li>always changes size when window resized (rarely used in pure form)</li>
</ul>
</li>
<li><strong>Fixed–fluid hybrid:</strong> percentage widths for some things, fixed for others
<ul>
<li>most adaptive to different sizes</li>
<li>most attractive in all circumstances</li>
<li>most complex!</li>
<!-- <li>example: <a href="http://mozilla.com/">Mozilla.com</a></li> -->
</ul>
</li>
</ol>
</div>
<div class="slide">
<h1>Grid-based design</h1>
<div style="float: left;"><img src="images/nytimes-grid.jpg" alt="New York Times grid" /></div>
<ul style="margin-left: 400px;">
<li>the <em>grid</em> is a classical design principle</li>
<li>structures content in a visually appealing, organized way</li>
<li>allows for flexibility within a structure</li>
<li>examples:
<ul>
<li><a href="http://www.subtraction.com/">subtraction.com</a></li>
<li><a href="http://www.nytimes.com/">nytimes.com</a></li>
<li><a href="http://www.wired.com/">newsvine.com</a></li>
</ul>
</li>
<li><a href="http://www.webdesignerdepot.com/2011/03/web-culture-grid-based-layout-designs/">more about web-based grids</a></li>
<li>CSS grid frameworks: <a href="http://960.gs/">960.gs</a>, <a href="http://www.blueprintcss.org/">Blueprint</a></li>
</ul>
</div>
<div class="slide">
<h1>Hybrid fixed-fluid designs</h1>
<ul>
<li>use percent-widths to establish floated column <em>containers</em> that add up to exactly 100%</li>
<li>within each container, a <code>div</code> with fixed margins or padding
<ul>
<li>content area of these will be (<var>x</var>% − fixed spacing)</li>
</ul>
</li>
<li>can have several layers of nesting
<ul>
<li>three-column layouts: containers, wrappers, etc.</li>
</ul>
</li>
</ul>
</div>
<!--#include virtual="../s5/commonbottom.html" -->