typo3 congres 2012 - responsive webdesign

37
ROQUIN RESPONSIVE WEBDESIGN 1

Upload: typo3-nederland

Post on 21-May-2015

691 views

Category:

Technology


2 download

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.

TRANSCRIPT

Page 1: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

RESPONSIVEWEBDESIGN

1

Page 2: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

WIJ ZIJN..• Vincent Kessels• Wouter Beeftink

2

Page 3: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

INTERNET ISOVERAL

3

Page 4: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

INTERNET IS OVERAL

4

Page 5: TYPO3 Congres 2012 - Responsive webdesign

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)

Page 6: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

INTERNET IS OVERAL• 12,4 miljoen internetters in Nederland in 2012

• 60% maakt gebruik van mobiel internet

6

Page 7: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

INTERNET IS OVERALVerdeling mobiel internet (CBS, 2012)

7

Telefoon47%

Laptop34%

Tablet19%

Page 8: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

INTERNET IS OVERAL

8

Page 9: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

HOE GAAN WE HIERMEE OM?

9

Page 10: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

HOE GAAN WE HIERMEE OM?

10

• Mobiele website?

• App?

• Responsive website?

Page 11: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

RESPONSIVEWEBSITE

11

Page 12: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

RESPONSIVE WEBSITE• Flexibel grid

• Flexibele afbeeldingen en media

• Media queries (CSS3)

12

Page 13: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

FLEXIBELGRID

13

Page 14: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN 14

Page 15: TYPO3 Congres 2012 - Responsive webdesign

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}

Page 16: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN 16

Zond

er vi

ewpo

rt ta

g

Met

view

port

tag

Page 17: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN 17

Page 18: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN 18

Page 19: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

FLEXIBELEMEDIA

19

Page 20: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

FLEXIBELE MEDIA

20

• Afbeeldingen

• Video’s

• Retina displays

Page 21: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

FLEXIBELE MEDIA

21

img {max-width: 100%;

}

Page 22: TYPO3 Congres 2012 - Responsive webdesign

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> } }}

Page 23: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

FLEXIBELE MEDIA

23

• Embedded video

• oEmbed (mediaoembed)

• FitVids.js

Page 24: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

FLEXIBELE MEDIA

24

• Wat is Retina?

• Het Retina-effect

• Oplossingen

Page 25: TYPO3 Congres 2012 - Responsive webdesign

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

Page 26: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

FLEXIBELE MEDIA

26

Page 27: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

FLEXIBELE MEDIA

27

Page 28: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

FLEXIBELE MEDIA

28

• Images “@2”

• Gebruik web fonts & CSS3

• Icon fonts (icomoon.io)

Page 29: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

MEDIAQUERIES

29

Page 30: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

MEDIA QUERIES• Wat zijn media queries?

• Voorbeelden

• Breakpoints

• Browser support

30

Page 31: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

MEDIA QUERIES

31

/* Phones */@media (max-width: 480px) { ...}

/* Medium sized screens */@media (min-width: 980px) and (max-width: 1199px) { ...}

Page 32: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

MEDIA QUERIES

32

• This is responsive

• http://bradfrost.github.com/this-is-responsive/

Page 33: TYPO3 Congres 2012 - Responsive webdesign

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

Page 34: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

MEDIA QUERIES

34

Page 35: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

CONCLUSIE

35

Page 36: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

CONCLUSIE

36

• Responsive website

• Grid, media & media queries

• Performance

Page 37: TYPO3 Congres 2012 - Responsive webdesign

ROQUIN

VRAGEN?

37