Web design tilpasset mobile enheder.

1. Responsive
web design
Eksempler og links kan
efterfølgende findes på
http://html5.dk

2. Kristian Langborg-Hansen
html5.dk
Planen
Introduktion
Hvad? Hvorfor?!
CSS tilpasset forskellige enheder
Layout til forskellige skærmstørrelser
Fleksible billeder og video
Nej-hatten

3. Kristian Langborg-Hansen
html5.dk
Hvem er jeg?
Kristian Langborg-Hansen

4. Kristian Langborg-Hansen
html5.dk
Udfordringen

5. Kristian Langborg-Hansen
html5.dk
Målet
• Ét website, der er optimeret til både desktop
og mobil
• Automatisk tilpasning af websiden til den
enhed, den vises på

6. Kristian Langborg-Hansen
html5.dk
Løsningen

7. Kristian Langborg-Hansen
html5.dk
Værktøjerne
• CSS Media queries
• Fluid grid layout
• Fleksible billeder og video

8. Kristian Langborg-Hansen
html5.dk
CSS Media Queries
• Det rigtige CSS til den rigtige skærm
• Queries = forespørgsler
– Hvilke betingelser skal være opfyldt, før en style
anvendes?
– Mere end bare print og screen

9. Kristian Langborg-Hansen
html5.dk
Media Types
• All
• Aural
• Braille
• Handheld
• Print
• Projection
• Screen
• TTY
• TV
• Embossed

10. Kristian Langborg-Hansen
html5.dk
Media Features
• Aspect ratio
– aspect-ratio
– device-aspect-ratio
• Farver
– color
– color-index
– monocrome
• Skærmstørrelse
– device-height
– height
– device-width
– Width
– resolution
• Orientering
– orientation

11. Kristian Langborg-Hansen
html5.dk
Kan kombineres
• @media (min-width: 700px)
• @media (min-width: 700px) and (orientation:
landscape)
• @media tv and (min-width: 700px) and
(orientation: landscape)
• @media (min-width: 700px), handheld and
(orientation: landscape)

12. Kristian Langborg-Hansen
html5.dk
Tre måder
• I link-elementet
– <link rel="stylesheet" type="text/css"
media="screen and (min-width: 800px)"
href= "min800.css" /
• Import af stylesheet
– @import url(min800.css) screen and (min-
width: 800px)
• I stylesheet’et
– @media screen and (min-width: 800px)

13. Kristian Langborg-Hansen
html5.dk

14. Kristian Langborg-Hansen
html5.dk

15. Kristian Langborg-Hansen
html5.dk
Twitter Bootstrap
Class
Telefoner
(< 767px )
Tablets
(979 - 768px)
Desktops
(alt andet)
.visible-
phone
Synlig
.visible-tablet Synlig
.visible-
desktop
Synlig
.hidden-
phone
Synlig Synlig
.hidden-
tablet
Synlig Synlig
.hidden-
desktop
Synlig Synlig

16. Kristian Langborg-Hansen
html5.dk
CSS Grid
• Kommende web-standard fra W3C
– W3C Working Draft, 4 April 2013
• Direkte understøttelse af fluid grids i CSS
• Understøttelse
– Kun Internet Explorer 10
– Forventes i næste version af Chrome (version 27)

17. Kristian Langborg-Hansen
html5.dk

18. Kristian Langborg-Hansen
html5.dk
Fleksibelt layout
• Alt er relativt
• Ingen absolutte størrelser
• Farvel til px og pt
• Goddag til em og %

19. Kristian Langborg-Hansen
html5.dk
Fleksibelt layout
h1 {
font-size: 1.5 em;
}
h1 pre {
font-size: 0.5 em;
}

20. Kristian Langborg-Hansen
html5.dk
Fleksibelt layout
h1 {
font-size: 1.5 em;
}
h1 pre {
font-size: 0.5 em;
}
Body vises med
skriftstørrelse 12 pt
1.5 x 12 pt = 18 pt
0.5 x 18 pt = 9 pt

21. Kristian Langborg-Hansen
html5.dk
Fleksibelt layout
h1 {
font-size: 1.5 em;
}
h1 pre {
font-size: 0.5 em;
}
Body vises med
skriftstørrelse 24 pt
1.5 x 24 pt = 36 pt
0.5 x 36 pt = 18 pt

22. Kristian Langborg-Hansen
html5.dk
Fra absolut til relativt
• Design til en absolut oplevelse på din egen
skærm
• Konvertér alle størrelser til deres releative
forhold
• em = ønsket størrelse / kontekst
• % = ønsket størrelse / kontekst

23. Kristian Langborg-Hansen
html5.dk
Opgave
• Hvilken størrelse har elementer med klassen stor
i en h2, hvis body font-størrelse er 12 pt?
• h2 {
font-size: 1.5 em;
}
.stor {
font-size: 125%;
}

24. Kristian Langborg-Hansen
html5.dk
Opgave
• Hvilken procentssats skal h2 have for at få
punktstørrelse 24, hvis body har
punktstørrelse på 12.

25. Kristian Langborg-Hansen
html5.dk
Fleksible billeder og video
• Tilpas billedstørrelsen i CSS
• Billeder i forskellige størrelser
• Undlad billeder på små enheder

26. Kristian Langborg-Hansen
html5.dk
Skalering i CSS
img {
max-width: 100%;
}

27. Kristian Langborg-Hansen
html5.dk
Klip i CSS (crop)
.crop {
width: 200px;
height: 150px;
overflow: hidden;
}
.crop img {
width: 400px;
height: 300px;
margin: -75px 0 0 -100px;
}

28. Kristian Langborg-Hansen
html5.dk

29. Kristian Langborg-Hansen
html5.dk
Billeder i forskellige størrelser
• Kan gøres med en hel masse Javascript og if
• Eller med RWD Image toolkit’et
<img src="small.r.jpg" data-
fullsrc="large.jpg">
• Under overfladen
– Url-rewriting i Javascript og .htaccess
– DOM-manipulering

30. Kristian Langborg-Hansen
html5.dk
Test af responsive web design
• http://codenerd.dk/responsive/

31. Kristian Langborg-Hansen
html5.dk
Hvorfor ikke Responsive Web Design?

32. Kristian Langborg-Hansen
html5.dk
Netværkshastighed
• Enhedens overførselshastighed tages ikke i
betragtning
• En mobil enhed er ikke altid langsom
• En iPad Retina er ikke altid hurtig

33. Kristian Langborg-Hansen
html5.dk
Hastighed
• Ressourcer bruges på
– Tilpasning af billeder
– Håndtering af layout
– Fortolkning af ekstra Javascript og CSS

34. Kristian Langborg-Hansen
html5.dk
Unødvendig data
• Data der skjules på små enheder, skal alligevel
hentes
• Alternativt skal der hentes Javascript til at
undlade at hente det

35. Kristian Langborg-Hansen
html5.dk
Mere kode
• Større risiko for fejl
• Større omkostning til vedligeholdelse
• Sværere at overskue

36. Kristian Langborg-Hansen
html5.dk
Mobil er ikke desktop
• Det er ikke nok at ændre layoutet
• Mobil og desktop bruges forskelligt
– Slide er lækkert på en telefon
– ...men ikke ret nemt at gøre med en mus

37. Kristian Langborg-Hansen
html5.dk
Mere?
www.html5.dk
@html5dk
linkedin.com/in/krhansen