Checklistan: 3 eller färre bilder för utseendet

Del 6 av 13 för att argumentera för checklistan som fokuserar på webbprestanda och användbarhet.

Idag bör kompetenta utvecklare använda CSS istället för bilder. I forntiden, då när man gjorde layout med tabeller, använde man bilder som blank.gif för att knuffa bokstäver in från vänstermarginalen. Dessutom kunde man inte räkna med att CSS funkade i äldre webbläsare.

Idag, däremot, finns det lösningar på de flesta av dessa problem. De kallas för polyfills, shims och en del annat, men poängen är att de lappar & lagar på gamla usla webbläsare och tillåter frontend-utvecklaren (den som skriver CSS, HTML och Javascript) att använda modern webbstandardiserad kod.

Anledningen till att vi vill hålla nere antalet filer är samma som i tidigare poster, extra filer bidrar med extra väntetid – vilket särskilt gäller de med svajig internetuppkoppling. Bäst är som alltid att skicka så lite som möjligt och bara det som man absolut måste.

“Men då slänger jag in en webbfont, en SVG och en CSS sprite!”

Javisst, men dessa tre lösningar är ju i många fall lösning på samma behov. Men då har man ändå hållt sig till max tre vilket är min rekommendation.

Webbfonter kan, förutom att beskriva utseendet på text, innehålla ikoner man använder på sin webbsida. Kanske ett hus för hem, ett kuvert för kontakt m.m. Webbfonter är dessutom skalbara och passar därför bra på webben idag när man inte vet vilken storlek på skärm besökaren kan tänkas ha.

En responsiv webb kan också använda SVG (Scalable Vector Graphics). Med SVG kan du rent utav visa olika mycket detaljer i illustrationer från SVG-filen beroende på vilken yta som finns tillgänglig – responsiv ikonhantering med andra ord.

CSS Sprites för ramverket Twitter Bootstrap

Den mer inarbetade lösningen är CSS sprites (se bildkartan ovan från Twitter Bootstrap). Den går ut på att man har massor av bilder sammansatta till en enda bild. Sedan använder man CSS för att ha ett litet “titthål” mot den bildkartan – man positionerar alltså bildkartan bakom ett titthål och då syns bara önskad bild.

Leave a Reply

Your email address will not be published. Required fields are marked *