Responsive web design

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

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

html5.dk
Hvem er jeg?

html5.dk
Udfordringen

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å

html5.dk
Løsningen

html5.dk
Værktøjerne
• CSS Media queries
• Fluid grid layout
• Fleksible billeder og video

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

html5.dk
Media Types
• All
• Aural
• Braille
• Handheld
• Print
• Projection
• Screen
• TTY
• TV
• Embossed

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

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)

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)

html5.dk

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

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)

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

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

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

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

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

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

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

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

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

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

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

html5.dk
Test af responsive web design
• http://codenerd.dk/responsive/

html5.dk
Hvorfor ikke Responsive Web Design?

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

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

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

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

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

html5.dk
Mere?
www.html5.dk
@html5dk
linkedin.com/in/krhansen

Responsive web design

More Related Content

Viewers also liked (9)

Similar to Responsive web design (20)

Responsive web design

Editor's Notes