webdesign done right

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. flexibel media flexibele
grid queries afbeeldingen

18. garrettwinder.com

22. werkenbijmirabeau.nl

26. sony.com

30. staffanstorp.se

34. simplebits.com

38. HOE WORD JE RESPONSIVE?

39. flexibel media flexibele
grid queries afbeeldingen

40. flexibel grid

41. wat doet een grid?

42. wat doet een grid?
‣ orde scheppen
‣ organiseren van elementen op de pagina
‣ groeperen van elementen
‣ visuele connecties creëren

43. target ÷ context = result

44. doel in pixels (inclusief marges)
target ÷ context = result
ouderelement (parent)

47. 300px
60 60 60
20 20 20
960px

48. 300 ÷ 960 = 0,3125
.advertisement {
width: 31,25%
}

49. media queries

50. mediawat?
‣ type medium
‣ eigenschappen van medium
‣ nesten van styles
‣ overruling

51. typen media
‣ braille
‣ embossed
‣ handheld
‣ print
‣ projection
‣ screen
‣ speech
‣ tty
‣ tv

52. handheld wordt niet (meer)
voor mobiele telefoons
gebruikt

53. eigenschappen van media
‣ breedte / hoogte device
‣ breedte / hoogte viewport
‣ oriëntatie van device
‣ kleuren

54. @media screen and
(max-device-width: 480px) {
/* specifieke CSS */
}

55. @media print and (orientation:landscape)
and (monochrome) {
}

56. Blackberry Internet Explorer Opera Mini

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. afbeelding schaalt mee
.advertisement img {
max-width: 100%;
}

65. ‘mobile’ first
<img src="small.r.jpg" data-
fullsrc="large.jpg">

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. agile / scrum
‣ samenwerken
‣ iteratief werken
‣ continue testen

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