Photo: Jakub Solovský https://flic.kr/p/i1RRZm

Designing Responsive WebsitesClarissa Peterson ✦ @clarissa

A hands-on workshop at EuroIA ✦ 27 Sept. 2014

How to download files or view example pages

The white slides with purple text at the top are where we did hands-on coding examples in the workshop.

If you want to follow along and edit the files in your text editor, go to this URL and click on “download all files.” Otherwise, you can view each example file from the same URL.

www.clarissapeterson.com/files/euroia/

What is responsive design?

Flexible

Photo: Mike Mozard https://flic.kr/p/jXxfeF

http://www.bostonglobe.com/

http://www.bostonglobe.com/

http://www.bostonglobe.com/

http://www.bostonglobe.com/

Adjustable

Photo: William Warbyhttps://flic.kr/p/j9KrpA

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.bostonglobe.com/

http://www.bostonglobe.com/

http://www.bostonglobe.com/

http://www.bostonglobe.com/

http://www.bostonglobe.com/

Partially responsive

http://www.apple.com

http://www.apple.com

http://www.apple.com

http://www.apple.com

http://www.apple.com

http://lrmc.com/

http://lrmc.com/

http://lrmc.com/

http://lrmc.com/

http://lrmc.com/

Photo: Mo Riza https://flic.kr/p/ca1kU

Photo: Luke Wroblewski https://flic.kr/p/gTH5oL

Photo: Luke Wroblewski https://flic.kr/p/gTH5oL

Photo: Kārlis Dambrāns https://flic.kr/p/oq2r8z

Photo: Rob DiCaterino https://flic.kr/p/5yk9cA

Photo: Kārlis Dambrāns https://flic.kr/p/f1oriS

Photo: Sean MacEntee https://flic.kr/p/bR4vGi

Photo: Kārlis Dambrāns https://flic.kr/p/oBTNuP

Photo: Rodrigo Senna https://flic.kr/p/4oVCo

Photo: William Hook https://flic.kr/p/4FGx7a

Photo: Kārlis Dambrāns https://flic.kr/p/gFgXfS

Photo: Kārlis Dambrāns https://flic.kr/p/mw5wzT

Photo: Matthew Pearce https://flic.kr/p/aAJin6

http://www.microsoft.com/en-us/default.aspx

http://www.microsoft.com/en-us/default.aspx

http://www.microsoft.com/en-us/default.aspx

http://www.microsoft.com/en-us/default.aspx

How responsive design works

All Devices

Photo: Brad Frost https://flic.kr/p/cfQwL7

Range of phone sizes

Source: http://opensignal.com/reports/fragmentation.php

Photo: Kārlis Dambrāns https://flic.kr/p/iqj7yP

Photo: Kārlis Dambrāns https://flic.kr/p/gmQupy

Flexible

Photo: Horia Varlan https://flic.kr/p/7XrUY1

article { width: 100%; }

div { margin: 0 10%; }

img { max-width: 100%; }

http://www.worldwildlife.org/

http://www.worldwildlife.org/

http://www.worldwildlife.org/

http://www.worldwildlife.org/

View: Turtle Photo

turtle.html

View: Turtle #1

img { max-width: 100%; }

Media Queries

Photo: Raymond Bryson https://flic.kr/p/8CkodQ

body { background-color: green; }

@media only screen and (min-width: 40em) { body { background-color: blue; } }

body { background-color: green; }

@media only screen and (min-width: 40em) { body { background-color: blue; } }

body { background-color: green; }

@media only screen and (min-width: 40em) { body { background-color: blue; } }

Photo: Nakeva Corothers https://flic.kr/p/8U1KwJ

Change navigationwith media queries

http://www.easterseals.com/

http://www.easterseals.com/

http://www.easterseals.com/

http://www.easterseals.com/

http://www.easterseals.com/

Change typographywith media queries

http://www.trentwalton.com

http://www.trentwalton.com

http://www.trentwalton.com

http://www.trentwalton.com

http://www.trentwalton.com

Add more detailwith media queries

http://mailchimp.com/

http://mailchimp.com/

http://mailchimp.com/

http://mailchimp.com/

http://mailchimp.com/

Change entire designwith media queries

http://www.salesforce.com/

http://www.salesforce.com/

http://www.salesforce.com/

http://www.salesforce.com/

http://www.salesforce.com/

min-width: 30emmax-width: 30em

min-height: 30emmax-height: 30em

Vertical media queries

http://bradfrostweb.com

http://bradfrostweb.com

http://bradfrostweb.com

http://bradfrostweb.com

