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...
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 limit...
“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 g...
mobile website?optimized, but not really
mobile website : issues- redirects- urls (m. vs www)- sharing (desktop to mobile and viceversa)- duplicate content- often ...
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" /><li...
media queries since CSS3<link rel="stylesheet" type="text/css"  media="screen and (max-device-width: 480px)"  href="phone....
<link rel="stylesheet" type="text/css"  media="screen and (min-device-width: 480px)"  href="desktop.css" />if screen width...
media queries in css file@media screen and (max-device-width: 480px){  .column {     float: none;  }   .logo {      margin...
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 rea...
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...
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 (cssg...
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.   ...
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...
snippet - media reporter.site-title:before {   position: absolute;   top:0;   content: "768 and up";   background-color: h...
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Responsive webdesign WordCampNL 2012
Upcoming SlideShare
Loading in...5
×

Responsive webdesign WordCampNL 2012

2,727

Published on

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

Published in: Technology, Design
0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,727
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
86
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

Responsive webdesign WordCampNL 2012

  1. 1. Responsive Webdesign or: "webdesign, done right" by Tom Hermans - tomhermans.com @tomhermans
  2. 2. about medesigner / developer / wp guyfree-lancingSony Europe - UX - e-Platformreach me via:tomhermans.com@tomhermans
  3. 3. designA plan or drawing producedto show the look and function or workingsof a building, garment, or other object(before it is built or made.)
  4. 4. print
  5. 5. card
  6. 6. packaging
  7. 7. nicer packaging
  8. 8. car wrap
  9. 9. fashion
  10. 10. body paint
  11. 11. what do these designsall have in common ?great slide pic to pose a questionto the audience i guess
  12. 12. all applied on a canvas
  13. 13. canvas physical size constraintspower to the designer
  14. 14. how does the web canvas look like?
  15. 15. web pages are elasticin both horizontal and vertical dimensions in a way that paper pages are not.
  16. 16. terminology“masthead”“whitespace”“leading”“fold”all derived from print design
  17. 17. “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
  18. 18. “Webdesign is responsive design.Responsive Webdesignis web design,done right.” - Andy Clarke
  19. 19. WTF should you care ?mobile is growing..FAST
  20. 20. Solutionsnative appweb appmobile websiteresponsive webdesign
  21. 21. what to choose ?mmm.. depends..
  22. 22. native ?Yes, if:specific device functionalitycameragyrometergpsetc..
  23. 23. 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..
  24. 24. mobile website?optimized, but not really
  25. 25. 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
  26. 26. responsivea site that is able to adapt to the contextin which it is being viewed.
  27. 27. 99 viewports - iPhones just 1
  28. 28. viewports ?smartphonesfeature phonestabletsdesktopsfuture ?
  29. 29. benefits responsive webdesign1 website1 content1 url
  30. 30. whats so responsive about that?1 codebasediff. functionalitydiff. layout
  31. 31. examples
  32. 32. coolhow do you do that ?
  33. 33. rwd consists offlexible gridflexible images and mediamedia queries
  34. 34. stop thinking in pixels think proportional think percentagesthink modular
  35. 35. stop thinking fixed width960 is dead - 100%
  36. 36. flexible designmake no assumptionsabout a browser windows width
  37. 37. media queriescheck for - condition usually width (also pixel-ratio,orientation)apply different stylesbreakpoints
  38. 38. 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" />
  39. 39. 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
  40. 40. <link rel="stylesheet" type="text/css" media="screen and (min-device-width: 480px)" href="desktop.css" />if screen width > 600px, load desktop.css
  41. 41. media queries in css file@media screen and (max-device-width: 480px){ .column { float: none; } .logo { margin: 0 auto; }}
  42. 42. media queries summary if media query test is met > css will be applied
  43. 43. media queries itselfbreakpoints ?
  44. 44. common breakpoints3204806007689601200
  45. 45. or when the design starts to look bad responsivepx.com
  46. 46. mobile firstapply basic formatting to pagetypecolorsmargins
  47. 47. mobile first pt.2media queries for bigger screensprogressive enhancement> less capable browsers will always be serveda readable site
  48. 48. total width ?width:100%max-width 1120, 1600, 1920 ..dependent on:- content- modules- design proportions
  49. 49. gridhelps to build modularforget 960look at responsive gridsbuild your own!
  50. 50. toolsmodular grid extension modulargrid.org/#appresponsinator responsinator.com
  51. 51. my best practiceuse a max-widthuse a flexible widthdesign fluid modules
  52. 52. mobile firstserve basic stylesheet firsttypecolorsmargins
  53. 53. progressive enhancementadd css through mediaqueries> less capable browsers will always be serveda readable site
  54. 54. build your own grid (target % context) * 100 = result720 in 94076,595744680851063829787234042553 %1 col (55 in 1200) :4,5833333333333333333333333333333 %
  55. 55. flexible moduleseasy to "place" in the layoutorder in DOM becomes even more importantleft to right = top to bottom (mostly)
  56. 56. fluid media.entry-content img, .widget img{ max-width: 100%; }embed, object, video {max-width: 100%;height: auto;}
  57. 57. more (good) practicestry using CSS3 and svgpolyfills css3-mediaqueries-js respond.js modernizrnew developments (cssgrid, flexbox,..)
  58. 58. some resourcesresponsive webdesign - ethan marcotte(abookapart)alistapart.com/articles/responsive-web-designmediaqueri.es
  59. 59. wordpresstwentyeleven (and successors)many others, but be aware..premium is often not. (in general imho)
  60. 60. bottomlinecontent should be accessibleput user first - think about User eXperience
  61. 61. mobile users will do anything and everything desktop users will do,provided its presented in a usable way. - brad frost
  62. 62. the device cant be an obstacle
  63. 63. think future friendly
  64. 64. thanks. questions: @tomhermanstomhermans.com
  65. 65. more resourcesthe whole argument on mediahttps://github.com/filamentgroup/Responsive-Imageshttp://adaptive-images.com/http://unstoppablerobotninja.com/entry/fluid-images
  66. 66. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×