Stop chasing skærmopløsninger
Vi lever i sådan en spændende tid i verden af internettet. Teknologi og standarder går fremad med en hastighed, der måske er både hurtigere og mere spændende end nogensinde. Som tingene ændrer sig, så gør vores vaner, og et område, som jeg tror har set større ændringer end de fleste, skulle være den forandring i opløsning, som vores enheder nu kører.
Opløsning er en sjov ting at måle; Det er ikke en fysisk størrelsesændring, men en klarhedsændring. Det gør ikke billeder, lysere eller mere farverige, men gør dem tættere. Det er også noget, som folk sjældent forstår værdien af, indtil de ser det for sig selv.
Selvfølgelig, når vi får en smag af skærme med høj opløsning, er vi hooked. Og vi vil alle have vores hjemmesider (og hjemmesider for vores kunder) at se fantastisk ud på de enheder, der er sportslige disse displays. Mange webdesignere kører mod det mål ved at lave billeder til hver ny opløsning, der kommer vores vej. Eller som jeg kalder det i denne artikel, "jagter skærmopløsninger".
En introduktion til SVG
Mange af os ved, hvad SVG'er (Scalable Vector Graphics) er. Vi har set det på W3C HTML5-webstedet under "3D, Graphics & Effects". SVG er en standard HTML5 teknologi, der viser billeder med kode. Eller noget.
I det mindste er det det generelle svar, jeg fik, da jeg spurgte folk om SVG-grafik. Det er ikke rigtigt noget folk er interesseret i, fordi dets værdi ikke er fuldt ud forstået.
Jeg vil gerne vise dig, hvordan man undgår "jagter skærmopløsninger", og det sker bare så, at SVG-standarden kan hjælpe os med at gøre netop det.
Tilstanden af nethinden grafik
Når jeg siger "retina grafik", henviser jeg til enheder, der har en skærmopløsning højere end den for traditionelle skærme, der har en opløsning på over 72ppi (pixels per inch).
Apple slog smukt 72ppi-barrieren med iPhone 4, en enhed, der havde en fantastisk ny højopløsningsskærm, der ligner noget andet, vi havde set før. Bortset fra når du brugte det til at surfe på internettet ... så weben vrøvl.
Weben havde 72ppi optimerede billeder. På dette tidspunkt skriver det meste af internettet to år efter lanceringen af iPhone 4.
Nu har vi alle mulige enheder med Retina Quality Graphics. Det går langsomt på tværs af hele Apple-produktlinjen, der strækker sig til iPod Touch, iPad og endda den nyeste MacBook Pro. Smartphones popper op overalt med skærme med høj opløsning, så meget, at en "standard" opløsningsvisning næsten føles gamle hat på dette stadium.
Opløsning stadig afhængig
Når webdesignsamfundet overvandt det uklare billedproblem med betinget indlæste @ 2x billeder (billeder, der blev oprettet til at være dobbelt så store som deres originale modparter, kun indlæst på high-res-enheder), så internettet godt igen, for det meste . Nogle designere annoncerede endda deres hjemmesider som "resolution uafhængige".
Selvfølgelig, hvad de egentlig burde have annonceret deres websteder som var "optimeret til to skærmopløsninger".
Enheder vil fortsætte med at blive bedre, beslutninger vil fortsætte med at blive bedre, og og internettet vil fortsat blive nydt på et stigende antal formfaktorer. Hvad med den uundgåelige fremtid @ 3x? Hvad med @ 4x? Hvad med om standarden "1x" bliver unødvendig? Hvad gør 3x "@ 3x" og ikke "@ 2,5x"?
Messy faktisk.
Desuden er denne type teknik næppe udbredt. Jeg surfer på nettet på ovennævnte MacBook Pro med retina display, og det meste af internettet er desværre præcis, hvor det altid har været siden iPhone 4: sløret. Oprettelse af alle dine webbilleder igen er en vanskelig lydende opgave, især når hele webdesign verden har udviklet sig med bitmaps i så lang tid.
Unzoomable web
Selv i dag, med vores @ 2x billeder, kan vi stadig ikke zoome ind på websider uden at de går grimme igen. Tekst styrer en zoom bare fint, men i sammenligning skrækker billeder kun for de fremtidige @ 4x-eksport (noget, som ingen finder det hensigtsmæssigt at tjene lige uden for chance for at nogen måske vil zoome ind 4x på dit RSS-ikon) .
Går virkelig opløsning uafhængig
Problemet er med bitmappede billeder. Vi har altid vidst, at de ikke opskalere, og nu er det ikke anderledes. Hvad vi har brug for er vektorgrafik på vores hjemmesider. Vektor grafik beregnes ved hjælp af en række instruktioner, snarere end bagt på et gitter, hvor hver pixel repræsenterer en farve. Indtast, SVG.
En størrelse passer alle
Da SVG-grafik er vektorgrafik (dvs. navnet "Scalable Vector Graphics"), vil de se fantastisk ud på gårdagens, dagens og endda morgendagens skærmopløsninger. På grund af den grafiske karakter af vektorgrafik kan du også zoome ind på en hvilken som helst enhed, og billederne vil forblive flotte.
Hurtigere belastningstider
At lave et 2000px ved 2000px billede, til en webdesigner, lyder intet mindre end latterligt. Det ville tage alt for lang tid at indlæse, det ville bringe nogle mobile enheder på deres knæ, og 4000px x 4000px "@ 2x" -versionen ville være galskab. Og som beslutninger bliver bedre og bedre, er det simpelthen uholdbart. Med SVG, da det er et vektorformat, er det ligegyldigt, om billedet er 20px eller 2000px; belastningstiden vil være nøjagtig den samme. Det eneste der gør en forskel for belastningstiderne er kompleksiteten af hver billedfil.
Du kan bruge det i dag
SVG må ikke understøttes over hele linjen, men Modernizr kan funktionen registrere det. Ved at betjene en SVG- og ikke-SVG-version kan du høste alle fordelene ved SVG, mens du forlader legacy browsere med en @ 1x PNG. Det er så enkelt som dette:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Begrænsninger af SVG
Det er ikke svært at oprette SVG-grafik ud af et vektorbaseret billede. Mange pro apps som Adobe Illustrator og Inkscape kan eksportere til SVG indbygget. Der er dog et par ting, som du skal vide om SVG'er til internettet.
De kan ikke indeholde bitmapbilleder af nogen art.
Sikker på, du kan tilføje dem i SVG authoring applikationer som Illustrator eller InkScape, og gemme dit arbejde som SVGs, men de vil ikke gøre, hvor det betyder noget: din webbrowser. CSS-wizardry er nødvendigt for at indlæse en bitmap oven på SVG, hvor det er relevant.
Kan tage for evigt at indlæse hvis kompliceret
Hvis du laver en kompliceret SVG, bliver du ramt med belastningstider, ikke ulig det førnævnte 2000px x 2000px billede. Du vil ikke gerne tegne et komplekst maleri i f.eks. SVG-format.
Måtte holde det enkelt
Apps som Illustrator og Inkscape kan gøre meget mere, end din webbrowser kan håndtere. De er fulde blæste illustration apps, ikke web SVG creator apps. Faktisk er det sikkert at antage, at 90% af funktionaliteten, som disse typer af applikationstilbud vil være utilgængelige for seere på internettet. Hvis du er bekendt med vektor software, skal du lære alternative måder at skabe de effekter, du er kommet til at elske.
Prøv at lære sproget
SVG-kode er ikke noget, du kan "se i dit sind", som du kan, når du læser HTML. Det er en række instruktioner kortlagt henholdsvis mod hinanden, element for element, lag for lag. Uheldigvis vil du sandsynligvis nødt til at dyppe derinde fra tid til anden, da der er nogle resultater, som Adobe Illustrator ikke tilbyder.
For eksempel har billeder i Illustrator et lærred du trækker på; Det er en sæt bredde med en indstillet højde. Det er godt, men hvis du vil kontrollere disse oplysninger i browseren, skal du fjerne sådanne oplysninger fra SVG'en selv (Bemærk: nogle browsere vil fortolke dit CSS uanset eventuelle deklarerede SVG-dimensioner, men ikke alle gør). Det er ikke særlig svært, men det kan være hovedpine. Det er værd at bruge lidt tid på at lære sproget at kende, så du kan manipulere SVGs endnu mere.
SVG i det vilde
Logos
Logoer burde typisk være i et vektorformat, så de er en fantastisk måde at bringe SVG ind på dit website design. Ved at bruge markeringen ovenfor har du alt, hvad du skal bruge til at tage dine første SVG elementer online.
Ikoner
Ikoner er en stor kandidat til SVG. Så meget, at jeg har oprettet et komplet ikon sæt ved hjælp af SVG grafik. SVGs skalerbare karakter betyder, at ikonerne kan bruges i enhver størrelse og rummer en bred vifte af site designs.
Animationer
Animationer gør også en god sag til SVG grafisk brug. Da animationer typisk er bundet til en fast bredde og højde, går SVG en eller anden måde hen imod at hjælpe animationerne til at blive lydhøre. Flash brugt vektor grafiske elementer, nu kan HTML5 animationer også.
Baggrundsbilleder
Baggrundsbilleder har altid været et vanskeligt punkt for webudviklere; De potentielle belastningstider, som jeg nævnte ovenfor, kan være vanvittige. SVG baggrundsbilleder kan være så store, som du kan lide; de har stadig snappy load gange, da de ikke er virkelig komplekse.
Konklusion
Alt i alt er opløsning uafhængighed et fantastisk mål for webdesignere og udviklere både at stræbe efter. Det vil endda betyde, at deres design smager vil være forældet før deres websted billeder er. Selvom det er vigtigt at nærme dem med dine øjne åbent, er det ret klart at se, hvordan SVG-grafikken kan bevæge dig tættere på en fremtid med total opløsningsuafhængighed.
Når du indlæser et SVG-aktiveret websted på en højopløsningsenhed som en iPad 3, og du zoomer ind, vil du blive solgt.
Jeg håber, at denne artikel går i retning af at opmuntre til selvstændig tænkning i webdesign og udvikling, og jeg håber, at det har opfordret nogle af jer til at tænke på, hvordan SVG kan arbejde for dit næste websted.
Jeg har været i SVG-poolen i et stykke tid, og jeg må sige, at vandet aldrig har været mere dejligt.
Er du en SVG-konverter eller tjener du skalede bitmaps til nethinden? Er vektorer fremtiden for webgrafik? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, vektor billede via Shutterstock.