RESPONSIVE WEBDESIGN      webdesign done right
Sybren Wartna
WAAROM RESPONSIVE?
devices, devices, devices
wie heeft geen smartphone?
mobile first‣ markt groeit sterk‣ meer mogelijkheden‣ focus op broodnodige
let’s make a mobile app
telefoons niet in verhouding
oh, en we willen ook  iets met tablets
er is geen mobile web
er is één web
en dat is responsive
RESPONSIVE VOORBEELDEN
< film van hicksdesign.co.uk >
flexibel   media       flexibele  grid     queries   afbeeldingen
garrettwinder.com
werkenbijmirabeau.nl
sony.com
staffanstorp.se
simplebits.com
HOE WORD JE RESPONSIVE?
flexibel   media       flexibele  grid     queries   afbeeldingen
flexibel grid
wat doet een grid?
wat doet een grid?‣ orde scheppen‣ organiseren van elementen op de pagina‣ groeperen van elementen‣ visuele connecties cre...
target ÷ context = result
doel in pixels (inclusief marges)target ÷ context = result                       ouderelement (parent)
300px          60   60 60           20 20 20        960px
300 ÷ 960 = 0,3125.advertisement {  width: 31,25%}
media queries
mediawat?‣ type medium‣ eigenschappen van medium‣ nesten van styles‣ overruling
typen media‣   braille‣   embossed‣   handheld‣   print‣   projection‣   screen‣   speech‣   tty‣   tv
handheld wordt niet (meer)  voor mobiele telefoons        gebruikt
eigenschappen van media‣ breedte / hoogte device‣ breedte / hoogte viewport‣ oriëntatie van device‣ kleuren
@media screen and(max-device-width: 480px) {  /* specifieke CSS */}
@media print and (orientation:landscape)and (monochrome) {}
Blackberry   Internet Explorer   Opera Mini
hoe oplossen?‣ mobile first html + css‣ modernizr‣ jQuery plugins
iPhoneiPhone 4+
@media screen and(-webkit-min-device-pixel-ratio: 2) {  /* retina afbeeldingen */}
Modernizr.load([{  test : Modernizr.mq(‘(-webkit-min-device-pixel-ratio: 2)’),     yep : [‘retina.css’],     nope : [‘imag...
modernizr‣ touch screen‣ CSS3 animations‣ CSS3 transform
what’s next?‣ ondersteuning tv’s‣ ondersteuning beamers‣ meer CSS3 ondersteuning
flexibele afbeeldingen
afbeelding schaalt mee.advertisement img {  max-width: 100%;}
‘mobile’ first<img src="small.r.jpg" data-fullsrc="large.jpg">
services‣ adaptive-images.com‣ github.com/filamentgroup/Responsive-Images
moeilijkheden‣ inladen van afbeeldingen‣ schalen in browsers‣ background sizing
< film van hicksdesign.co.uk >
WERKWIJZE VOOR RESPONSIVE
projectaanpak
agile / scrum‣ samenwerken‣ iteratief werken‣ continue testen
content first‣ wat is er echt nodig?‣ focus op toptaken‣ tekst‣ afbeeldingen
niet ontwerpen in photoshop‣ content first‣ functioneel ontwerp‣ grid maken‣ schetsen
testen
bookmarklet‣ resize window bookmarklet‣ http://tiny.cc/resize-bookmarklet‣ niet dé oplossing
zorg voor devices
must read
WEBDESIGN DONE RIGHT  twitter: @NLife - http://tiny.cc/webdesign-done-right
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Responsive webdesign
Upcoming SlideShare
Loading in …5
×

Responsive webdesign

710 views
661 views

Published on

webdesign done right

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
710
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
0
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Responsive webdesign

  1. 1. RESPONSIVE WEBDESIGN webdesign done right
  2. 2. Sybren Wartna
  3. 3. WAAROM RESPONSIVE?
  4. 4. devices, devices, devices
  5. 5. wie heeft geen smartphone?
  6. 6. mobile first‣ markt groeit sterk‣ meer mogelijkheden‣ focus op broodnodige
  7. 7. let’s make a mobile app
  8. 8. telefoons niet in verhouding
  9. 9. oh, en we willen ook iets met tablets
  10. 10. er is geen mobile web
  11. 11. er is één web
  12. 12. en dat is responsive
  13. 13. RESPONSIVE VOORBEELDEN
  14. 14. < film van hicksdesign.co.uk >
  15. 15. flexibel media flexibele grid queries afbeeldingen
  16. 16. garrettwinder.com
  17. 17. werkenbijmirabeau.nl
  18. 18. sony.com
  19. 19. staffanstorp.se
  20. 20. simplebits.com
  21. 21. HOE WORD JE RESPONSIVE?
  22. 22. flexibel media flexibele grid queries afbeeldingen
  23. 23. flexibel grid
  24. 24. wat doet een grid?
  25. 25. wat doet een grid?‣ orde scheppen‣ organiseren van elementen op de pagina‣ groeperen van elementen‣ visuele connecties creëren
  26. 26. target ÷ context = result
  27. 27. doel in pixels (inclusief marges)target ÷ context = result ouderelement (parent)
  28. 28. 300px 60 60 60 20 20 20 960px
  29. 29. 300 ÷ 960 = 0,3125.advertisement { width: 31,25%}
  30. 30. media queries
  31. 31. mediawat?‣ type medium‣ eigenschappen van medium‣ nesten van styles‣ overruling
  32. 32. typen media‣ braille‣ embossed‣ handheld‣ print‣ projection‣ screen‣ speech‣ tty‣ tv
  33. 33. handheld wordt niet (meer) voor mobiele telefoons gebruikt
  34. 34. eigenschappen van media‣ breedte / hoogte device‣ breedte / hoogte viewport‣ oriëntatie van device‣ kleuren
  35. 35. @media screen and(max-device-width: 480px) { /* specifieke CSS */}
  36. 36. @media print and (orientation:landscape)and (monochrome) {}
  37. 37. Blackberry Internet Explorer Opera Mini
  38. 38. hoe oplossen?‣ mobile first html + css‣ modernizr‣ jQuery plugins
  39. 39. iPhoneiPhone 4+
  40. 40. @media screen and(-webkit-min-device-pixel-ratio: 2) { /* retina afbeeldingen */}
  41. 41. Modernizr.load([{ test : Modernizr.mq(‘(-webkit-min-device-pixel-ratio: 2)’), yep : [‘retina.css’], nope : [‘images.css’]}]);
  42. 42. modernizr‣ touch screen‣ CSS3 animations‣ CSS3 transform
  43. 43. what’s next?‣ ondersteuning tv’s‣ ondersteuning beamers‣ meer CSS3 ondersteuning
  44. 44. flexibele afbeeldingen
  45. 45. afbeelding schaalt mee.advertisement img { max-width: 100%;}
  46. 46. ‘mobile’ first<img src="small.r.jpg" data-fullsrc="large.jpg">
  47. 47. services‣ adaptive-images.com‣ github.com/filamentgroup/Responsive-Images
  48. 48. moeilijkheden‣ inladen van afbeeldingen‣ schalen in browsers‣ background sizing
  49. 49. < film van hicksdesign.co.uk >
  50. 50. WERKWIJZE VOOR RESPONSIVE
  51. 51. projectaanpak
  52. 52. agile / scrum‣ samenwerken‣ iteratief werken‣ continue testen
  53. 53. content first‣ wat is er echt nodig?‣ focus op toptaken‣ tekst‣ afbeeldingen
  54. 54. niet ontwerpen in photoshop‣ content first‣ functioneel ontwerp‣ grid maken‣ schetsen
  55. 55. testen
  56. 56. bookmarklet‣ resize window bookmarklet‣ http://tiny.cc/resize-bookmarklet‣ niet dé oplossing
  57. 57. zorg voor devices
  58. 58. must read
  59. 59. WEBDESIGN DONE RIGHT twitter: @NLife - http://tiny.cc/webdesign-done-right

×