Bilder och responsive webb Andreas Cederbom

En presentation över ämnet: "Bilder och responsive webb Andreas Cederbom"— Presentationens avskrift:

1 Bilder och responsive webb Andreas Cederbom Andreas.cederbom@funkanu.se

2 Utmaningen • Olika skärmstorlekar

3

4 Utmaningen • Olika skärmstorlekar • Olika uppkopplingar

5

6 Utmaningen • Olika skärmstorlekar • Olika uppkopplingar • Olika enheter/kapacitet

7

8 Om webbplatsen ska vara riktigt responsive räcker det inte med en flytande layout, vi måste anpassa exakt vad som skickas till enheten.

9 Bilder för olika situationer • Vektorgrafik (SVG)

10 Klicka på bilden för att öppna exemplet i din webbläsare. Där kan du testa att zooma in och ut.

11 Bilder för olika situationer • Vektorgrafik (SVG) Fördel: Går att zooma obegränsat Nackdel: Filerna ofta ganska stora och fortfarande bristande stöd i webbläsare

12 Bilder för olika situationer • W3C, element http://picture.responsiveimages.org/ http://picture.responsiveimages.org/ • W3C, srcset attribut i element http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/

13 Tillgänglighetstext Information om hur är tänkt att användas/fungera: http://www.webmonkey.com/2012/11/preview-the-proposed-html-picture-element/

14 Bilder för olika situationer • W3C, element http://picture.responsiveimages.org/ http://picture.responsiveimages.org/ • W3C, srcset attribut i element http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ Nackdel: Stöds inte av någon webbläsare idag Fördel: Kan bli ett enkelt, standardiserat sätt att lösa ett stort problem på

15 Bilder för olika situationer • Picturefill https://github.com/scottjehl/picturefill https://github.com/scottjehl/picturefill

16 Exempel: http://scottjehl.github.io/picturefill/

17 Bilder för olika situationer • Picturefill https://github.com/scottjehl/picturefill https://github.com/scottjehl/picturefill Fördelar: Fungerar redan idag Nackdelar: Kräver att ni hanterar flera versioner av varje bild Baserat på script

18 Det finns inga normalanvändare