CSE 154 Extra Sessions

Lecture 1: Typography; Transitions; Responsive Web Design

Reading:

• Web Design is 95% Typography
• The Smashing Book: Typography Rules, Guidelines & Common Mistakes
  Part 1, Part 2, Part 3, Part 4
• CSS Transitions, Transforms, and Animation Tutorial
• Responsive Web Design: What It Is and How To Use It

Except where otherwise noted, the contents of this document are Copyright 2012–2013 Morgan Doocy. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Line spacing (“leading”): line-height

p {
font-size: 18px;
line-height: 3em;
}

• Leading is measured from baseline to baseline.
• The longer lines are, the more leading is required for readable text.
  • Rules of thumb: line-height ≈ length of line (in ems) × 5% ≈ size of body font (in ems) × 1.5
• Control line length (“measure”) by setting a width on the containing element
  • Good line length: ~28em (25–33 times the base font size)

More CSS properties for text (3.1.6)

Anatomy of type

• Typefaces can be serifed (with flourished “feet”) or sans-serif (without)
  • Serifed fonts are more legible at smaller sizes
  • Sans-serif is better for display (=header) fonts
• A taller x-height often leads to greater readability

The vertical-align property

Sphinx þ

Letter & word spacing

h1 { font-size: 5em; word-spacing: -.05em; letter-spacing: -.05em; }
h2 { letter-spacing: .03em; word-spacing: -.075em; }
abbr { font-size: 80%; letter-spacing: .075em; }

• Larger and smaller type sometimes benefits from letter- and word-spacing adjustments.
• Very slight! Usually ≤ .1 em. (Use Firebug to toggle these and see the improvement!)

Hanging indentation: The text-indent property

p {
text-indent: 2em;
margin: 0;
}

p:first-child {
text-indent: 0;
}

• Indents only the first line of text in a block-level element
• Use either text-indent or margin-top/margin-bottom (never both!)
  • If you use text-indent, don’t indent the first paragraph in each section.
  • If you use vertical margin spacing, default is 1em; ideal is line height × 75%.

Capitalization: The text-transform property

dt.charactername {
text-transform: uppercase;
font-size: .8em;
letter-spacing: .075em;
}

• Possible values: uppercase, lowercase, capitalize (Title Caps)
• Set to uppercase and reduce font size for mini-caps
• Also, the font-variant property switches to (or poorly simulates) Small Caps
• Good idea to letterspace all caps/faux small caps slightly
  • Increase at small sizes, decrease at large sizes

“Core” web fonts

Font “stacks”: similar, consistent, cross-platform

Stack: A list of similar, cross-platform, fallback typefaces in order of preference

body {
font-family: Garamond, "Hoefler Text", "Times New Roman", Times, serif;
}
h2 {
font-family: Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif;
}

• Fonts can be wider/narrower, or appear taller/shorter than others at the same size.
• Different fonts look better as body (paragraph) or display (header) text.
• Stacks are carefully chosen to maximize readability and consistency across platforms.
• More info and common stacks

CSS3 web fonts

@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;
}

• Browser compatibility varies; doing this safely is somewhat complicated. (Hint: use FontSquirrel)
• Several web font linking services: Typekit, Kernest, Google Web Fonts, Typotheque
• Services offer easy importing:

  @import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100italic,700);

CSS3 type effects

