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.

1. RESPONSIVE
WEBDESIGN
ROQUIN 1

2. WIJ ZIJN..
• Vincent Kessels
• Wouter Beeftink
ROQUIN 2

3. INTERNET IS
OVERAL
ROQUIN 3

4. INTERNET IS OVERAL
ROQUIN 4

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 2015
ROQUIN 5

6. INTERNET IS OVERAL
• 12,4 miljoen internetters in Nederland in 2012
• 60% maakt gebruik van mobiel internet
ROQUIN 6

7. INTERNET IS OVERAL
Verdeling mobiel internet (CBS, 2012)
Tablet
19%
Telefoon
47%
Laptop
34%
ROQUIN 7

8. INTERNET IS OVERAL
ROQUIN 8

9. HOE GAAN WE
HIERMEE OM?
ROQUIN 9

10. HOE GAAN WE HIERMEE OM?
• Mobiele website?
• App?
• Responsive website?
ROQUIN 10

11. RESPONSIVE
WEBSITE
ROQUIN 11

12. RESPONSIVE WEBSITE
• Flexibel grid
• Flexibele afbeeldingen en media
• Media queries (CSS3)
ROQUIN 12

13. FLEXIBEL
GRID
ROQUIN 13

14. ROQUIN 14

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. Zonder viewport tag
ROQUIN
Met viewport tag
16

17. ROQUIN 17

18. ROQUIN 18

19. FLEXIBELE
MEDIA
ROQUIN 19

20. FLEXIBELE MEDIA
• Afbeeldingen
• Video’s
• Retina displays
ROQUIN 20

21. FLEXIBELE MEDIA
img {
max-width: 100%;
}
ROQUIN 21

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. FLEXIBELE MEDIA
• Embedded video
• oEmbed (mediaoembed)
• FitVids.js
ROQUIN 23

24. FLEXIBELE MEDIA
• Wat is Retina?
• Het Retina-effect
• Oplossingen
ROQUIN 24

25. FLEXIBELE MEDIA
iPhone 3 iPhone 4
grootte (inch) 3,5 3,5
resolutie (px) 480 x 320 960 x 640
pixeldichtheid (ppi) 163 326
ROQUIN 25

26. FLEXIBELE MEDIA
ROQUIN 26

27. FLEXIBELE MEDIA
ROQUIN 27

28. FLEXIBELE MEDIA
• Images “@2”
• Gebruik web fonts & CSS3
• Icon fonts (icomoon.io)
ROQUIN 28

29. MEDIA
QUERIES
ROQUIN 29

30. MEDIA QUERIES
• Wat zijn media queries?
• Voorbeelden
• Breakpoints
• Browser support
ROQUIN 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 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 Bootstrap
ROQUIN 33

34. MEDIA QUERIES
ROQUIN 34

35. CONCLUSIE
ROQUIN 35

36. CONCLUSIE
• Responsive website
• Grid, media & media queries
• Performance
ROQUIN 36

37. VRAGEN?
ROQUIN 37