min-device-width: 30emmax-device-width: 30emmin-device-height: 30emmax-device-height: 30em

orientation: portraitorientation: landscape

Via: http://wtfmobileweb.com/post/16758384465/thanks-for-providing-so-much-screen-real-estate

aspect-ratio: 16/9device-aspect-ratio: 16/9

min-aspect-ratio: 1/1

min-resolution: 300dpi

View: Alice in Wonderland

alice.html

View: Alice #1

@media only screen and (min-width:30em) { body { color: red; }}

View: Alice #2

@media only screen and (min-width:30em) { body { color: red; }}

@media only screen and (min-width:60em) { body { color: blue; }}

View: Alice #3

@media only screen and (max-width:30em) { body { color: red; }}

View: Alice #4

@media only screen and (min-height:20em) { body { color: red; }}

View: Alice #5

@media only screen and (max-height:20em) { body { color: red; }}

Performance

Slow connections arenot just on phones

Photo: Nicolas Vigier https://flic.kr/p/23xNNg

“You can't mock up performance in Photoshop.”

- Brad Frost@brad_frost

Performance Budget

Photo: Reyner Media https://flic.kr/p/hT9yw7

Responsive images

Photo: Craig Finlay https://flic.kr/p/5R51o3

Third-party code

Photo: Michael Himbeault https://flic.kr/p/7NFTF6

Blocking CSS & JavaScript

Photo: Holger Zscheyge https://flic.kr/p/5kcFk

-100ms ➔ +1%

-400ms ➔ +9%

Being a Web designer & not considering speed/performance is like being a print designer & not considering how your colors will print.

- Luke Wroblewski@lukew

https://developers.google.com/speed/pagespeed/insights/

https://developers.google.com/speed/pagespeed/insights/

https://developers.google.com/speed/pagespeed/insights/

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/

http://yslow.org/

http://yslow.org/

http://www.webpagetest.org/

WebPagetest

http://www.webpagetest.org/

Adaptive Content

http://www.alistapart.com

http://www.alistapart.com

Prototyping responsive design

Design Process

Photo: Wonderlane https://flic.kr/p/bSHvgv

Design Develop

Design

Develop

Photo: Chris Gladis https://flic.kr/p/rZVTg

“It's not like our industry nailed web design before we started doing responsive design. It's still a work in progress.”

- Dan Willis@uxcrank

Sketching

Photo: Christian Campos https://flic.kr/p/6Vb1Xd

Photo: Baldiri https://flic.kr/p/9JMoL5

Wireframes

Credit: After Victory https://flic.kr/p/8LrASD

Credit: Podluzny http://flic.kr/p/cJJdzm

Prototyping Tools

Photo: Kate Ter Haar https://flic.kr/p/9KQoQd

Use frameworksfor prototyping

http://foundation.zurb.com/

http://foundation.zurb.com/

http://foundation.zurb.com/

http://foundation.zurb.com/

http://foundation.zurb.com/

http://foundation.zurb.com/

http://foundation.zurb.com/

http://foundation.zurb.com/

http://foundation.zurb.com/

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://foundation.zurb.com/templates.html

http://getbootstrap.com/

http://www.getskeleton.com/

http://getclank.com/

Websites and applications for prototyping

http://froont.com/

http://froont.com/

http://www.hotgloo.com/

http://balsamiq.com/

http://foundation.zurb.com/

http://foundation.zurb.com/

View: Foundation Templates

foundation/template-bannerhome.htmlfoundation/template-blog.htmlfoundation/template-grid.htmlfoundation/template-realty.htmlfoundation/template-soboxy.htmlfoundation/template-workspace.html

http://foundation.zurb.com/templates.html

Creating responsive designs

The first websitewas responsive

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Start with Content

Photo: Lainey Powell https://flic.kr/p/eWJog

Small Screen First

Photo: Justus Blümer https://flic.kr/p/abN4Q4

http://www.washingtonpost.com

Linear design

http://teamtreehouse.com

http://teamtreehouse.com

http://teamtreehouse.com

http://teamtreehouse.com

Style Tiles

Photo: Lauren Manning https://flic.kr/p/4wV5Q1

http://styletil.es/

http://styletil.es/

Touch

Photo; Alexandra Zakharova https://flic.kr/p/jRnhnU

http://2014.blendconf.com

http://2014.blendconf.com

Touch target size

Photo: Erika https://flic.kr/p/6rMRUZ

ul a { display: block; }

ul a { display: block; padding: 3px 5px; }

Mobile First

Photo: Vernon Chan https://flic.kr/p/d5DEjS

