RESPONSIVE         WEBDESIGNROQUIN                1
WIJ ZIJN..   • Vincent Kessels   • Wouter BeeftinkROQUIN                 2
INTERNET IS           OVERALROQUIN                 3
INTERNET IS OVERALROQUIN                4
INTERNET IS OVERAL Wereldwijd internetgebruik (comScore, 2012)                                             2000         In...
INTERNET IS OVERAL   • 12,4 miljoen internetters in Nederland in 2012   • 60% maakt gebruik van mobiel internetROQUIN     ...
INTERNET IS OVERAL Verdeling mobiel internet (CBS, 2012)                                         Tablet                   ...
INTERNET IS OVERALROQUIN                8
HOE GAAN WE         HIERMEE OM?ROQUIN                 9
HOE GAAN WE HIERMEE OM?   • Mobiele website?   • App?   • Responsive website?ROQUIN                     10
RESPONSIVE          WEBSITEROQUIN                11
RESPONSIVE WEBSITE   • Flexibel grid   • Flexibele afbeeldingen en media   • Media queries (CSS3)ROQUIN                   ...
FLEXIBEL           GRIDROQUIN              13
ROQUIN   14
FLEXIBEL GRID   /* HTML */   <meta name="viewport" content="width=device-width,   initial-scale=1.0" />   /* TypoScript */...
Zonder viewport tagROQUIN         Met viewport tag16
ROQUIN   17
ROQUIN   18
FLEXIBELE           MEDIAROQUIN               19
FLEXIBELE MEDIA   • Afbeeldingen   • Video’s   • Retina displaysROQUIN                 20
FLEXIBELE MEDIA   img {     max-width: 100%;   }ROQUIN                  21
FLEXIBELE MEDIA   tt_content.image.20 {     renderMethod = div     rendering {       div {         imageRowStdWrap.dataWra...
FLEXIBELE MEDIA   • Embedded video   • oEmbed (mediaoembed)   • FitVids.jsROQUIN                      23
FLEXIBELE MEDIA   • Wat is Retina?   • Het Retina-effect   • OplossingenROQUIN                   24
FLEXIBELE MEDIA                          iPhone 3    iPhone 4         grootte (inch)     3,5         3,5         resolutie...
FLEXIBELE MEDIAROQUIN             26
FLEXIBELE MEDIAROQUIN             27
FLEXIBELE MEDIA   • Images “@2”   • Gebruik web fonts & CSS3   • Icon fonts (icomoon.io)ROQUIN                          28
MEDIA         QUERIESROQUIN             29
MEDIA QUERIES   • Wat zijn media queries?   • Voorbeelden   • Breakpoints   • Browser supportROQUIN                       ...
MEDIA QUERIES   /* Phones */   @media (max-width: 480px) {     ...   }   /* Medium sized screens */   @media (min-width: 9...
MEDIA QUERIES   • This is responsive     • http://bradfrost.github.com/this-is-responsive/ROQUIN                          ...
MEDIA QUERIES                            Breedte (px)  Large display             1200 and up  Default                   98...
MEDIA QUERIESROQUIN           34
CONCLUSIEROQUIN               35
CONCLUSIE   • Responsive website   • Grid, media & media queries   • PerformanceROQUIN                             36
VRAGEN?ROQUIN             37
Upcoming SlideShare
Loading in …5
×

TYPO3 Congres 2012 - Responsive webdesign

908 views
826 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
908
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TYPO3 Congres 2012 - Responsive webdesign

  1. 1. RESPONSIVE WEBDESIGNROQUIN 1
  2. 2. WIJ ZIJN.. • Vincent Kessels • Wouter BeeftinkROQUIN 2
  3. 3. INTERNET IS OVERALROQUIN 3
  4. 4. INTERNET IS OVERALROQUIN 4
  5. 5. INTERNET IS OVERAL Wereldwijd internetgebruik (comScore, 2012) 2000 Internetgebruikers (in miljoenen) 1800 1600 1400 1200 1000 800 DESKTOP 600 MOBIEL 400 200 0 2007 2008 2009 2010 2011 2012 2013 2014 2015ROQUIN 5
  6. 6. INTERNET IS OVERAL • 12,4 miljoen internetters in Nederland in 2012 • 60% maakt gebruik van mobiel internetROQUIN 6
  7. 7. INTERNET IS OVERAL Verdeling mobiel internet (CBS, 2012) Tablet 19% Telefoon 47% Laptop 34%ROQUIN 7
  8. 8. INTERNET IS OVERALROQUIN 8
  9. 9. HOE GAAN WE HIERMEE OM?ROQUIN 9
  10. 10. HOE GAAN WE HIERMEE OM? • Mobiele website? • App? • Responsive website?ROQUIN 10
  11. 11. RESPONSIVE WEBSITEROQUIN 11
  12. 12. RESPONSIVE WEBSITE • Flexibel grid • Flexibele afbeeldingen en media • Media queries (CSS3)ROQUIN 12
  13. 13. FLEXIBEL GRIDROQUIN 13
  14. 14. ROQUIN 14
  15. 15. FLEXIBEL GRID /* HTML */ <meta name="viewport" content="width=device-width, initial-scale=1.0" /> /* TypoScript */ page.meta { ! viewport = width=device-width, initial-scale=1.0 }ROQUIN 15
  16. 16. Zonder viewport tagROQUIN Met viewport tag16
  17. 17. ROQUIN 17
  18. 18. ROQUIN 18
  19. 19. FLEXIBELE MEDIAROQUIN 19
  20. 20. FLEXIBELE MEDIA • Afbeeldingen • Video’s • Retina displaysROQUIN 20
  21. 21. FLEXIBELE MEDIA img { max-width: 100%; }ROQUIN 21
  22. 22. FLEXIBELE MEDIA tt_content.image.20 { renderMethod = div rendering { div { imageRowStdWrap.dataWrap = <div class="csc-textpic-imagerow">|</div> imageLastRowStdWrap.dataWrap = <div class="csc-textpic-imagerow csc- textpic-imagerow-last">|</div> oneImageStdWrap.dataWrap = <div class="csc-textpic- image###CLASSES###">|</div> caption.wrap = <div class="csc-textpic-caption" style="max-width: {register:imagewidth}px;">|</div> } } }ROQUIN 22
  23. 23. FLEXIBELE MEDIA • Embedded video • oEmbed (mediaoembed) • FitVids.jsROQUIN 23
  24. 24. FLEXIBELE MEDIA • Wat is Retina? • Het Retina-effect • OplossingenROQUIN 24
  25. 25. FLEXIBELE MEDIA iPhone 3 iPhone 4 grootte (inch) 3,5 3,5 resolutie (px) 480 x 320 960 x 640 pixeldichtheid (ppi) 163 326ROQUIN 25
  26. 26. FLEXIBELE MEDIAROQUIN 26
  27. 27. FLEXIBELE MEDIAROQUIN 27
  28. 28. FLEXIBELE MEDIA • Images “@2” • Gebruik web fonts & CSS3 • Icon fonts (icomoon.io)ROQUIN 28
  29. 29. MEDIA QUERIESROQUIN 29
  30. 30. MEDIA QUERIES • Wat zijn media queries? • Voorbeelden • Breakpoints • Browser supportROQUIN 30
  31. 31. MEDIA QUERIES /* Phones */ @media (max-width: 480px) { ... } /* Medium sized screens */ @media (min-width: 980px) and (max-width: 1199px) { ... }ROQUIN 31
  32. 32. MEDIA QUERIES • This is responsive • http://bradfrost.github.com/this-is-responsive/ROQUIN 32
  33. 33. MEDIA QUERIES Breedte (px) Large display 1200 and up Default 980 Portrait tablets 768 and below Phones to tablets 767 and below Phones 480 and below Bron: Twitter BootstrapROQUIN 33
  34. 34. MEDIA QUERIESROQUIN 34
  35. 35. CONCLUSIEROQUIN 35
  36. 36. CONCLUSIE • Responsive website • Grid, media & media queries • PerformanceROQUIN 36
  37. 37. VRAGEN?ROQUIN 37

×