responsive webdesign wordcampnl 2012

83

Post on 17-Oct-2014

3.106 views

Category:

Technology


6 download

DESCRIPTION

A presentation for WordCampNL on the importance of accessible, useable websites and how to achieve that with responsive webdesign.

TRANSCRIPT

Page 1: Responsive webdesign WordCampNL 2012
Page 2: Responsive webdesign WordCampNL 2012

Responsive Webdesignor: "webdesign, done right"

by Tom Hermans - tomhermans.com@tomhermans

Page 3: Responsive webdesign WordCampNL 2012

about me

designer / developer / wp guyfree-lancingSony Europe - UX - e-Platform reach me via:tomhermans.com@tomhermans

Page 4: Responsive webdesign WordCampNL 2012

design

A plan or drawing produced to show the look and function or workings of a building, garment, or other object (before it is built or made.)

Page 5: Responsive webdesign WordCampNL 2012

print

Page 6: Responsive webdesign WordCampNL 2012

card

Page 7: Responsive webdesign WordCampNL 2012

packaging

Page 8: Responsive webdesign WordCampNL 2012

nicer packaging

Page 9: Responsive webdesign WordCampNL 2012

car wrap

Page 10: Responsive webdesign WordCampNL 2012

fashion

Page 11: Responsive webdesign WordCampNL 2012

body paint

Page 12: Responsive webdesign WordCampNL 2012

what do these designsall have in common ? great slide pic to pose a questionto the audience i guess

Page 13: Responsive webdesign WordCampNL 2012

all applied on a

canvas

Page 14: Responsive webdesign WordCampNL 2012

canvasphysical sizeconstraints

power to the designer

Page 15: Responsive webdesign WordCampNL 2012

how does the web canvas look like?

Page 16: Responsive webdesign WordCampNL 2012
Page 17: Responsive webdesign WordCampNL 2012

web pages are elastic in both horizontal and vertical dimensions

in a way that paper pages are not.

Page 18: Responsive webdesign WordCampNL 2012

terminology

“masthead”“whitespace”“leading”“fold” all derived from print design

Page 19: Responsive webdesign WordCampNL 2012
Page 20: Responsive webdesign WordCampNL 2012
Page 21: Responsive webdesign WordCampNL 2012

“The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.“ - John Allsopp

Page 22: Responsive webdesign WordCampNL 2012

“Webdesign is responsive design. Responsive Webdesign is web design, done right.” - Andy Clarke

Page 23: Responsive webdesign WordCampNL 2012

WTF should you care ?

mobile is growing..FAST

Page 24: Responsive webdesign WordCampNL 2012

Solutions

native appweb appmobile websiteresponsive webdesign

Page 25: Responsive webdesign WordCampNL 2012

what to choose ?

mmm.. depends..

Page 26: Responsive webdesign WordCampNL 2012

native ?

Yes, if:specific device functionality cameragyrometergpsetc..

Page 27: Responsive webdesign WordCampNL 2012

native app : issues

- extra build- extra cost- many platforms- even more extra cost- sharing content- findability- walled garden- duplicate content management- there are pro's too..

Page 28: Responsive webdesign WordCampNL 2012

mobile website?

optimized, but not really

Page 29: Responsive webdesign WordCampNL 2012

mobile website : issues

- redirects- urls (m. vs www)- sharing (desktop to mobile and viceversa)- duplicate content- often catering for certain brands / types / OS- duplicate content - duplicate mgmt- different devices- expensive and unsatisfying

Page 30: Responsive webdesign WordCampNL 2012

responsive

a site that is able to adapt to the context in which it is being viewed.

Page 31: Responsive webdesign WordCampNL 2012
Page 32: Responsive webdesign WordCampNL 2012

99 viewports - iPhone's just 1

Page 33: Responsive webdesign WordCampNL 2012

viewports ?

smartphonesfeature phonestabletsdesktops future ?

Page 34: Responsive webdesign WordCampNL 2012

benefits responsive webdesign

1 website1 content1 url

Page 35: Responsive webdesign WordCampNL 2012

what's so responsive about that?

1 codebase diff. functionality diff. layout

Page 36: Responsive webdesign WordCampNL 2012

examples

Page 37: Responsive webdesign WordCampNL 2012
Page 38: Responsive webdesign WordCampNL 2012
Page 39: Responsive webdesign WordCampNL 2012
Page 40: Responsive webdesign WordCampNL 2012
Page 41: Responsive webdesign WordCampNL 2012
Page 42: Responsive webdesign WordCampNL 2012
Page 43: Responsive webdesign WordCampNL 2012
Page 44: Responsive webdesign WordCampNL 2012
Page 45: Responsive webdesign WordCampNL 2012
Page 46: Responsive webdesign WordCampNL 2012

cool

how do you do that ?

Page 47: Responsive webdesign WordCampNL 2012

rwd consists of

flexible gridflexible images and mediamedia queries

Page 48: Responsive webdesign WordCampNL 2012

stop thinking in pixels

