Upload
typo3-nederland
View
691
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.
Citation preview
ROQUIN
RESPONSIVEWEBDESIGN
1
ROQUIN
WIJ ZIJN..• Vincent Kessels• Wouter Beeftink
2
ROQUIN
INTERNET ISOVERAL
3
ROQUIN
INTERNET IS OVERAL
4
ROQUIN
INTERNET IS OVERAL
5
2007 2008 2009 2010 2011 2012 2013 2014 2015
200018001600140012001000800600400200
0
Inte
rnet
geb
ruik
ers
(in m
iljoe
nen)
DESKTOPMOBIEL
Wereldwijd internetgebruik (comScore, 2012)
ROQUIN
INTERNET IS OVERAL• 12,4 miljoen internetters in Nederland in 2012
• 60% maakt gebruik van mobiel internet
6
ROQUIN
INTERNET IS OVERALVerdeling mobiel internet (CBS, 2012)
7
Telefoon47%
Laptop34%
Tablet19%
ROQUIN
INTERNET IS OVERAL
8
ROQUIN
HOE GAAN WE HIERMEE OM?
9
ROQUIN
HOE GAAN WE HIERMEE OM?
10
• Mobiele website?
• App?
• Responsive website?
ROQUIN
RESPONSIVEWEBSITE
11
ROQUIN
RESPONSIVE WEBSITE• Flexibel grid
• Flexibele afbeeldingen en media
• Media queries (CSS3)
12
ROQUIN
FLEXIBELGRID
13
ROQUIN 14
ROQUIN
FLEXIBEL GRID
15
/* HTML */<meta name="viewport" content="width=device-width, initial-scale=1.0" />
/* TypoScript */page.meta {! viewport = width=device-width, initial-scale=1.0}
ROQUIN 16
Zond
er vi
ewpo
rt ta
g
Met
view
port
tag
ROQUIN 17
ROQUIN 18
ROQUIN
FLEXIBELEMEDIA
19
ROQUIN
FLEXIBELE MEDIA
20
• Afbeeldingen
• Video’s
• Retina displays
ROQUIN
FLEXIBELE MEDIA
21
img {max-width: 100%;
}
ROQUIN
FLEXIBELE MEDIA
22
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
FLEXIBELE MEDIA
23
• Embedded video
• oEmbed (mediaoembed)
• FitVids.js
ROQUIN
FLEXIBELE MEDIA
24
• Wat is Retina?
• Het Retina-effect
• Oplossingen
ROQUIN
FLEXIBELE MEDIA
25
iPhone 3 iPhone 4
grootte (inch) 3,5 3,5
resolutie (px) 480 x 320 960 x 640
pixeldichtheid (ppi) 163 326
ROQUIN
FLEXIBELE MEDIA
26
ROQUIN
FLEXIBELE MEDIA
27
ROQUIN
FLEXIBELE MEDIA
28
• Images “@2”
• Gebruik web fonts & CSS3
• Icon fonts (icomoon.io)
ROQUIN
MEDIAQUERIES
29
ROQUIN
MEDIA QUERIES• Wat zijn media queries?
• Voorbeelden
• Breakpoints
• Browser support
30
ROQUIN
MEDIA QUERIES
31
/* Phones */@media (max-width: 480px) { ...}
/* Medium sized screens */@media (min-width: 980px) and (max-width: 1199px) { ...}
ROQUIN
MEDIA QUERIES
32
• This is responsive
• http://bradfrost.github.com/this-is-responsive/
ROQUIN
MEDIA QUERIES
33
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
MEDIA QUERIES
34
ROQUIN
CONCLUSIE
35
ROQUIN
CONCLUSIE
36
• Responsive website
• Grid, media & media queries
• Performance
ROQUIN
VRAGEN?
37