Responsive Design - Speaker Deck

Responsive Design

by Andy Hume

Embed

Start on current slide

Slide 1

Slide 1 text

@andyhume Multipack Presents • 12th November 2011 DESIGN RESPONSIVE

Slide 2

Slide 2 text

@andyhume Multipack Presents • 12th November 2011 DESIGN RESPONSIVE

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

From now on, instead of talking about making a site accessible, I'm going to talk about keeping it accessible. “ Jeremy Keith

Slide 5

Slide 5 text

TRY NOT TO BREAK IT? THE WEB WORKS

Slide 6

Slide 6 text

RESPONSIVENESS? WHAT BROKE .container { width: 960px; }

Slide 7

Slide 7 text

SEMANTIC HTML STEPS[0]

Slide 8

Slide 8 text

OOCSS STEPS[1] Loosely couple content styling from layout styling

Slide 9

Slide 9 text

CORE.CSS STEPS[4] .product .title { font-size: 1em; } @media screen and (min-width: 60em) { .product .title { font-size: 1.4em; } } Keep modules together

Slide 10

Slide 10 text

SELECTOR QUERIES? STEPS[4]

Content here

Adapt content based on container width https://github.com/ahume/selector-queries

Slide 11

Slide 11 text

SELECTOR QUERIES? STEPS[4] .product img { max-width: 100%; } .product.wide img { // greater than 400px float: left; margin-right: 1em; max-width: auto; } Adapt content based on container width https://github.com/ahume/selector-queries

Slide 12

Slide 12 text

NAVIGATION STEPS[2]

Slide 13

Slide 13 text

NAVIGATION STEPS[2]

Slide 14

Slide 14 text

ADDING LAYOUT STEPS[3] Loosely couple content styling from layout styling

Slide 15

Slide 15 text

IE <9 STEPS[5] Send full ‘desktop’ layout

Slide 16

Slide 16 text

IE <9 STEPS[5] Send full ‘desktop’ layout - but not to mobile

Slide 17

Slide 17 text

IE <9 STEPS[5] Send full ‘desktop’ layout - or not

Slide 18

Slide 18 text

IE <9 STEPS[5] Polyfill media queries https://github.com/scottjehl/Respond

Slide 19

Slide 19 text

VIEWPORT STEPS[6] Set layout viewport width to the device width

Slide 20

Slide 20 text

VIEWPORT STEPS[6] W3C Syntax: coming soon http://dev.w3.org/csswg/css-device-adapt/ @viewport { width: device-width; zoom: 1.0; }

Slide 21

Slide 21 text

IMAGES STEPS[7] Shrinking img { max-width: 100%; }

Slide 22

Slide 22 text

RESPONSIVE IMAGES STEPS[7] Small image by default Don’t download both

Slide 23

Slide 23 text

RESPONSIVE IMAGES STEPS[7] Client-side solutions https://github.com/filamentgroup/Responsive-Images https://github.com/ahume/Responsive-Images https://github.com/allmarkedup/responsive-images-alt

Slide 24

Slide 24 text

RESPONSIVE IMAGES STEPS[7] Here and now? src.sencha.io

Slide 25

Slide 25 text

RESPONSIVE IMAGES STEPS[7] Here and now? Image replacement

.logo { background-image: url(logo-large.png); } .logo img { position: absolute; left: -9999px; }

Slide 26

Slide 26 text

SVG STEPS[8] Same approaches to support as responsive images

Slide 27

Slide 27 text

ENHANCING CONTENT STEPS[9] What’s core content?

Slide 28

Slide 28 text

ENHANCING CONTENT STEPS[9]

Slide 29

Slide 29 text