Bilder och responsive webb Andreas Cederbom
Utmaningen • Olika skärmstorlekar
Utmaningen • Olika skärmstorlekar • Olika uppkopplingar
Utmaningen • Olika skärmstorlekar • Olika uppkopplingar • Olika enheter/kapacitet
Om webbplatsen ska vara riktigt responsive räcker det inte med en flytande layout, vi måste anpassa exakt vad som skickas till enheten.
Bilder för olika situationer • Vektorgrafik (SVG)
Klicka på bilden för att öppna exemplet i din webbläsare. Där kan du testa att zooma in och ut.
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
Bilder för olika situationer • W3C, element • W3C, srcset attribut i element
Tillgänglighetstext Information om hur är tänkt att användas/fungera:
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å
Bilder för olika situationer • Picturefill
Exempel:
Bilder för olika situationer • Picturefill Fördelar: Fungerar redan idag Nackdelar: Kräver att ni hanterar flera versioner av varje bild Baserat på script
Det finns inga normalanvändare