Photo: Trevor Cummings https://flic.kr/p/nNu7sP

http://www.kiwibank.co.nz

http://www.kiwibank.co.nz

http://www.kiwibank.co.nz

http://www.kiwibank.co.nz

<a href=”tel:202-123-4567”>202-123-4567</a>

Mobile use case: I just transferred money at my desk using my phone because logging into my banking app requires fewer steps.

- Stephanie Rieger@stephanierieger

Change brandingwith media queries

http://www.dorigati.it/en/

http://www.dorigati.it/en/

http://www.dorigati.it/en/

http://www.dorigati.it/en/

Navigation

Photo: Calsidyrose https://flic.kr/p/8vehvb

http://bradfrost.github.com/this-is-responsive/patterns.html

Top Navigation

http://www.enochs.co.uk/

http://www.enochs.co.uk/

http://www.enochs.co.uk/

http://www.enochs.co.uk/

http://foodsense.is/

http://foodsense.is/

http://foodsense.is/

http://foodsense.is/

https://www.tuj.ac.jp/

https://www.tuj.ac.jp/

Footer Navigation

http://contentsmagazine.com/

http://contentsmagazine.com/

http://contentsmagazine.com/

http://contentsmagazine.com/

Toggle Navigation

http://www.starbucks.com/

http://starbucks.com/

http://starbucks.com/

http://starbucks.com/

http://starbucks.com/

http://codepen.io/bradfrost/full/sHvaz

http://codepen.io/bradfrost/full/sHvaz

<a href="#menu" class="menu-link">Menu</a><nav class="" id="menu">! <ul>! ! <li><a href="#">Home</a></li>! ! <li><a href="#">About</a></li>! ! <li><a href="#">Products</a></li>! ! <li><a href="#">Services</a></li>! ! <li><a href="#">Contact</a></li>! </ul></nav>

<a href="#menu" class="menu-link">Menu</a><nav class="" id="menu">! <ul>! ! <li><a href="#">Home</a></li>! ! <li><a href="#">About</a></li>! ! <li><a href="#">Products</a></li>! ! <li><a href="#">Services</a></li>! ! <li><a href="#">Contact</a></li>! </ul></nav>

nav { ! overflow: hidden;! max-height: 0;}nav.active { ! max-height: 15em;}

nav { ! overflow: hidden;! max-height: 0;}nav.active { ! max-height: 15em;}

<script>

(function() {

$(document).ready(function() {

$('body').addClass('js');

var $menu = $('#menu'),

$menulink = $('.menu-link');

$menulink.click(function() {

$menulink.toggleClass('active');

$menu.toggleClass('active');

return false;

});});

})();

</script>

http://codepen.io/bradfrost/full/sHvaz

http://codepen.io/bradfrost/full/sHvaz

http://codepen.io/bradfrost/full/sHvaz

@media only screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! nav {! ! max-height: none;! }}

@media only screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! nav {! ! max-height: none;! }}

@media only screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! nav {! ! max-height: none;! }}

http://skinnyties.com/

http://skinnyties.com/

http://skinnyties.com/

http://skinnyties.com/

Left Nav Flyout

http://www.emerilsrestaurants.com/

http://www.emerilsrestaurants.com/

http://www.emerilsrestaurants.com/

http://www.emerilsrestaurants.com/

Priority Navigation

https://www.pittsburghglasscenter.org/

https://www.pittsburghglasscenter.org/

https://www.pittsburghglasscenter.org/

https://www.pittsburghglasscenter.org/

https://www.pittsburghglasscenter.org/

https://www.pittsburghglasscenter.org/

Hamburger icon

Photo: Shane Adams https://flic.kr/p/6mPHuN

http://starbucks.com/

http://time.com/

http://www.bostonglobe.com/

http://www.microsoft.com/en-ca/default.aspx

https://www.pittsburghglasscenter.org/

View: Pandas Forever

pandas.html

<nav role="navigation"><ul><li><a href="/">Home</a></li><li><a href="/about/">About</a></li> <li><a href="/links/">Links</a></li> <li><a href="/contact/">Contact</a></li> </ul></nav>

View: Pandas #1

nav ul { list-style-type: none; padding: 0; margin: 0; }

nav li { margin: 0; padding: 0; }

View: Pandas #2

nav ul { list-style-type: none; padding: 0; margin: 0; margin: 25px 0; }

