Responsive webdesign WordCampNL 2012

Responsive Webdesign or: "webdesign, done right" by Tom Hermans - tomhermans.com @tomhermans

about medesigner / developer / wp guyfree-lancingSony Europe - UX - e-Platformreach me via:tomhermans.com@tomhermans

designA plan or drawing producedto show the look and function or workingsof a building, garment, or other object(before it is built or made.)

packaging

nicer packaging

car wrap

fashion

body paint

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

all applied on a canvas

canvas physical size constraintspower to the designer

how does the web canvas look like?

web pages are elasticin both horizontal and vertical dimensions in a way that paper pages are not.

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

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

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

WTF should you care ?mobile is growing..FAST

Solutionsnative appweb appmobile websiteresponsive webdesign

what to choose ?mmm.. depends..

native ?Yes, if:specific device functionalitycameragyrometergpsetc..

native app : issues- extra build- extra cost- many platforms- even more extra cost- sharing content- findability- walled garden- duplicate content management- there are pros too..

mobile website?optimized, but not really

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

responsivea site that is able to adapt to the contextin which it is being viewed.

99 viewports - iPhones just 1

viewports ?smartphonesfeature phonestabletsdesktopsfuture ?

benefits responsive webdesign1 website1 content1 url

whats so responsive about that?1 codebasediff. functionalitydiff. layout

examples

coolhow do you do that ?

rwd consists offlexible gridflexible images and mediamedia queries

stop thinking in pixels think proportional think percentagesthink modular

stop thinking fixed width960 is dead - 100%

flexible designmake no assumptionsabout a browser windows width

media queriescheck for - condition usually width (also pixel-ratio,orientation)apply different stylesbreakpoints

media queriesaround 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" />

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.cssmore media features: http://www.w3.org/TR/css3-mediaqueries/#media1

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

media queries summary if media query test is met > css will be applied

media queries itselfbreakpoints ?

common breakpoints3204806007689601200

or when the design starts to look bad responsivepx.com

mobile firstapply basic formatting to pagetypecolorsmargins

mobile first pt.2media queries for bigger screensprogressive enhancement> less capable browsers will always be serveda readable site

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

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

toolsmodular grid extension modulargrid.org/#appresponsinator responsinator.com

my best practiceuse a max-widthuse a flexible widthdesign fluid modules

mobile firstserve basic stylesheet firsttypecolorsmargins

progressive enhancementadd css through mediaqueries> less capable browsers will always be serveda readable site

build your own grid (target % context) * 100 = result720 in 94076,595744680851063829787234042553 %1 col (55 in 1200) :4,5833333333333333333333333333333 %

flexible moduleseasy to "place" in the layoutorder in DOM becomes even more importantleft to right = top to bottom (mostly)

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

more (good) practicestry using CSS3 and svgpolyfills css3-mediaqueries-js respond.js modernizrnew developments (cssgrid, flexbox,..)

some resourcesresponsive webdesign - ethan marcotte(abookapart)alistapart.com/articles/responsive-web-designmediaqueri.es

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

bottomlinecontent should be accessibleput user first - think about User eXperience

mobile users will do anything and everything desktop users will do,provided its presented in a usable way. - brad frost

the device cant be an obstacle

think future friendly

thanks. questions: @tomhermanstomhermans.com

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

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

http://tomhermans.com	21
http://www.linkedin.com	2
http://pinterest.com	1

Responsive webdesign WordCampNL 2012

by Tom Hermans

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 24

Statistics