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