Responsive webdesign WordCampNL 2012
Upcoming SlideShare
Loading in...5

Responsive webdesign WordCampNL 2012



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

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



Total Views
Views on SlideShare
Embed Views



5 Embeds 92 80 7 3 1 1


Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Responsive webdesign WordCampNL 2012 Responsive webdesign WordCampNL 2012 Presentation Transcript

  • Responsive Webdesign or: "webdesign, done right" by Tom Hermans - @tomhermans
  • about medesigner / developer / wp guyfree-lancingSony Europe - UX - e-Platformreach me
  • designA plan or drawing producedto show the look and function or workingsof a building, garment, or other object(before it is built or made.)
  • print
  • card
  • 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:
  • <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 480px)" href="desktop.css" />if screen width > 600px, load desktop.css
  • 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
  • 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
  • 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)
  • 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:
  • more resourcesthe whole argument on media
  • snippet - media { 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