nav li { border: 1px solid #666; background-color: #eee; padding: 10px 1em; margin: 3px 0 0; }

View: Pandas #3

nav ul { list-style-type: none; padding: 0; margin: 0; margin: 25px 0; }

nav li { border: 1px solid #666; background-color: #eee; padding: 10px 1em;margin: 3px 0 0; text-align: center; }

nav li a { text-decoration: none; font-size: 1.2em; }

View: Pandas #4

@media only screen and (min-width: 30em) { nav li { display: block; float: left; } }

View: Pandas #5

@media only screen and (min-width: 30em) { nav li { display: block; float: left; width: 25%; } }

View: Pandas #6

@media only screen and (min-width: 30em) { nav li { display: block; float: left; width: 25%; } nav { padding-bottom: 3em; }}

TypographyPhoto: Marcin Wichary https://flic.kr/p/4r1D8w

http://www.trentwalton.com

http://www.trentwalton.com

http://www.trentwalton.com

http://www.trentwalton.com

Photo: John Nuttall https://flic.kr/p/kERMbC

Ems

1em = default

2em = twice as big1em = default

2em = twice as big1em = default

.5em = half as big

body { font-size: 100%; }

Default font size

http://alistapart.com

Photo: Abhisit Vejjajiva https://flic.kr/p/8iNCNU

Photo: Sam Howzit https://flic.kr/p/dhufQk

Scale

http://www.oliverharvey.co.uk/

http://www.oliverharvey.co.uk/

http://www.linksture.com/

http://www.linksture.com/

http://www.tilde.io/

http://www.tilde.io/

h1 { font-size: 3em; }h2 { font-size: 2em; }h3 { font-size: 1.5em; }

p { font-size: 1em; }

View: Peter Rabbit

rabbit.html

View: Rabbit #1

body { font-size: 100%; }h1 { font-size: 2.5em; text-align: center; }h2 { font-size: 1.5em; }

<p>This is 1 em.</p>

<div>This is 2 ems <span>(and 1.5 ems)</span>.</div>

<p>This is 1 em.</p>

<div>This is 2 ems <span>(and 1.5 ems)</span>.</div>

p { font-size: 1em; }div { font-size: 2em; }span { font-size: 1.5em; }

<p>This is 1 em.</p>

<div>This is 2 ems <span>(and 1.5 ems)</span>.</div>

p { font-size: 1em; }div { font-size: 2em; }span { font-size: 1.5em; }

Thoughtful CSS

Photo: AleXander Agopian https://flic.kr/p/bUxzCm

div { font-size: 1.1em; }

div { font-size: 1.2em; }

View: Rabbit #2

article { font-size: 2em; }

View: Rabbit #1

body { font-size: 100%; }h1 { font-size: 2.5em; text-align: center; }h2 { font-size: 1.5em; }

Photo: Kyle Van Horn https://flic.kr/p/5a4L3p

Rems

html { font-size: 100%; }

Photo: Hanan Cohen https://flic.kr/p/GedyD

Fallback

h1 { font-size: 32px; font-size: 2rem; }

Line Height (Leading)

Photo: Marcin Wichary https://flic.kr/p/4EDFYF

p { line-height: 1; }

p { line-height: 2; }

p { line-height: 1; }

p { line-height: 2; }

p { line-height: 1.4; }

p { line-height: 1.3 }

@media only screen and (min-width: 30em) { p { line-height: 1.4 }}

@media only screen and (min-width: 60em) { p { line-height: 1.5 }}

View: Rabbit #3

p { line-height: 1; }

@media only screen and (min-width: 30em) { p { line-height: 1.5; }}

@media only screen and (min-width: 60em) { p { line-height: 2; }}

Vertical Margins

Photo: Nick Ares https://flic.kr/p/4qc5EB

p { line-height: 1.5; margin-top: 1.5em; margin-bottom: 1.5em;}

View: Rabbit #4

p { line-height: 1; margin: 1em 0; }

@media only screen and (min-width: 30em) { p { line-height: 1.5; margin: 1.5em 0; }}

@media only screen and (min-width: 60em) { p { line-height: 2; margin: 2em 0; }}

View: Rabbit #1

body { font-size: 100%; }h1 { font-size: 2.5em; text-align: center; }h2 { font-size: 1.5em; }

Line Length (Measure)

Photo: Provenance Online Project https://flic.kr/p/9xHSNH

45-75 Characters

65586573686766

74726969

<p>These stories are true. Although I haveleft <span class=”testing”>the strict lineof historical</span> truth in many places,the animals in this book were all realcharacters.</p>

<p>These stories are true. Although I haveleft <span class=”testing”>the strict lineof historical</span> truth in many places,the animals in this book were all realcharacters.</p>

.testing { color: #f00; }

<p>These stories are true. Although I haveleft <span class=”testing”>the strict lineof historical</span> truth in many places,the animals in this book were all realcharacters.</p>

.testing { color: #f00; }

http://codepen.io/chriscoyier/pen/atebf

View: Rabbit #5

<p>Once upon a time there were four little Rabbi<span style="color: red;">ts, and their names were Flops</span>y, Mopsy, Cotton-tail, and Peter.</p>

View: Rabbit #6

article { width: 94%; margin: auto;}

article p { line-height: 1.3; margin: 1.3em 0;}

max-widthPhoto: Gustavo Jeronimo https://flic.kr/p/7nCGk3

article { max-width: 28em; }

article { max-width: 28em; }

article { max-width: 28em; }

View: Rabbit #7

article { max-width: 26em; }

View: Rabbit #8

article { max-width: 30em; }

@media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; }}

@media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; }}

