TYPO3 Congres 2012 - Responsive webdesign
Post on 21-May-2015
688 Views
Preview:
DESCRIPTION
Transcript
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
top related