TYPO3 Congres 2012 - Responsive webdesign
-
Author
typo3-nederland -
Category
Technology
-
view
683 -
download
2
Embed Size (px)
description
Transcript of TYPO3 Congres 2012 - Responsive webdesign
- 1. RESPONSIVE WEBDESIGNROQUIN1
2. WIJ ZIJN.. Vincent Kessels Wouter BeeftinkROQUIN 2 3. INTERNET IS OVERALROQUIN 3 4. INTERNET IS OVERALROQUIN4 5. INTERNET IS OVERAL Wereldwijd internetgebruik (comScore, 2012) 2000 Internetgebruikers (in miljoenen) 1800 1600 1400 1200 1000800DESKTOP600MOBIEL40020002007 2008 2009 2010 2011 2012 2013 2014 2015ROQUIN 5 6. INTERNET IS OVERAL 12,4 miljoen internetters in Nederland in 2012 60% maakt gebruik van mobiel internetROQUIN6 7. INTERNET IS OVERAL Verdeling mobiel internet (CBS, 2012) Tablet19% Telefoon 47% Laptop34%ROQUIN7 8. INTERNET IS OVERALROQUIN8 9. HOE GAAN WE HIERMEE OM?ROQUIN 9 10. HOE GAAN WE HIERMEE OM? Mobiele website? App? Responsive website?ROQUIN 10 11. RESPONSIVEWEBSITEROQUIN11 12. RESPONSIVE WEBSITE Flexibel grid Flexibele afbeeldingen en media Media queries (CSS3)ROQUIN 12 13. FLEXIBEL GRIDROQUIN13 14. ROQUIN 14 15. FLEXIBEL GRID /* HTML */ /* TypoScript */ page.meta { ! viewport = width=device-width, initial-scale=1.0 }ROQUIN15 16. Zonder viewport tagROQUIN Met viewport tag16 17. ROQUIN 17 18. ROQUIN 18 19. FLEXIBELE MEDIAROQUIN 19 20. FLEXIBELE MEDIA Afbeeldingen Videos Retina displaysROQUIN 20 21. FLEXIBELE MEDIA img { max-width: 100%; }ROQUIN21 22. FLEXIBELE MEDIA tt_content.image.20 { renderMethod = div rendering { div { imageRowStdWrap.dataWrap =
imageLastRowStdWrap.dataWrap =
oneImageStdWrap.dataWrap =
caption.wrap =
} } }ROQUIN22 23. FLEXIBELE MEDIA Embedded video oEmbed (mediaoembed) FitVids.jsROQUIN23 24. FLEXIBELE MEDIA Wat is Retina? Het Retina-effect OplossingenROQUIN 24 25. FLEXIBELE MEDIAiPhone 3iPhone 4 grootte (inch) 3,5 3,5 resolutie (px) 480 x 320 960 x 640 pixeldichtheid (ppi) 163 326ROQUIN25 26. FLEXIBELE MEDIAROQUIN 26 27. FLEXIBELE MEDIAROQUIN 27 28. FLEXIBELE MEDIA Images @2 Gebruik web fonts & CSS3 Icon fonts (icomoon.io)ROQUIN28 29. MEDIA QUERIESROQUIN 29 30. MEDIA QUERIES Wat zijn media queries? Voorbeelden Breakpoints Browser supportROQUIN 30 31. MEDIA QUERIES /* Phones */ @media (max-width: 480px) { ... } /* Medium sized screens */ @media (min-width: 980px) and (max-width: 1199px) { ... }ROQUIN 31 32. MEDIA QUERIES This is responsive http://bradfrost.github.com/this-is-responsive/ROQUIN 32 33. MEDIA QUERIESBreedte (px)Large display 1200 and upDefault 980Portrait tablets768 and belowPhones to tablets 767 and belowPhones480 and belowBron: Twitter BootstrapROQUIN33 34. MEDIA QUERIESROQUIN 34 35. CONCLUSIEROQUIN 35 36. CONCLUSIE Responsive website Grid, media & media queries PerformanceROQUIN 36 37. VRAGEN?ROQUIN 37