Stopp Chasing Screen Resolutions
Vi lever i en så spennende tid i verden av nettet. Teknologi og standarder går fremover med en hastighet som kanskje er både raskere og mer spennende enn noensinne. Etter hvert som ting endres, så gjør våre vaner, og et område som jeg tror har sett større endringer enn de fleste, må være endringen i oppløsning som enhetene våre nå kjører.
Oppløsning er en morsom ting å måle; Det er ikke en fysisk størrelsesendring, men en klarhetsendring. Det gjør ikke bilder, lysere eller mer rik på farge, men gjør dem tettere. Det er også noe som folk sjelden forstår verdien av til de ser det for seg selv.
Selvfølgelig, når vi får en smak av høyoppløselige skjermer, er vi hekta. Og vi vil alle at våre nettsteder (og nettstedene til våre kunder) skal se kjempebra ut på enhetene som driver disse skjermene. Mange webdesignere raser mot det målet ved å lage bilder for hver ny oppløsning som kommer vår vei. Eller, som jeg ringer det i denne artikkelen, "jager skjermoppløsninger".
En introduksjon til SVG
Mange av oss vet hva SVGs (Scalable Vector Graphics) er. Vi har sett den på W3C HTML5-nettstedet, under "3D, Graphics & Effects". SVG er en standard HTML5-teknologi, som viser bilder med kode. Eller noe.
I det minste er det det generelle svaret jeg fikk da jeg spurte folk om SVG-grafikk. Det er egentlig ikke noe folk er interessert i, fordi verdien ikke forstås fullt ut.
Jeg vil vise deg hvordan du unngår å jage skjermoppløsninger, og det skjer bare slik at SVG-standarden kan hjelpe oss med å gjøre nettopp det.
Tilstanden av retina grafikk
Når jeg sier "retina grafikk", refererer jeg til enheter som har en skjermoppløsning høyere enn tradisjonelle skjermer, med en oppløsning på over 72ppi (piksler per tomme).
Apple smadret knapt 72ppi-barrieren med iPhone 4, en enhet som hadde en fantastisk ny høyoppløselig skjerm, som ser ut som alt annet vi hadde sett før. Bortsett fra når du brukte den til å bla gjennom nettet ... så weben søppel.
Internett hadde 72ppi optimaliserte bilder. På dette tidspunktet skriver det meste av nettet, to år etter lanseringen av iPhone 4.
Nå har vi alle slags enheter med Retina Quality Graphics. Det går sakte over hele Apple-produktlinjen, og strekker seg til iPod Touch, iPad og til og med den nyeste MacBook Pro. Smarttelefoner dukker opp over alt med høyoppløselige skjermer, så mye at en "standard" oppløsningsvisning nesten føles gammelhue på dette stadiet.
Fortsatt oppløsning avhengig
Når webdesign-fellesskapet overvant det uklare bildeproblemet med betinget lastet @ 2x-bilder (bilder som ble opprettet for å være dobbelt så stor som deres opprinnelige kolleger, bare lastet på høyoppløsningsenheter), så weben godt igjen, for det meste . Noen designere annonserte selv sine nettsteder som "oppløsning uavhengig".
Selvfølgelig, hva de egentlig burde ha annonsert sine nettsteder som var "optimalisert for to skjermoppløsninger".
Enheter vil fortsette å bli bedre, beslutninger vil fortsette å bli bedre, og og nettet vil fortsette å nytes på et økende antall formfaktorer. Hva med den uunngåelige fremtiden @ 3x? Hva med @ 4x? Hva med om standarden "1x" blir unødvendig? Hva gjør 3x "@ 3x" og ikke "@ 2.5x"?
Sint faktisk.
Dessuten er denne typen teknikk knapt utbredt. Jeg surfer på nettet på nevnte MacBook Pro med Retina Display, og det meste av nettet er dessverre akkurat der det alltid har vært siden iPhone 4: uskarpt. Å lage alle dine webbilder igjen er en krevende lydoppgave, spesielt når hele webdesign verden har designet med bitmaps for så lenge.
Unzoomable web
Selv i dag, med våre @ 2x-bilder, kan vi fortsatt ikke zoome inn på nettsider uten at de går gale igjen. Tekst styrer en zoom bare bra, men sammenligner bilder bare for den fremtidige @ 4x-eksporten (noe som ingen vil anse hensiktsmessig for å tjene bare på sjansen for at noen kanskje vil zoome inn 4x på RSS-ikonet ditt) .
Går virkelig oppløsning uavhengig
Problemet er med bitmappede bilder. Vi har alltid kjent at de ikke oppskalere, og nå er det ikke noe annet. Det vi trenger er vektorgrafik på våre nettsider. Vektorgrafikk beregnes med en rekke instruksjoner, i stedet for bakt på et rutenett hvor hver piksel representerer en farge. Skriv inn, SVG.
En størrelse passer alle
Siden SVG-grafikk er vektorgrafikk (derav navnet "Scalable Vector Graphics"), vil de se fantastisk ut i gårsdagens, dagens og til og med morgendagens skjermoppløsninger. I tillegg, på grunn av den formelle karakteren av vektorgrafikk, kan du zoome inn på hvilken som helst enhet, og bildene vil fortsette å se bra ut.
Faste belastningstider
Å lage et 2000px ved 2000px bilde, til en webdesigner, høres ikke så lite som latterlig ut. Det ville ta altfor lang tid å laste, det ville bringe noen mobile enheter på knærne, og 4000px x 4000px "@ 2x" -versjonen ville være galskap. Og ettersom resolusjoner blir bedre og bedre, er det rett og slett uholdbart. Med SVG, siden det er et vektorformat, spiller det ingen rolle om bildet er 20px eller 2000px; Lastetiden vil være nøyaktig den samme. Det eneste som skiller belastningstiden er kompleksiteten til hver bildefil.
Du kan bruke det i dag
SVG kan ikke støttes over hele linja, men Modernizr kan gjenkjenne det. Ved å betjene en SVG- og ikke-SVG-versjon, kan du høste alle fordelene med SVG, mens du forlater eldre nettlesere med en @ 1x PNG. Det er så enkelt som dette:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Begrensninger av SVG
Det er ikke vanskelig å lage SVG-grafikk ut av et vektorbasert bilde. Mange pro-apper som Adobe Illustrator og Inkscape kan eksportere til SVG nativt. Det er imidlertid noen ting du må vite om SVGs på nettet.
De kan ikke inneholde bitmapbilder av noe slag.
Visst, du kan legge dem til i SVG authoring-applikasjoner som Illustrator eller InkScape, og lagre arbeidet ditt som SVGs, men de vil ikke gjengi hvor det betyr noe: nettleseren din. CSS wizardry vil være nødvendig for å laste en bitmap på toppen av SVG når det er aktuelt.
Kan ta for alltid å laste om det er komplisert
Hvis du lager en komplisert SVG, blir du slått med belastetider, ikke ulikt det nevnte 2000px x 2000px bildet. Du ønsker ikke å tegne et komplekst maleri i SVG-format, for eksempel.
Måtte holde det enkelt
Apper som Illustrator og Inkscape kan gjøre mye mer enn nettleseren din kan håndtere. De er fullblåste illustrasjonsprogrammer, ikke web-SVG-skaperenheter. Faktisk er det trygt å anta at 90% av funksjonaliteten som denne typen søknadstilbud vil være utilgjengelig for seere på nettet. Hvis du er kjent med vektorprogramvare, må du lære alternative måter å skape effektene du har kommet på å elske.
Prøv å lære språket
SVG-kode er ikke noe du kan "se i tankene dine" som du kan når du leser HTML. Det er en rekke instruksjoner som er kartlagt henholdsvis mot hverandre, element for element, lag for lag. Dessverre, fra og med i dag, vil du sannsynligvis måtte dyppe der inne fra tid til annen, siden det er noen resultater selv ikke Adobe Illustrator tilbyr.
For eksempel har bilder i Illustrator et lerret du trekker på; Det er en sett bredde med en sett høyde. Det er flott, men hvis du vil kontrollere disse detaljene i nettleseren, må du fjerne slike opplysninger fra SVG selv. Merk: Noen nettlesere vil tolke CSS uansett eventuelle deklarerte SVG-dimensjoner, men ikke alle gjør det. Det er ikke spesielt vanskelig, men det kan være hodepine. Det er vel verdt å bruke litt tid på å bli kjent med språket, slik at du kan manipulere SVGs enda lenger.
SVG i naturen
logoer
Logoer bør vanligvis være i et vektorformat uansett, så de er en fin måte å bringe SVG inn i webdesignene dine. Ved å bruke oppmerkningen ovenfor har du alt du trenger for å ta dine første SVG-elementer online.
ikoner
Ikoner er en flott kandidat til SVG. Så mye at jeg har opprettet et komplett ikonsett ved hjelp av SVG-grafikk. SVGs skalerbare natur betyr at ikonene kan brukes i alle størrelser og imøtekomme et bredt spekter av webdesign.
animasjoner
Animasjoner gjør også et flott tilfelle for SVG-grafisk bruk. Siden animasjoner vanligvis er festet til en fast bredde og høyde, går SVG noen vei mot å hjelpe animasjoner til å bli lydhør. Flash brukt vektorgrafiske elementer, nå kan HTML5 animasjoner også.
Bakgrunnsbilder
Bakgrunnsbilder har alltid vært et vanskelig punkt for webutviklere; De potensielle belastningstider, som jeg nevnte ovenfor, kan være gal. SVG bakgrunnsbilder kan være like store som du liker; de har fortsatt god lastetid, ettersom de ikke er veldig komplekse.
Konklusjon
Alt i alt er oppløsning uavhengighet et fantastisk mål for både webdesignere og utviklere å streve mot. Det vil til og med bety at deres design smaker vil være utdatert før deres nettsted bilder er. Mens det er viktig å nærme seg dem med åpne øyne, er det ganske klart å se hvordan SVG-grafikk kan bevege deg nærmere en fremtid med total oppløsning uavhengighet.
Når du laster opp et SVG-aktivert nettsted på en høyoppløselig enhet som en iPad 3, og du zoomer inn, vil du bli solgt.
Jeg håper denne artikkelen går noen vei mot oppmuntrende oppløsning uavhengig tenkning i webdesign og utvikling, og jeg håper at det har oppfordret noen av dere til å tenke på hvordan SVG kan jobbe for ditt neste nettsted.
Jeg har vært i SVG-bassenget en stund, og jeg må si at vannet aldri har vært mer nydelig.
Er du en SVG-konverterer eller serverer du skalerte bitmaps for netthinnen? Er vektorer fremtiden for webgrafik? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, vektorbilde via Shutterstock.