Stop met het volgen van schermresoluties
We leven in zo'n spannende tijd in de wereld van het web. Technologie en normen gaan vooruit met een snelheid die misschien zowel sneller als opwindender is dan ooit. Terwijl de dingen veranderen, veranderen onze gewoonten en een gebied waarvan ik denk dat het grotere veranderingen heeft ondergaan dan de meeste, zou de verandering in resolutie moeten zijn die onze apparaten nu uitvoeren.
Resolutie is iets grappigs om te meten; het is geen fysieke grootteverandering, maar een verandering in duidelijkheid. Het maakt geen beelden, helderder of rijker van kleur, maar maakt ze dichter. Het is ook iets waar mensen zelden de waarde van begrijpen totdat ze het voor zichzelf zien.
Natuurlijk, als we proeven van hoge-resolutiedisplays te zien krijgen, zijn we verslaafd. En we willen allemaal dat onze websites (en de websites van onze klanten) er geweldig uitzien op de apparaten die op deze displays staan. Veel webontwerpers racen naar dat doel door beelden te maken voor elke nieuwe resolutie die op onze weg komt. Of, zoals ik het in dit artikel noem, "op zoek naar schermresoluties".
Een inleiding tot SVG
Velen van ons weten wat SVG's (Scalable Vector Graphics) zijn. We hebben het op de W3C HTML5-website gezien, onder "3D, afbeeldingen en effecten". SVG is een standaard HTML5-technologie die afbeeldingen met code weergeeft. Of zoiets.
Althans, dat is de algemene reactie die ik kreeg toen ik mensen naar SVG-afbeeldingen vroeg. Het is niet echt iets waar mensen in geïnteresseerd zijn, omdat de waarde ervan niet volledig wordt begrepen.
Ik wil u laten zien hoe u kunt voorkomen dat u "achtervolgd wordt" op schermresoluties, en het gebeurt gewoon dat de SVG-standaard ons daarbij kan helpen.
De staat van de retina-graphics
Als ik 'retina-graphics' zeg, verwijs ik naar apparaten met een schermresolutie die hoger is dan die van traditionele beeldschermen, met een resolutie die ver boven de 72ppi (pixels per inch) ligt.
Apple heeft de 72ppi-barrière met de iPhone 4 verbrijzeld, een apparaat dat een fantastisch nieuw, hoogresolutieweergave had, dat er anders uitziet dan al het andere dat we eerder hadden gezien. Behalve toen je het gebruikte om op internet te surfen ... zag het web er onzin uit.
Het web had 72ppi geoptimaliseerde afbeeldingen. Op het moment dat dit wordt geschreven, doet het grootste deel van het web dat nog steeds, twee jaar na de lancering van de iPhone 4.
Nu hebben we allerlei apparaten met grafische afbeeldingen van Retina-kwaliteit. Hij vindt langzaam zijn weg over de hele Apple-productlijn, tot aan de iPod Touch, iPad en zelfs de nieuwste MacBook Pro. Smartphones duiken overal op met displays met een hoge resolutie, zozeer zelfs dat een "standaard" resolutiedisplay in dit stadium bijna ouderwets aanvoelt.
Nog steeds afhankelijk van de resolutie
Toen de webontwerpgemeenschap het probleem met de wazige beelden overwon met voorwaardelijk geladen @ 2x-afbeeldingen (afbeeldingen die dubbel zo groot waren als hun originele tegenhangers, alleen geladen op apparaten met een hoge resolutie), zag het web er voor het grootste deel weer goed uit . Sommige ontwerpers hebben zelfs hun websites geadverteerd als "onafhankelijk van de resolutie".
Natuurlijk, wat ze echt hadden geadverteerd hun sites zoals was "geoptimaliseerd voor twee schermresoluties".
Apparaten zullen steeds beter worden, resoluties zullen steeds beter worden, en op het web zal nog steeds van steeds meer vormfactoren worden genoten. Hoe zit het met de onvermijdelijke toekomst @ 3x? Hoe zit het met @ 4x? Hoe zit het als de standaard "1x" onnodig wordt? Wat maakt 3x "@ 3x" en niet "@ 2.5x"?
Rommelig inderdaad.
Wat meer is, dit soort techniek is nauwelijks wijdverbreid. Ik surf op het web op de eerder genoemde MacBook Pro met Retina Display en het meeste van het web is helaas precies waar het altijd al is geweest sinds de iPhone 4: wazig. Het opnieuw maken van al uw webafbeeldingen is een zware klustaak, vooral wanneer de hele webontwerpwereld al zo lang ontwerpt met bitmaps.
Unzoomable web
Zelfs vandaag kunnen we met onze @ 2x afbeeldingen nog steeds niet inzoomen op webpagina's zonder dat ze weer lelijk worden. Tekst beheert een zoomlens prima, maar in vergelijking, schreeuwen de beelden gewoon om die toekomstige @ 4x export (iets dat niemand gepast vindt om alleen maar op de kans te geven dat iemand 4x wil inzoomen op je RSS-pictogram) .
Gaat echt onafhankelijk van de resolutie
Het probleem is met bitmap-afbeeldingen. We hebben altijd geweten dat ze niet upscalen en dat is niet anders. Wat we nodig hebben, is vectorafbeeldingen op onze websites. Vectorafbeeldingen worden berekend aan de hand van een reeks instructies, in plaats van op een raster te worden gebakken, waarbij elke pixel een kleur vertegenwoordigt. Enter, SVG.
One size fits all
Omdat SVG-afbeeldingen vectorafbeeldingen zijn (vandaar de naam "Scalable Vector Graphics"), zien ze er geweldig uit op de schermresoluties van gisteren, vandaag en zelfs morgen. Bovendien kunt u, vanwege de formules van vectorafbeeldingen, inzoomen op elk apparaat en blijven de afbeeldingen er geweldig uitzien.
Snellere laadtijden
Het maken van een 2000px bij 2000px afbeelding, voor een webontwerper, klinkt ronduit belachelijk. Het zou veel te lang duren om te laden, het zou sommige mobiele apparaten op hun knieën brengen, en de 4000px x 4000px "@ 2x" -versie zou gekkigheid zijn. En als resoluties beter en beter worden, is het gewoon onhoudbaar. Met SVG maakt het niet uit of het beeld 20px of 2000px is, omdat het een vectorformaat is; de laadtijd zal exact hetzelfde zijn. Het enige dat een verschil maakt voor de laadtijden, is de complexiteit van elk beeldbestand.
Je kunt het vandaag nog gebruiken
SVG wordt mogelijk niet overal ondersteund, maar Modernizr kan feature-detecteren. Door een SVG- en een niet-SVG-versie te gebruiken, kunt u alle voordelen van SVG benutten, terwijl u oude browsers met een @ 1x PNG achterlaat. Het is zo simpel als dit:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Beperkingen van SVG
Het is niet moeilijk om SVG-afbeeldingen te maken op basis van vectorafbeeldingen. Veel professionele apps zoals Adobe Illustrator en Inkscape kunnen native naar SVG exporteren. Er zijn echter een paar dingen die u moet weten over SVG's voor internet.
Ze kunnen geen bitmapafbeeldingen van welke aard dan ook bevatten.
Natuurlijk kun je ze toevoegen in SVG-ontwerptoepassingen, zoals Illustrator of InkScape, en je werk opslaan als SVG's, maar ze zullen niet weergeven waar het toe doet: je webbrowser. CSS-tovenarij zal nodig zijn om waar nodig een bitmap op de SVG te laden.
Het kan een eeuwigheid duren om te laden als het ingewikkeld is
Als u een gecompliceerde SVG maakt, wordt u geraakt met laadtijden die niet veel verschillen van de eerder genoemde 2000px x 2000px-afbeelding. Je zou bijvoorbeeld geen complex schilderij in SVG-formaat willen tekenen.
Ik moet het simpel houden
Apps zoals Illustrator en Inkscape kunnen veel meer dan uw webbrowser aankunnen. Het zijn complete illustratie-apps, geen web-SVG-creator-apps. In feite is het veilig om te veronderstellen dat 90% van de functionaliteit die dat soort toepassingen biedt, niet beschikbaar zal zijn voor kijkers op internet. Als je bekend bent met vectorsoftware, moet je alternatieve manieren leren om de effecten te creëren waar je van houdt.
Probeer de taal te leren
SVG-code is niet iets dat je "in gedachten" kunt zien zoals je kunt wanneer je HTML leest. Het is een reeks instructies die telkens tegen elkaar worden afgebeeld, element voor element, laag voor laag. Helaas, vanaf vandaag zul je er waarschijnlijk af en toe een duik in moeten nemen, omdat er enkele resultaten zijn die zelfs Adobe Illustrator niet biedt.
Beelden in Illustrator hebben bijvoorbeeld een canvas waarop u tekent; het is een ingestelde breedte op een ingestelde hoogte. Dat is geweldig, maar als u die details in de browser wilt beheren, moet u dergelijke informatie van de SVG zelf verwijderen (let op: sommige browsers interpreteren uw CSS ongeacht de gedeclareerde SVG-dimensies, maar niet allemaal). Het is niet bijzonder moeilijk, maar het kan hoofdpijn zijn. Het is de moeite waard om wat tijd te besteden aan het leren kennen van de taal, zodat je SVG's nog verder kunt manipuleren.
SVG in the Wild
logos
Logo's moeten sowieso over het algemeen in vectorformaat zijn, dus ze zijn een geweldige manier om SVG in uw website-ontwerpen te brengen. Door bovenstaande markup te gebruiken, heb je alles wat je nodig hebt om je eerste SVG-elementen online te nemen.
Icons
Pictogrammen zijn een geweldige kandidaat voor SVG. Zozeer zelfs dat ik een volledige icon set heb gemaakt met SVG-graphics. Het schaalbare karakter van SVG betekent dat de pictogrammen op elke grootte kunnen worden gebruikt, met een breed scala aan site-ontwerpen.
animaties
Animaties zijn ook prima geschikt voor grafisch SVG-gebruik. Omdat animaties meestal worden vastgemaakt aan een vaste breedte en hoogte, gaat SVG een eindje verder in de richting van het helpen reageren van animaties. Flash gebruikte vector grafische elementen, nu kunnen HTML5-animaties ook.
Achtergrondafbeeldingen
Achtergrondafbeeldingen zijn altijd een lastig punt geweest voor webontwikkelaars; de potentiële laadtijden, zoals ik hierboven vermeldde, kunnen gek zijn. SVG-achtergrondafbeeldingen kunnen zo groot zijn als u wilt; ze hebben nog steeds pittige laadtijden, mits ze niet echt complex zijn.
Conclusie
Al met al is resolutie-onafhankelijkheid een fantastisch doel voor zowel webontwerpers als ontwikkelaars. Het betekent zelfs dat hun ontwerpsmaak verouderd is voordat hun site-beeldmateriaal is. Hoewel het belangrijk is om ze met uw ogen te benaderen, is het vrij duidelijk hoe SVG-afbeeldingen u dichter bij een toekomst van totale resolutie-onafhankelijkheid kunnen brengen.
Wanneer u een door SVG geactiveerde site op een apparaat met een hoge resolutie laadt zoals een iPad 3 en u inzoomt, wordt u verkocht.
Ik hoop dat dit artikel een manier is om resolutie onafhankelijk denken in webontwerp en -ontwikkeling aan te moedigen, en ik hoop dat het sommigen van jullie heeft aangemoedigd na te denken over hoe SVG kan werken voor jouw volgende site.
Ik ben een tijdje in de SVG-pool geweest en ik moet zeggen dat het water nog nooit zo heerlijk is geweest.
Ben je een SVG-conversie of gebruik je geschaalde bitmaps voor retina-beeldschermen? Zijn vectoren de toekomst van webafbeeldingen? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, vector afbeelding via Shutterstock.