h1 { color: #484848; /* embossed look */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }
h2 { text-shadow: rgba(0, 0, 0, .5) .25em .25em .25em; /* drop shadow */
  -webkit-text-stroke: 1px red; /* outline */
  opacity: .5; /* transparency */ }

• text-shadow: creates a drop shadow effect
• -webkit-text-stroke (Safari/Chrome only): creates a text outline
• opacity: transparency (0.0–1.0); can be applied to more than just type

More precise font-weights

strong {
font-family: 'Open Sans';
font-weight: 100;
}

• Some fonts come in a wider range of weights than just normal and bold.
• Can specify range from 100–900 (in increments of 100).
• Browser will round to nearest available weight.
  • Algorithm for doing this varies a little across browsers.

(*) Not available; rounded to nearest available weight

Font sizes: How ems work (or, “Em Is For Math”)

.before, .after {
margin: 0;
background-color: lightblue;
}
p {
font-size: 1em;      /* default */
margin-top: 1em;     /* default */
margin-bottom: 1em;  /* default */
}

p, h2 {
line-height: 1em;
background-color: fuchsia;
}
h2 {
font-size: 1.5em;       /* default */
margin-top: 1em;
margin-bottom: 1em;
}

• margin, width, border, etc. specified in ems are relative to the font-size of that element.

How ems work (cont’d)

.before, .after {
margin: 0;
background-color: lightblue;
}
p {
font-size: 1em;      /* default */
margin-top: 1em;     /* default */
margin-bottom: 1em;  /* default */
}

p, h2 {
line-height: 1em;
background-color: fuchsia;
}
h2 {
font-size: 1.5em;       /* default */
margin-top: 0.333em;    /* = .5em/1.5em */
margin-bottom: 0.666em; /* = 1em/1.5em */
}

• margin: 1em at font-size: 1em is equal to margin: .6667em at font-size: 1.5em

Base font sizes & scales

body {
font-size: 62.5%;
}
h2 {
font-size: 2em;
}

• Best practice: specify base font size in %, then specify other sizes in ems or %.
• Pixels (e.g., 16px) are still common but cause problems in mobile browsers
  • Points (pt) rarely used

Decide on a sequence (“scale”) of sizes:

• traditional: 0.667 0.75 0.833 0.917 1.0 1.167 1.333 1.5 1.75 2.0 3.0
• 1:1.618 (golden ratio): 0.382 0.618 1.000 1.618 2.618 4.236
• Scale calculator; scale designer

Web typography articles

• “Web Design is 95% Typography” — iA
• “Technical Web Typography: Guidelines and Techniques” — Smashing Magazine
• “Typographic Design Patterns and Best Practices” — Smashing Magazine
• Typography articles at A List Apart
• “The Smashing Book – Typography: Rules, Guidelines and Common Mistakes” — Smashing Magazine

CSS3 Special Effects

Upcoming CSS3 standard includes features for affine transformations and animation.

• Transforms
  • Complete affine transformations: rotate, scale, reflect, skew
  • 2– and 3–dimensional transformations
• Transitions
  • Animation (“tweening”) between an initial and final state, triggered when state changes
• Animations
  • More complex animations with more states, without needing to be triggered
  • Sometimes needed to do something transitions can’t
  • (We won’t cover animations here)

CSS3 Transforms: The transform property

selector {
-webkit-transform: function1, function2, ...;
-moz-transform: function1, function2, ...;
-ms-transform: function1, function2, ...;
-o-transform: function1, function2, ...;
transform: function1, function2, ...;
}

• functions cover most of the affine 2-D or 3-D transformations:
  • translate, rotate, scale, skew
  • (covers reflection via a 3D rotation effect)
• due to unfinished standard, basic transform property does not work in most browsers
  • must specify custom properties with prefixes for each browser instead: -webkit, -moz, -o, -ie
  • Nifty time-saving tool

Translation: The translate function

selector {
-prefix-transform: translate(x-dimension, y-dimension);
}

#original, #transformed { position: absolute; left: 0; }
#transformed {
/* (browser-prefixed properties omitted) */
transform: translate(50px, 25%);
}

• shifts the object by x-dimension and y-dimension
• usual CSS dimension units: pt, px, %, em, in, etc.
• can be positive or negative
• roughly equivalent to position: absolute;
left: x-dimension; top: y-dimension;
• MUST include all browser-prefixed properties to work

Scaling: The scale function

selector {
-prefix-transform: scale(x-factor, y-factor);
}

#transformed {
/* (browser-prefixed properties omitted) */
transform: scale(.5, 1.25);
}

• scales the object by x-factor along x-axis and y-factor along y-axis
• factor is decimal scalar, 1.0 = 100%, 0.5 = 50%, etc.
• scales borders and inner contents too!
• content still selectable!

Rotation: The rotate function

selector {
-prefix-transform: rotate(angle);
}

#transformed {
/* (browser-prefixed properties omitted) */
transform: rotate(30deg);
}

• rotates the object by angle (can be negative)
• must include units of deg, grad, rad, or turn
• content still selectable!

