Responsive Web Design

transcript

“The Way is shaped by use,But then the shape is lost.Do not hold fast to shapesBut let sensation flow into the worldAs a river courses down to the sea.—DAO DE JING, section 32, “Shapes”

Resources

•Ethan Marcotte - Responsive Web Design (A Book Apart)

•Smashing Magazine - (http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/)

•A Dao of Web Design (http://www.alistapart.com/articles/dao/)

What is responsive web design?

THE INGREDIENTS

SIMPLES

THREE INGREDIENTS

•A flexible, grid-based layout

•Flexible images and media

•Media queries - a module from the CSS3 specification

THREE INGREDIENTS

Flexible Grid Based Layout

Flexible - Step 1

•Typography

The following slides contain maths

“THE ALGORITHM”

target ÷ context = result

“THE ALGORITHM”

target ÷ context = result24px ÷ 16px = 1.5em

Flexible - Step 1

•Typography

body {font-size: 100%}

h1 {font-size: 1.5em /* 24px / 16px */}

h2 {font-size: 1.25em /* 20px / 16px */}

Flexible - Step 2

•Typography

•Layout

Flexible - Step 2

•Typography

•Layout

The following slides contain maths

“THE ALGORITHM”

“THE ALGORITHM”620 ÷ 1024px = 0.60546875 (header)

360 ÷ 1024px = 0.3515625 (nav)

730 ÷ 1024px = 0.712890625 (article)

250 ÷ 1024px = 0.244240625 (sidebar)

“THE ALGORITHM”header { width: 60.546875% /* 620 / 1024 */}

nav { width: 35.15625% /* 360 / 1024 */}

“THE ALGORITHM”

SETTING MARGINS & PADDINGS

• If the next TYPE element is 11px & is nested within the H1 then use the following11 / 24 = 0.458333333333333em

• When setting flexible margins on an element, your context is the width of the element’s container.

• When setting flexible padding on an element, your context is the width of the element itself. Which makes sense, if you think about the box model: we’re describing the padding in relation to the width of the box itself.

• DO NOT ROUND UP.

THREE INGREDIENTS

Flexible Images / Media

•Web is not just text

•Facebook

•Flickr

•YouTube

•Vimeo

•more more more.....

Golden Egg

img {max-width: 100%; }

Golden Egg cont...

img,embed,object,video {

max-width: 100%;

IE6 - you bastard!

img,embed,object,video {

max-width: 100%;

IE6 - you bastard!IE Specific Style Sheetimg { width: 100%;}

IE7 - you bastard!

http://unstoppablerobotninja.com/entry/fluid-images#code

Background Images

•FAUX columns

•But that's fine for a fixed layout, but what about our responsive design?

.blog {background: #F8F5F2 url("blog-bg.png") repeat-y 50% 0;}

Background Images

• CSS3 property called background-size (http://bkaprt.com/rwd/20/), browser support is still pretty immature

• Scott Robbin’s jQuery Backstretch plugin (http://bkaprt.com/rwd/21/) simulates resizable background images on the body element.

THREE INGREDIENTS

Media Queries

•W3C

•Media Types

•all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv

Media Types<link rel="stylesheet" href="global.css" media="all" />

Then along came...<link rel="stylesheet" href="tiny.css" media="handheld"/>

Be GONE Media Types

Hello Media Queries

CSS3 Media Queries

•Anatomy of a Media Query

@media screen and (min-width: 1024px) {

body {

font-size: 100%;

Anatomy of Media Query

1.Each query still begins with a media type (screen).

2.Immediately after comes the query itself, wrapped in parentheses: (min-width: 1024px). And our query can, in turn, be split into two components: the name of a feature (min-width) and a corresponding value (1024px)

CSS3 Media Queries

•Anatomy of a Media Query

@media screen and (min-width: 1024px) {

body {

font-size: 100%;

Where did I put.....•<link rel="stylesheet"

href="wide.css" media="screen and (min-width: 1024px)" />

•Attach them to @import statements:

•@import url("wide.css") screen and (min-width: 1024px);

•I prefer @media because it keeps the CSS sheet numbers down, there for requests and there for load times.

Does Size Matter?

YES!!!

Does Size Matter•In the spec’s language, every device

has a “display area” and “rendering surface.”

•the browser’s viewport is the display area; the entire display is the rendering surface.

•So on your laptop, the display area would be your browser window; the rendering surface would be your screen.

Does Size Matter

•If your laptop is 1200px in width and your browser is open 50% of the screen, then;

•RENDERING SURFACE = 1200px

•DISPLAY AREA (viewport) = 600px

•http://www.w3.org/TR/css3-mediaqueries/#media1

WAIT - There’s MOAR

•Chain multiple conditions together

• @media screen and (min-device-width: 480px) and (orientation: landscape) { … }

Media Queries

Browser Support

•Works in most browers < 5 years old

•With the obvious exception of IE

•css3-mediaqueries.js

•respond.js

respond.js@media screen and (max-width: 768px) {

}/*/mediaquery*/

@media screen and (max-width: 520px) {

}/*/mediaquery*/

Responsive Context

MOBILE FIRST“More often than not, the mobile experience for a Web application or site is designed and built after the PC version is complete. Here's three reasons why Web applications should be designed for mobile first instead...Mobile is exploding...Mobile forces you to focus....Mobile extends your capabilities...”

•http://www.lukew.com/ff/entry.asp?933

Image http://blog.gvnfoundation.org/2011/02/every-once-in-awhile-we-receive-amazing.html

Testing

•No Substitute for the real thing

•Web Developer Tools (FF Plugin)

•Safari Developer

•Emulators

Bad Points?

•Force the users into one way. Users that like to pinch and zoom

•No Mobile Only, users will download the WHOLE page not an optimised one

Thanks. Questions?“The Way is shaped by

use,But then the shape is lost.Do not hold fast to shapesBut let sensation flow into the worldAs a river courses down to the sea.—DAO DE JING, section 32, “Shapes”

Responsive Web Design

Technology