Stoppa Chasing Screen Resolutions
Vi lever i en så spännande tid i webens värld. Teknik och standarder går framåt med en hastighet som kanske är både snabbare och mer spännande än någonsin. När saker förändras, så gör våra vanor och ett område som jag tror har sett större förändringar än de flesta skulle behöva vara den förändring i upplösning som våra enheter nu kör.
Upplösning är en rolig sak att mäta; Det är inte en fysisk storleksändring, utan en klarhetsförändring. Det gör inte bilder, ljusare eller mer rik på färg, men gör dem tätare. Det är också något som människor sällan förstår värdet av tills de ser det för sig själva.
Naturligtvis, när vi får en smak av högupplösta bildskärmar, är vi fasta. Och vi vill alla att våra webbplatser (och våra kunders webbplatser) ser jättebra ut på de enheter som sportar dessa skärmar. Många webbdesigners kämpar mot det målet genom att skapa bilder för varje ny upplösning som kommer vår väg. Eller, som jag kallar det i den här artikeln, "jagar skärmupplösningar".
En introduktion till SVG
Många av oss vet vad SVGs (Scalable Vector Graphics) är. Vi har sett den på W3C HTML5-webbplatsen, under "3D, Graphics & Effects". SVG är en standard HTML5-teknik som visar bilder med kod. Eller något.
Åtminstone är det det allmänna svaret jag fick när jag frågade om SVG-grafik. Det är inte riktigt något folk är intresserade av, eftersom dess värde inte är fullt ut förstått.
Jag vill visa dig hur man undviker "jagar skärmupplösningar", och det händer bara att SVG-standarden kan hjälpa oss att göra just det.
Näthinnans grafik
När jag säger "retina grafik", hänvisar jag till enheter som har en skärmupplösning som är högre än den för traditionella skärmar, som sportar ett upplösningsväg över 72ppi (pixlar per tum).
Apple krossade 72ppi-barriären med iPhone 4, en enhet som hade en fantastisk ny högupplöst upplösning som ser ut som allt vi någonsin sett tidigare. Bortsett från när du använde den för att bläddra på nätet ... såg webben skräp.
Webben hade 72ppi optimerade bilder. Vid skrivandet av detta gör det mesta av webben fortfarande två år efter lanseringen av iPhone 4.
Nu har vi alla typer av enheter med Retina Quality Graphics. Det går långsamt över hela Apples produktlinje, som sträcker sig till iPod Touch, iPad och till och med den senaste MacBook Pro. Smartphones dyker upp överallt med högupplösta skärmar, så mycket att en "standard" upplösningsdisplay nästan känns gammal hatt på detta stadium.
Stillbildsberoende beroende
När webbdesignsamfundet överträffade problemet med suddiga bilder med villkorligt laddade @ 2x-bilder (bilder som skapades för att vara dubbelt så stor som deras ursprungliga motsvarigheter, endast laddade på högupplösningsenheter) såg webben bra igen, för det mesta . Vissa designers annonserade även sina webbplatser som "upplösningsoberoende".
Naturligtvis, vad de egentligen borde ha annonserat sina webbplatser som "optimerade för två skärmupplösningar".
Enheterna fortsätter att bli bättre, resolutioner fortsätter att bli bättre, och webben kommer fortsättningsvis att uppskattas med allt fler formfaktorer. Vad sägs om den oundvikliga framtiden @ 3x? Vad sägs om @ 4x? Vad sägs om standarden "1x" blir onödig? Vad gör 3x "@ 3x" och inte "@ 2.5x"?
Messy verkligen.
Dessutom är denna typ av teknik knappast utbredd. Jag surfar på webben på ovannämnda MacBook Pro med Retina Display, och det mesta av webben är tyvärr precis där det alltid har varit sedan iPhone 4: suddigt. Att skapa alla dina webbbilder igen är en svår uppgift, särskilt när hela webdesignvärlden har utformat med bitmappar för så länge.
Ozoombar web
Även idag, med våra @ 2x-bilder, kan vi fortfarande inte zooma in på webbsidor utan att de går ful igen. Text hanterar en zoom bara bra, men i jämförelse skriker bilder bara för den framtida @ 4x-exporten (något som ingen anser vara lämpliga för att fungera precis vid chansen att någon kanske vill zooma in 4x på din RSS-ikon) .
Kommer verkligen upplösning oberoende
Problemet är med bitmappade bilder. Vi har alltid visat att de inte uppskalar, och nu är det inte annorlunda. Vad vi behöver är vektorgrafik på våra webbplatser. Vektorgrafik beräknas med en serie instruktioner, snarare än bakad på ett galler där varje pixel representerar en färg. Ange, SVG.
En storlek passar alla
Eftersom SVG-grafik är vektorgrafik (d.v.s. namnet "skalbar vektorgrafik"), kommer de att se fantastiska ut på gårdagens, dagens och även morgondagens skärmupplösningar. På grund av den grafiska arten av vektorgrafik kan du dessutom zooma in på vilken enhet som helst, och bilderna kommer att fortsätta se bra ut.
Snabbare belastningstider
Att göra en 2000px vid 2000px-bild, till en webbdesigner, låter inget mindre än löjligt. Det skulle ta alltför lång tid att ladda, det skulle föra några mobila enheter på knä och 4000px x 4000px "@ 2x" -versionen skulle vara galenskap. Och som resolutioner blir bättre och bättre, det är helt enkelt ohållbart. Med SVG, eftersom det är ett vektorformat spelar det ingen roll om bilden är 20px eller 2000px; lasttiden kommer att vara exakt densamma. Det enda som gör skillnaden i belastningstiderna är komplexiteten hos varje bildfil.
Du kan använda det idag
SVG kanske inte stöds över hela linjen, men Modernizr kan funktion-upptäcka det. Genom att servera en SVG- och icke-SVG-version kan du skörda alla fördelar med SVG, samtidigt som du lämnar äldre webbläsare med en @ 1x PNG. Det är så enkelt som det här:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Begränsningar av SVG
Det är inte svårt att skapa SVG-grafik utifrån vilken vektorbaserad bild som helst. Många pro apps som Adobe Illustrator och Inkscape kan exporteras till SVG native. Det finns dock några saker som du behöver veta om SVGs på webben.
De kan inte innehålla bitmappsbilder av något slag.
Visst, du kan lägga till dem i SVG authoring-applikationer som Illustrator eller InkScape, och spara ditt jobb som SVGs, men de kommer inte att göra var det är viktigt: din webbläsare. CSS wizardry kommer att behövas för att ladda en bitmapp ovanpå SVG där det är lämpligt.
Kan ta för evigt att ladda om det är komplicerat
Om du gör en komplicerad SVG, kommer du att träffas med belastningstider, inte till skillnad från den ovan nämnda 2000px x 2000px-bilden. Du skulle inte vilja dra en komplex målning i SVG-format, till exempel.
Måste hålla det enkelt
Appar som Illustrator och Inkscape kan göra mycket mer än din webbläsare kan hantera. De är fullblåsta illustration apps, inte webb SVG skapare apps. Faktum är att det är säkert att anta att 90% av funktionaliteten som den typen av ansökningserbjudanden kommer att vara otillgänglig för tittare på webben. Om du är bekant med vektorsoftware måste du lära dig alternativa sätt att skapa effekterna du har blivit kär.
Försök att lära sig språket
SVG-kod är inte något du kan "se i ditt sinne" som du kan när du läser HTML. Det är en serie instruktioner mappade mot varandra, element för element, lager för lager. Tyvärr, från och med idag måste du förmodligen dyka in där och då, eftersom det finns några resultat även Adobe Illustrator erbjuder inte.
Till exempel har bilder i Illustrator en duk du drar på; Det är en uppsättning bredd med en inställd höjd. Det är bra, men om du vill styra informationen i webbläsaren behöver du sådan information som avlägsnas från SVG själv. Obs! Vissa webbläsare tolkar din CSS oberoende av några deklarerade SVG-dimensioner, men inte alla gör det. Det är inte särskilt svårt, men det kan vara en huvudvärk. Det är väl värt att spendera lite tid att lära känna språket, så att du kan manipulera SVGs ännu längre.
SVG i det vilda
Logos
Logotyper borde i alla fall alltid vara i ett vektorformat, så de är ett bra sätt att ta med SVG till dina webbdesigner. Genom att använda markeringen ovan har du allt du behöver för att ta dina första SVG-element online.
ikoner
Ikoner är en bra kandidat för SVG. Så mycket så att jag har skapat en hel ikonuppsättning med SVG-grafik. SVGs skalbara karaktär innebär att ikonerna kan användas i alla storlekar och tillgodose ett brett utbud av webbdesigner.
animationer
Animationer gör också ett bra fall för SVG-grafisk användning. Eftersom animationer normalt är bundna till en fast bredd och höjd, går SVG något sätt att hjälpa animationerna att bli mottagliga. Flash används vektorgrafikelement, nu kan HTML5-animationer också.
Bakgrundsbilder
Bakgrundsbilder har alltid varit en knepig punkt för webbutvecklare. De potentiella belastningstiderna, som jag nämnde ovan, kan vara galen. SVG-bakgrundsbilder kan vara lika stora som du vill De har fortfarande snygga belastningstider, eftersom de inte är väldigt komplexa.
Slutsats
Sammantaget är upplösningsoberoende ett fantastiskt mål för webbdesigners och utvecklare att sträva efter. Det kommer även att betyda att deras design smaker kommer att vara föråldrade innan deras webbplatsbilder är. Medan det är viktigt att närma sig dem med dina ögon öppna, är det ganska tydligt att se hur SVG-grafiken kan flytta dig närmare en framtid av total upplösningsoberoende.
När du laddar upp en SVG-aktiverad webbplats på en högupplöst enhet som en iPad 3, och du zoomar in så kommer du att säljas.
Jag hoppas att den här artikeln går något för att uppmuntra till oberoende tänkande i webbdesign och utveckling, och jag hoppas att det har uppmuntrat några av er att tänka på hur SVG kan fungera för din nästa sajt.
Jag har varit i SVG-poolen ett tag, och jag måste säga att vattnet aldrig har varit mer underbart.
Är du en SVG-konverterare eller serverar du skalade bitmaps för näthinnan? Är vektorer framtiden för webbgrafik? Låt oss veta i kommentarerna.