Skew/shear: The skew function

selector {
-prefix-transform: skew(x-angle, y-angle);
}

#transformed {
/* (browser-prefixed properties omitted) */
transform: skew(-45deg, 10deg);
}

• skews the object by x-angle along the x-axis, and by y-angle along the y-axis
• must include units of deg, grad, rad, or turn
• skews borders and contents too!
• content still selectable!

Moving the origin: transform-origin

selector {
-prefix-transform-origin: x-dimension y-dimension;
}

#transformed {
/* (browser-prefixed properties omitted) */
transform-origin: left bottom;
transform: rotate(-75deg);
}

• moves the origin (0,0) to a different location
• affects the way all transform functions are applied
• dimensions can be usual dimensions (pt, px, %, etc.) or a keyword: left/center/right, top/center/bottom
• default: 50% 50% (= center center)

3D Transforms

In recent & upcoming browsers, can specify 3-dimensional transforms:

• rotation around X and Y axes (in addition to the usual 2D rotation, which is around the Z axis)
• translation and scale along Z-axis as well
• perspective distortion

Interactive examples:

• WestCiv 3D Transforms
• How to Use Transforms (see sections “3D Examples” and “A cube made with 3d transforms”)

3D Rotation: X and Y axes

selector {
-prefix-transform: rotateX(angle);
-prefix-transform: rotateY(angle);
}

#transformedX {
/* (browser-prefixed properties omitted) */
transform: rotateX(30deg);
}
#transformedY {
/* (browser-prefixed properties omitted) */
transform: rotateY(-45deg);
}

• rotates the object by angle (can be negative); include units of deg, grad, rad, or turn
• notice the planes intersecting!

3D Translation & Scale

selector {
-prefix-transform: translateZ(dimension);
-prefix-transform: scaleZ(factor);
}

#translatedZ {
/* (browser-prefixed properties omitted) */
transform: translateZ(-5em);
}
#scaledZ {
/* (browser-prefixed properties omitted) */
transform: rotateY(-45deg)
          scaleZ(.1) translateZ(100em);
}

• translateZ alters “depth” or distance from viewer (distance from origin if rotated)
• scaleZ primarily affects scale of translateZ dimensions (.1 × 100em = 10em)

3D Perspective Distortion

selector {
-prefix-perspective: pixels;
}

/* (browser-prefixed properties omitted) */
#container {
border: solid 2px blue;
background-color: gray;
perspective: none50000px2000px800px200px;
}
#transformed {
transform: rotateY(-45deg) translateZ(-5em);
}

• alters “camera distance” from object, which affects perception of depth
• affects the perspective of child elements only, so set this property on a parent

CSS3 Transitions: the transition property

selector {
-prefix-transition: property duration timing function delay;
}

/* (browser-prefixed properties omitted) */
#transformed {
transform: rotate(-45deg);
transition: transform 2s ease-in-out,
           background-color .5s ease 2s;
}
#transformed:hover {
font-size: 200%;
background-color: blue;
transform: rotate(10deg) scale(1.5);
}

• Whenever the specified properties change, they’ll be animated.
• Can specify multiple properties, separated by comma.
  • ONLY specified properties will be animated (e.g., font-size is not animated above)

Transition Timing Functions

The timing function specifies how the transition will speed up and slow down across its lifecycle.

Where to specify transitions?

#foo {
width: 5em; height: 5em;
transition: width 1s ease, height 1s ease,
            font-size 1s ease;
}
.enlarged {
width: 7.5em; height: 7.5em;
font-size: 1.5em;
}

$(document).ready(function() {
$('#foo').click(function() {
$(this).addClass('enlarged');
});
});

• Specify transitions on the element whose properties will eventually change.
  • Says, “When these properties of mine change, animate the transition.”
  • In this example, adding the class changes the specified properties, so the transition is animated.

Other transition options

#foo, #bar {
transition: transform 1s ease;
transform-style: preserve-3dflat;
}
#foo:hover, #bar:hover {
transform: rotateY(-135deg);
}
#bar {
backface-visibility: hidden;
}

• transform-style changes whether children are rendered in 2D or 3D
  • Another demo of this (Safari/Chrome only, due to next-generation “slider” control)
