TYPO3 Congres 2012 - Responsive webdesign
of 37
/37
-
Author
typo3-nederland -
Category
Technology
-
view
683 -
download
2
Embed Size (px)
description
Overweeg je een TYPO3-website te maken die (ook) geschikt is voor o.a. smartphone of tablet? Hoe ervaart een bezoeker jouw website op een tablet? We delen graag onze ervaring en geven voorbeelden van hoe je veel voorkomende uitdagingen aan kunt pakken. Ook kijken we naar andere websites om te laten zien hoe responsive webdesign in de praktijk wordt ingezet en laten we zien hoe we TYPO3 gebruiken om responsive websites te realiseren. 1. Mobile first? Vorig jaar groeide het aantal bezoekers van mobiele websites met 600%. Jouw website heeft ook een mobiele doelgroep. 2. Er zijn veel best practises op het gebied van responsive webdesign. We laten er een aantal zien om veel voorkomende uitdagingen aan te pakken. 3. De presentatie bevat voldoende informatie om direct in de praktijk toe te passen. We laten zien hoe je een TYPO3 CMS website eenvoudig responsive kunt maken. Vincent Kessels Vincent is creatief denker binnen ROQUIN en weet uitdagingen creatief op te lossen. Daarnaast is hij als projectmanager de bewaker van de voortgang en de kwaliteit van onze projecten. Het TYPO3 CMS kent hij als zijn broekzak. Wouter Beeftink Wouter beweert alles te weten van front-end development en heeft een voorliefde voor JavaScript en schone code. Werkt er iets niet in een bepaalde browser? Hij lost het op.
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
