Presentation laddar. Vänta.

Presentation laddar. Vänta.

Bilder och responsive webb Andreas Cederbom

Liknande presentationer


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

1 Bilder och responsive webb Andreas Cederbom

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 • W3C, srcset attribut i element

13 Tillgänglighetstext Information om hur är tänkt att användas/fungera:

14 Bilder för olika situationer • W3C, element • W3C, srcset attribut i element 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:

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


Ladda ner ppt "Bilder och responsive webb Andreas Cederbom"

Liknande presentationer


Google-annonser