• backface-visibility changes whether an element is visible from behind
• Both of these must also be browser-prefixed
  • BUG: Prefixr doesn’t browser-prefix backface-visibility, but it needs to be.

Proper browser-prefixing

#foo {
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-ms-transition: -ms-transform 1s ease;
-o-transition: -o-transform 1s ease;
transition: transform 1s ease;
}

#foo.altered {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

$('#foo').parent().css({
'-webkit-perspective': '600px',
'-moz-perspective': '600px',
'-ms-perspective': '600px',
'-o-perspective': '600px',
'perspective': '600px'
});

• Browser-prefixing of transform inside transition must match that of transition.
• When setting styles in JavaScript, don’t forget to set browser-prefixed properties!

Mobile device web traffic

• Mobile devices now make up 20% of all web traffic
  • Tablets: 5.6%
    (95–98% iPad)
  • Phones: 14.6%
    (72% iPhone, 26% Android)
• UI needs are different at smaller screen sizes:
  • Larger tap area for links/buttons
  • Hidden-away navigation leaves room for more content
  • Only enough room for a single column of information
• How do we accommodate smaller screen sizes?

Mobifying layouts: “Responsive” web design

Layouts that adjust themselves (“respond”) to optimize for screen size

• Make your site always look good — no matter what screen size!
• Degrade gracefully in older or less-sophisticated browsers
• Use CSS3 Media Queries to apply different styles at different sizes
• Site design can change dramatically with size. Examples:
  • mediaqueri.es
  • 20 Best Responsive Web Design Examples of 2012 (SocialDriver)
• Replaces redundant “mobile site” approach, which adds another page to maintain

Fluid columns example

/* Three-column fluid layout with gutters */
/* 32% + 2% + 32% + 2% + 32% = 100% */
.col { float: left; width: 32%; margin-right: 2% }
/* remove extra 2% at right of every 3rd column */
.col:nth-child(3n) { margin-right: 0; }

• Notice the fencepost problem: Spacing goes between columns
  • n − 1 spaces (“gutters”) for n columns
• Nice, but…
  • At small sizes, gutters get too cramped; at larger sizes, too wide
  • At small sizes, columns get too narrow (line lengths too short); at larger sizes, get too wide/long

Adapting with CSS3 Media Queries

<head>
...
<link rel="stylesheet" href="default.css" type="text/css" media="screen">
<link rel="stylesheet" href="mobile.css" type="text/css" media="screen and (max-width: 800px)">
<link rel="stylesheet" href="large.css" type="text/css" media="screen and (min-width: 1200px)">
...
</head>

/* default.css - 3-column */
.col { float: left; width: 32%; margin: 0 2% 1em 0; }
.col:nth-child(3n) { margin-right: 0 }

/* mobile.css - switch to 2-column */
.col { width: 48%; margin-right: 4%; } /* 48% + 4% + 48% = 100% */
.col:nth-child(3n) { margin-right: 4% } /* "undo" the 3n rule from default.css */
.col:nth-child(2n) { margin-right: 0 }

Responsive Techniques

• Reduce/add number of columns as size shrinks/grows
• Un-float elements to make them stack
• Calculate widths of columns and gutters based on some fixed size. Ex:
  3 × 300px + 2 × 20px = 940px
  Columns: 300px / 940px = 31.91489%
  Gutters: 20px / 940px = 2.12766%
• Common stop points:

  240px	320px	480px	768px	1024px	1200px
  small phone	iPhone portrait	iPhone landscape small tablet portait	iPad portrait	iPad landscape standard desktop	wide desktop

Use case: Dropdown navigation

<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 value="/">Home</option>
   <option value="/blog/">Blog</option>
   <option value="/about/">About</option>
</select>
</nav>

/* default.css */
nav ul     { display: block; }
nav select { display: none; }

/* mobile.css */
nav ul     { display: none; }
nav select { display: block; }

// scripts.js
// handle dropdown nav using JS
$('nav select').change(function() {
window.location = this.value;
});

• Use Media Queries to show/hide select dropdown at smaller sizes
• Use JS to handle changes to the dropdown menu, and change the window.location to manually navigate