Your SlideShare is downloading. ×
0
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Responsive webdesign WordCampNL 2012

2,676

Published on

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.

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×