Hættu að elta skjálausnir
Við lifum á svo spennandi tíma í heimi vefnum. Tækni og staðlar eru áfram á gengi sem er kannski bæði hraðar og spennandi en nokkru sinni fyrr. Eins og hlutirnir breytast, gera venjur okkar og eitt svæði sem ég held hefur séð stærri breytingar en flestir verða að vera breytingin á upplausn sem tækin okkar eru að birtast núna.
Upplausn er fyndið að mæla; Það er ekki líkamleg breyting á stærð, en skýrleiki breytist. Það er ekki að gera myndir, bjartari eða meira ríkur í lit, heldur gera þær þéttari. Það er líka eitthvað sem fólk þekkir sjaldan gildi þar til þeir sjá það fyrir sig.
Auðvitað, þegar við fáum bragð á skjáum með háum upplausn, erum við hrifin. Og við viljum öll vefsíður okkar (og vefsíður viðskiptavina okkar) til að líta vel út á tækjunum sem eru íþrótta þessara sýna. Margir vefhönnuðir eru að keppa í átt að því markmiði með því að búa til myndir fyrir hverja nýja upplausn sem kemur á leiðinni. Eða, eins og ég kalla það í þessari grein, "að elta skjárupplausnir".
Kynning á SVG
Margir af okkur vita hvað SVGs (Scalable Vector Graphics) eru. Við höfum séð það á W3C HTML5 website, undir "3D, Graphics & Effects". SVG er staðall HTML5 tækni, sem sýnir myndir með kóða. Eða eitthvað.
Að minnsta kosti er þetta almennt svar sem ég fékk þegar ég spurði fólk um SVG grafík. Það er í raun ekki eitthvað sem fólk hefur áhuga á því að gildi þess er ekki að fullu skilið.
Ég vil sýna þér hvernig á að forðast "elta skjáupplausn", og það gerist bara svo að SVG staðallinn geti hjálpað okkur að gera það.
Réttindi sjónhimnu
Þegar ég segi "sjónhimnuhönnun" vísar ég til tæki sem eru með skjáupplausn hærri en venjulegir skjáir, íþróttaupplausnarmörk yfir 72ppi (dílar á tommu).
Apple smíðaði gríðarlega 72ppi hindrunina með iPhone 4, tæki sem hafði frábært nýtt hárupplausnarspjald, sem virðist ólíkt því sem við hefðum áður séð. Nema þegar þú notaðir það til að fletta á vefnum ... leit vefinn rusl.
Vefurinn hafði 72ppi bjartsýni myndir. Á þeim tíma sem skrifað er þetta, flestir af vefnum gerir enn, tveimur árum eftir að ráðast á iPhone 4.
Nú höfum við alls konar tæki með Retina Quality Graphics. Það er hægt að komast yfir alla Apple vörulínu, sem nær til iPod Touch, iPad og jafnvel nýjasta MacBook Pro. Snjallsímar eru poppar upp um allt með háum upplausnartölvum, svo mikið að "venjulegt" upplausn birtist næstum gömlum húfu á þessu stigi.
Enn einbeiting háð
Þegar vefhönnunarsamfélagið sigraði óskýrt myndavandamál með skilyrtum 2x myndum (myndir sem voru búnar til að vera tvöfalt stærri upphaflega hliðstæða þeirra, aðeins hlaðin á háskerpu tæki) leit vefurinn vel aftur, að mestu leyti . Sumir hönnuðir auglýsa jafnvel vefsíður sínar sem "upplausn óháð".
Auðvitað, það sem þeir ættu í raun að hafa auglýst síður sínar sem var "bjartsýni fyrir tvo skjáupplausn".
Tæki munu halda áfram að verða betri, ályktanir munu halda áfram að verða betri, og og vefurinn mun halda áfram að njóta á vaxandi fjölda formþátta. Hvað um óumflýjanlegan framtíð @ 3x? Hvað um @ 4x? Hvað um ef staðalinn "1x" verður óþarfa? Hvað gerir 3x "@ 3x" og ekki "@ 2.5x"?
Sóðalegur örugglega.
Ennfremur er þessi tegund af tækni varla útbreidd. Ég flettir á vefnum á framangreindum MacBook Pro með sjónhimnu, og flestir af vefnum eru því miður nákvæmlega þar sem það hefur alltaf verið síðan iPhone 4: þoka. Að búa til öll vefmyndatöku þína aftur er mikilvægt verkefni, sérstaklega þegar allt vefhönnunarsvæði hefur verið að hanna með bitmaps svo lengi.
Unzoomable vefur
Jafnvel í dag, með @ 2x myndum okkar, getum við samt ekki zoomað inn á vefsíðum án þess að þeir fara ljót aftur. Textinn stýrir aðdrátt bara fínt en í samanburði eru myndirnar bara að gráta út fyrir þá framtíð 4x útflutning (eitthvað sem enginn telur rétt að þjóna bara á möguleika á að einhver gæti eins og að súmma inn 4x á RSS táknið) .
Að sjálfsögðu verður sjálfstætt upplausn
Vandamálið er með bitmapped myndir. Við höfum alltaf vitað að þeir uppfæra ekki, og nú er ekkert öðruvísi. Það sem við þurfum er vektor grafík á vefsíðum okkar. Vektor grafík er reiknuð með röð af leiðbeiningum, frekar en bakað á rist þar sem hver pixla táknar lit. Sláðu inn SVG.
Ein stærð sem hentar öllum
Þar sem SVG grafík er vektor grafík (þess vegna nafnið "Scalable Vector Graphics"), munu þeir líta vel út á skjánum í gær, í dag og jafnvel á morgun. Þar að auki, vegna þess að formúlunni er grafík vektor, getur þú súmað inn á hvaða tæki sem er og myndirnar verða áfram að líta vel út.
Hraðari álagstímar
Búa til 2000px við 2000px mynd, til vefhönnuður, hljómar ekkert nema að vera fyrirgefinn. Það myndi taka allt of langt að hlaða, það myndi koma með nokkrum fartölvum á hnén þeirra og 4000px x 4000px "@ 2x" útgáfan væri brjálaður. Og eins og ályktanir verða betri og betri, þá er það einfaldlega ósjálfbær. Með SVG, þar sem það er vektorform, skiptir það ekki máli hvort myndin sé 20px eða 2000px; álagstíminn verður nákvæmlega það sama. Það eina sem skiptir máli fyrir álagstímann er hversu flókið hverja myndskrá er.
Þú getur notað það í dag
SVG má ekki vera studd um borð, en Modernizr geta lögun-uppgötva það. Með því að þjóna SVG og ekki SVG útgáfu getur þú uppskera alla kosti SVG, en skilur arfleifð vafra með @ 1x PNG. Það er eins einfalt og þetta:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }Takmarkanir SVG
Það er ekki erfitt að búa til SVG grafík úr hvaða vektor sem byggir á mynd. Margir atvinnuforrit eins og Adobe Illustrator og Inkscape geta flutt til SVG innfæddur. Það eru nokkrir hlutir sem þú þarft að vita um SVGs fyrir netið, hins vegar.
Þeir geta ekki innihaldið bita kort myndir af einhverju tagi.
Jú, þú getur bætt þeim við í SVG höfundarforritum eins og Illustrator eða InkScape og vistað verkið sem SVGs en þeir munu ekki gera það sem skiptir máli: vafrinn þinn. CSS töframaður verður nauðsynlegt til að hlaða bitmap ofan á SVG þar sem það á við.
Getur tekið að eilífu að hlaða ef flókið
Ef þú gerir flókið SVG, verður þú högg með álagstíma ekki ólíkt fyrrnefndum 2000px x 2000px mynd. Þú vilt ekki að teikna flókið málverk í SVG-sniði, til dæmis.
Gættu þess að það sé einfalt
Forrit eins og Illustrator og Inkscape geta gert miklu meira en vefskoðarinn þinn getur séð um. Þeir eru fullblásið forrit í myndinni, ekki vefur SVG skapandi forrit. Reyndar er það óhætt að gera ráð fyrir að 90% af virkni þessara umsókna verði ekki tiltæk fyrir áhorfendur á vefnum. Ef þú ert kunnugur vektor hugbúnaður þarftu að læra aðrar leiðir til að búa til þau áhrif sem þú hefur komið að elska.
Reyndu að læra tungumálið
SVG kóða er ekki eitthvað sem þú getur "séð í huga þínum" eins og þú getur þegar þú lest HTML. Það er röð af leiðbeiningum sem kortleggja sig á móti hver öðrum, þáttur eftir frumefni, lag fyrir lag. Því miður, eins og í dag, verður þú líklega að dýfa þarna frá og til, þar sem það eru nokkrar niðurstöður, jafnvel Adobe Illustrator býður ekki upp á.
Til dæmis, myndir í Illustrator hafa striga sem þú teiknar á; það er sett breidd með ákveðinni hæð. Það er frábært, en ef þú vilt stjórna þessum upplýsingum í vafranum, þá þarftu að fjarlægja slíkar upplýsingar frá SVG sjálfum (athugaðu: Sumir vafrar munu túlka CSS þinn án tillits til svöruðu SVG stærðar en ekki allir). Það er ekki sérstaklega erfitt, en það getur verið höfuðverkur. Það er vel þess virði að eyða tíma til að kynnast tungumálinu, svo að þú getir unnið SVG enn frekar.
SVG í náttúrunni
Logos
Logos ættu venjulega að vera á vettvangsformi, þannig að það er frábær leið til að koma SVG inn á vefsíðuna þína. Með því að nota merkinguna hér fyrir ofan hefurðu allt sem þú þarft til að taka fyrstu SVG þættina þína á netinu.
Tákn
Tákn eru frábær frambjóðandi fyrir SVG. Svo mikið svo að ég hef búið til fullt táknmynd með SVG grafík. Skalanlegt eðli SVG þýðir að táknin geta verið notaðar í hvaða stærð sem er, sem hýsir fjölbreytt úrval af hönnun vefsvæða.
Teiknimyndir
Teiknimyndir gera einnig frábært mál fyrir SVG grafíska notkun. Vegna þess að fjör eru venjulega bundin við fasta breidd og hæð, þá fer SVG einhvern veginn til að hjálpa fjörum að verða móttækileg. Flash notað vektor grafík þætti, nú HTML5 hreyfimyndir geta líka.
Bakgrunnsmynd
Bakgrunnsmynd hefur alltaf verið erfiður benda fyrir vefur verktaki; Möguleg hleðslutími, eins og ég nefndi hér að framan, getur verið brjálaður. SVG bakgrunnsmynd getur verið eins stór og þú vilt; Þeir hafa ennþá svolítið álagstímabil þar sem þeir eru ekki mjög flóknar.
Niðurstaða
Allt í allt er upplausn sjálfstæði frábært markmið fyrir hönnuði og hönnuði bæði til að leitast við. Það þýðir jafnvel að smekk þeirra muni vera gamaldags áður en myndvinnsla þeirra er. Þó að mikilvægt sé að nálgast þær með augunum opnum, þá er það nokkuð ljóst að sjá hvernig SVG grafík getur fært þig nær framtíð samtals sjálfstæðisupplausnar.
Þegar þú hleður upp SVG-virkt vefsvæði á háupplausnartæki eins og iPad 3, og þú sækir inn verður þú seldur.
Ég vona að þessi grein muni leiða til þess að hvetja til sjálfstæðrar hugsunar á upplausn í vefhönnun og þróun og ég vona að það hafi hvatt nokkra af þér til að hugsa um hvernig SVG geti unnið fyrir næsta vefsvæði þitt.
Ég hef verið í SVG lauginni um stund, og ég verð að segja að vatnið hafi aldrei verið meira yndisleg.
Ert þú SVG umbreyta eða þjónar þú minnkaðar punktamyndir fyrir sjónskerta? Eru vektorar framtíð vefur grafík? Láttu okkur vita í athugasemdunum.