@media only screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; }}

@media only screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; }}

View: Rabbit #9

@media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; }}

View: Rabbit #10

@media only screen and (min-width:60em) { article { font-size: 1.2em; } article p { line-height: 1.5; margin: 1.5em auto; }}

http://www.mqtest.io

Alignment & HyphenationPhoto: SurFeRGiRL30 https://flic.kr/p/8veLPW

p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

@media only screen and (max-width: 40em) { p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }}

View: Rabbit #1

body { font-size: 100%; }h1 { font-size: 2.5em; text-align: center; }h2 { font-size: 1.5em; }

View: Rabbit #11

p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

<html lang="en">

Typeface

Photo: Taryn https://flic.kr/p/5q1Qj1

http://wearyoubelong.com/

http://wearyoubelong.com/

#intro { font-size: 1em; font-family: Helvetica, sans-serif;}

#intro { font-size: 1em; font-family: Helvetica, sans-serif;}

@media only screen and (min-width:30em) { #intro { font-size: 1.2em; font-family: Populaire, sans-serif; text-transform: uppercase; }}

Performance

Web Fonts

Photo: Ian Kobylanski https://flic.kr/p/e7ES3o

@font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); src: local('Example Font'), url('ExampleFont.eot?#iefix') format('embedded-opentype'), url('ExampleFont.woff') format('woff'), url('ExampleFont.ttf') format('truetype'), url('ExampleFont.svg') format('svg'); font-style: normal; font-weight: 400;}

@font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); src: local('Example Font'), url('ExampleFont.eot?#iefix') format('embedded-opentype'), url('ExampleFont.woff') format('woff'), url('ExampleFont.ttf') format('truetype'), url('ExampleFont.svg') format('svg'); font-style: normal; font-weight: 400;}

@font-face { font-family: ExampleFont; src: url('ExampleFont.eot'); src: local('Example Font'), url('ExampleFont.eot?#iefix') format('embedded-opentype'), url('ExampleFont.woff') format('woff'), url('ExampleFont.ttf') format('truetype'), url('ExampleFont.svg') format('svg'); font-style: normal; font-weight: 400;}

Use fewer fonts

@font-face { font-family: 'Source Sans Pro'; src: url('SourceSansPro.eot'); }

@font-face { font-family: 'Source Sans Pro'; src: url('SourceSansPro.eot'); }

p { font-family: Arial, sans-serif; }

@font-face { font-family: 'Source Sans Pro'; src: url('SourceSansPro.eot'); }

p { font-family: Arial, sans-serif; }

@media only screen and (min-width: 30em) { p { font-family: 'Source Sans Pro', Arial, sans-serif; }}

http://www.jordanm.co.uk/tinytype

http://www.jordanm.co.uk/tinytype

h1 { font-family: Helvetica, Arial, 'Droid Sans', sans-serif; }

View: Rabbit #1

body { font-size: 100%; }h1 { font-size: 2.5em; text-align: center; }h2 { font-size: 1.5em; }

View: Rabbit #12

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>

View: Rabbit #13

p { font-family: Arial, 'Droid Sans', sans-serif; }

@media only screen and (min-width: 30em) { p { font-family: Raleway, Arial, 'Droid Sans', sans-serif; }}

Don’t forget styles for print

Photo: Daviddje https://flic.kr/p/div4a3

Testing responsive design

Use real deviceswhen possible

Photo: Jeremy Keith https://flic.kr/p/bPZzeM

http://www.browserstack.com/

Device Labs

Photo: Jakub Solovský https://flic.kr/p/i1RRZm

Thanks!

clarissapeterson.com

@clarissa

Photo: Jakub Solovský https://flic.kr/p/i1RRZm

Clarissa PetersonPeterson/Kandy