1 / 18

Bilder och responsive webb

Bilder och responsive webb. Andreas Cederbom. Andreas.cederbom@funkanu.se. Utmaningen. Olika skärmstorlekar. Utmaningen. Olika skärmstorlekar Olika uppkopplingar. Utmaningen. Olika skärmstorlekar Olika uppkopplingar Olika enheter/kapacitet.

yule
Download Presentation

Bilder och responsive webb

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Utmaningen • Olika skärmstorlekar

  3. Utmaningen • Olika skärmstorlekar • Olika uppkopplingar

  4. Utmaningen • Olika skärmstorlekar • Olika uppkopplingar • Olika enheter/kapacitet

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

  6. Bilder för olika situationer • Vektorgrafik (SVG)

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

  8. 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

  9. Bilder för olika situationer • W3C, <picture> elementhttp://picture.responsiveimages.org/ • W3C, srcset attribut i <img> elementhttp://www.w3.org/html/wg/drafts/srcset/w3c-srcset/

  10. <picturealt="Beskrivning av vad bilden visar"> <source media="(min-width:45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width:18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <imgsrc="small-1.jpg" alt="Beskrivning av vad bilden visar" lazyload> <p>Tillgänglighetstext</p> </picture> Information om hur <picture> är tänkt att användas/fungera: http://www.webmonkey.com/2012/11/preview-the-proposed-html-picture-element/

  11. Bilder för olika situationer • W3C, <picture> elementhttp://picture.responsiveimages.org/ • W3C, srcset attribut i <img> elementhttp://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å

  12. Bilder för olika situationer • Picturefillhttps://github.com/scottjehl/picturefill

  13. <spandata-picturedata-alt="A giant stone face ..."> <spandata-src="small.jpg"></span> <spandata-src="medium.jpg“data-media="(min-width: 400px)"></span> <spandata-src="large.jpg“data-media="(min-width: 800px)"></span> <spandata-src="xlarge.jpg“data-media="(min-width: 1000px)"></span> <!-- Fallback content for non-JS browsers. Same imgsrc as the initial, unqualified source element. --> <noscript> <imgsrc="external/imgs/small.jpg"alt="A giant stone face ... "> </noscript> </span> Exempel: http://scottjehl.github.io/picturefill/

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

  15. Det finns inga normalanvändare

More Related