Responsive webdesign - webdesign done right

Transcript

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