think proportional think percentagesthink modular

Page 49: Responsive webdesign WordCampNL 2012

stop thinking fixed width

960 is dead - 100%

Page 50: Responsive webdesign WordCampNL 2012

flexible design

make no assumptions about a browser window's width

Page 51: Responsive webdesign WordCampNL 2012

media queries

check for - conditionusually width (also pixel-ratio,orientation)

apply different styles breakpoints

Page 52: Responsive webdesign WordCampNL 2012

media queries

around since css 2.1 - media type <link rel="stylesheet" type="text/css" href="core.css" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />

Page 53: Responsive webdesign WordCampNL 2012

media queries since CSS3<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="phone.css" />

if screen width < 480px, load phone.css more media features: http://www.w3.org/TR/css3-mediaqueries/#media1

Page 54: Responsive webdesign WordCampNL 2012

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 480px)" href="desktop.css" />

if screen width > 600px, load desktop.css

Page 55: Responsive webdesign WordCampNL 2012

media queries in css file@media screen and (max-device-width: 480px){ .column { float: none; }

.logo { margin: 0 auto;

}}

Page 56: Responsive webdesign WordCampNL 2012

media queries summary

if media query test is met>

css will be applied

Page 57: Responsive webdesign WordCampNL 2012

media queries itself

breakpoints ?

Page 58: Responsive webdesign WordCampNL 2012

common breakpoints

3204806007689601200

Page 59: Responsive webdesign WordCampNL 2012

or when the design starts to look badresponsivepx.com

Page 60: Responsive webdesign WordCampNL 2012

mobile first

apply basic formatting to page typecolorsmargins

Page 61: Responsive webdesign WordCampNL 2012

mobile first pt.2

media queries for bigger screensprogressive enhancement > less capable browsers will always be served a readable site

Page 62: Responsive webdesign WordCampNL 2012

total width ?

width:100% max-width 1120, 1600, 1920 .. dependent on:- content- modules- design proportions

Page 63: Responsive webdesign WordCampNL 2012

grid

helps to build modularforget 960look at responsive gridsbuild your own!

Page 64: Responsive webdesign WordCampNL 2012

tools

modular grid extensionmodulargrid.org/#app

responsinatorresponsinator.com

Page 65: Responsive webdesign WordCampNL 2012
Page 66: Responsive webdesign WordCampNL 2012
Page 67: Responsive webdesign WordCampNL 2012
Page 68: Responsive webdesign WordCampNL 2012

'my' best practice

use a max-widthuse a flexible widthdesign fluid modules

Page 69: Responsive webdesign WordCampNL 2012

mobile first

serve basic stylesheet first typecolorsmargins

Page 70: Responsive webdesign WordCampNL 2012

progressive enhancement

add css through mediaqueries > less capable browsers will always be served a readable site

Page 71: Responsive webdesign WordCampNL 2012

build your own grid

(target % context) * 100 = result

720 in 94076,595744680851063829787234042553 % 1 col (55 in 1200) :4,5833333333333333333333333333333 %

Page 72: Responsive webdesign WordCampNL 2012

flexible modules

easy to "place" in the layout order in DOM becomes even more important left to right = top to bottom (mostly)

Page 73: Responsive webdesign WordCampNL 2012

fluid media.entry-content img, .widget img { max-width: 100%; } embed, object, video {max-width: 100%;height: auto;}

Page 74: Responsive webdesign WordCampNL 2012

more (good) practices

try using CSS3 and svgpolyfills

css3-mediaqueries-jsrespond.jsmodernizr

new developments (cssgrid, flexbox,..)

Page 75: Responsive webdesign WordCampNL 2012

some resources

responsive webdesign - ethan marcotte (abookapart) alistapart.com/articles/responsive-web-design mediaqueri.es

Page 76: Responsive webdesign WordCampNL 2012

wordpress

twentyeleven (and successors)many others, but be aware..premium is often not. (in general imho)

Page 77: Responsive webdesign WordCampNL 2012

bottomline

content should be accessible put user first - think about User eXperience

Page 78: Responsive webdesign WordCampNL 2012

mobile users will do anything and everything

desktop users will do, provided it's presented in a usable way.

- brad frost

Page 79: Responsive webdesign WordCampNL 2012

the device can't be an obstacle

Page 80: Responsive webdesign WordCampNL 2012

think future friendly

Page 81: Responsive webdesign WordCampNL 2012

thanks.

questions:

@tomhermanstomhermans.com

Page 82: Responsive webdesign WordCampNL 2012

more resources

the whole argument on mediahttps://github.com/filamentgroup/Responsive-Imageshttp://adaptive-images.com/http://unstoppablerobotninja.com/entry/fluid-images

Page 83: Responsive webdesign WordCampNL 2012

snippet - media reporter

.site-title:before { position: absolute; top:0; content: "768 and up"; background-color: hsla(150,60%,40%,.7); color: white; font-size: 16px; padding: 5px 10px;

}> handy to see which mq is active