Lopeta Chasing Screen Resolutions
Elämme niin jännittävänä ajankohtana verkon maailmassa. Teknologia ja standardit ovat edenneet nopeudella, joka on ehkä nopeampaa ja jännittävää kuin koskaan. Kun asiat muuttuvat, niin tapamme, ja yksi alue, jonka mielestäni on nähty suurempia muutoksia kuin useimmat, joutuisi olemaan päätöslauselman muutos, jonka laitteet ovat nyt käynnissä.
Päätöslauselma on hauska asia mitata; se ei ole fyysinen koko muutos vaan selkeys muutos. Se ei tee kuvia, kirkkaampia tai värikkäimpiä, mutta tekee niistä tiiviimpiä. Se on myös jotain, että ihmiset harvoin ymmärtävät arvoa, kunnes he näkevät sen itse.
Tietenkin, kun saamme maistaa korkean resoluution näytöt, olemme koukussa. Ja me kaikki haluamme, että verkkosivustomme (ja asiakkaidemme verkkosivut) näyttävät mahtavalta laitteilta, jotka urheilevat näitä näyttöjä. Monet web-suunnittelijat kilpailevat tätä tavoitetta varten luomalla kuvia jokaiselle uudelle päätöslauselmalle, joka tulee meidän tapaamme. Tai, kuten kutsun tässä artikkelissa, "etsimällä näyttöpäätöslauselmia".
Johdatus SVG: hen
Monet meistä tiedämme, mitä SVG: itä (Scalable Vector Graphics) on. Olemme nähneet sen W3C HTML5 -sivustossa kohdassa "3D, Graphics & Effects". SVG on standardi HTML5-tekniikka, joka näyttää koodattuja kuvia. Tai jotain.
Ainakin tämä on yleinen vastaus, jonka sain kun kysyin ihmisiltä SVG-grafiikasta. Kyse ei todellakaan ole siitä, että ihmiset ovat kiinnostuneita siitä, koska sen arvoa ei ole täysin ymmärretty.
Haluan näyttää, miten vältyt "näytön tarkkuuden etsimisestä", ja vain niin tapahtuu, että SVG-standardi voi auttaa meitä vain tekemään sen.
Retina-grafiikan tila
Kun sanon "retina-grafiikka", viittaan mihin tahansa laitteeseen, jonka näytön resoluutio on korkeampi kuin perinteisten näytönohjainten, urheilussa resoluutio yli 72ppi (pikseliä tuumaa kohden).
Apple loi tunnetusti 72pin este iPhone 4: llä, laitteella, jolla oli upea uusi, korkean resoluution näyttö, joka näyttää toisin kuin mitä olimme aiemmin nähneet. Paitsi, kun käytit sitä selailemaan verkkoa ... verkko näytti roskalta.
Webissä oli 72pi optimoidut kuvat. Tämän kirjoittamisen aikana suurin osa webistä on vielä kaksi vuotta iPhone 4: n käynnistämisen jälkeen.
Nyt meillä on kaikenlaisia laitteita, joissa on Retina-laatuinen grafiikka. Se on hitaasti etenevä koko Applen tuotelinjan, ulottuen iPod Touch, iPad ja jopa uusin MacBook Pro. Älypuhelimet ovat popping koko paikassa korkean resoluution näytöillä, niin paljon, että "standardi" -resoluutiota näyttäisi melkein tunne vanha hattu tässä vaiheessa.
Still tarkkuus riippuu
Kun web-suunnitteluyhteisö voitti epäselvien kuvien ongelman ehdollisesti ladattujen @ 2x -kuvien kanssa (kuvat, jotka luotiin kaksinkertaiseksi alkuperäisten vastapuolten koon mukaan ja jotka ladattiin vain suurille laitteille), verkko näytti jälleen hyvältä, . Jotkut suunnittelijat jopa mainitsivat verkkosivuillaan "resoluution itsenäisiksi".
Tietenkin, heidän pitäisi todella mainostaa sivustojaan, koska se oli "optimoitu kahdelle näyttösuoritukselle".
Laitteet parantavat entisestään, resoluutiot pysyvät entistä parempina, ja verkkoa jatketaan yhä useamman muoto-tekijän ansiosta. Entä väistämätön tulevaisuus @ 3x? Entä @ 4x? Entä jos standardi "1x" tulee tarpeettomaksi? Mikä tekee 3x "@ 3x" eikä "@ 2.5x"?
Messi todellakin.
Lisäksi tällainen tekniikka on tuskin yleistä. Selasin verkossa edellä mainitulla MacBook Prollä retina-näytöllä ja suurin osa webistä on valitettavasti tarkalleen missä se on aina ollut iPhone 4: ssä epätarkka. Kaikkien Web-kuviesi luominen uudelleen on vaikea kuulostava tehtävä, varsinkin kun koko web-design-maailma on suunnitellut bittikarttoja niin kauan.
Unzoomable web
Jopa tänään, meidän @ 2x kuvia, emme silti voi zoomata verkkosivuilla ilman, että he menevät ruma uudelleen. Teksti hoitaa zoomauksen hienosti, mutta vertailun vuoksi kuvat vain huutavat tulevista 4x-viennistä (jotain, jota kukaan ei pidä tarkoituksenmukaisena palvelemaan vain mahdollisuuksissa, joiden vuoksi joku haluaisi zoomata 4 kertaa RSS-kuvakkeessasi) .
Going todella itsenäinen ratkaisu
Ongelmana on bittikartta. Olemme aina tienneet, että he eivät ole arvokasta, eikä nyt ole eroa. Tarvitsemme vektorigrafiikkaa sivuillamme. Vektorigrafiikka lasketaan sarjalla ohjeita eikä peitetty ruudukkoon, jossa kukin pikseli edustaa väriä. Anna, SVG.
Yksi koko sopii kaikille
Koska SVG-grafiikka on vektorigrafiikkaa (siis nimeltään "Scalable Vector Graphics"), ne näyttävät mahtavilta eilisen, nykyajan ja jopa huomisen näytön tarkkuuksilta. Lisäksi vektorigrafiikan kaavojen luonteen takia voit zoomata mihin tahansa laitteeseen ja kuvat pysyvät hyvänä.
Nopeampi latausaika
2000px 2000px -kuvan tekeminen web-suunnittelija ei vaikuta järjetöntä. Kestää liian kauan lataamista, se saattaa tuoda joitain mobiililaitteita polvilleen ja 4000px x 4000px "@ 2x" versio olisi hullu. Ja kun päätöslauselmat ovat parempia ja parempia, se on yksinkertaisesti kestämätöntä. SVG: n avulla, koska se on vektorimuoto, ei ole väliä onko kuva 20px tai 2000px; latausaika on täsmälleen sama. Ainoa asia, joka tekee ero kuormitusajoista on kunkin kuvatiedoston monimutkaisuus.
Voit käyttää sitä tänään
SVG: tä ei ehkä tueta koko laudalla, mutta Modernizr voi tunnistaa sen. Palvelemalla SVG- ja ei-SVG-versiota voit hyödyntää SVG: n kaikkia etuja jättämällä vanhoja selaimia @ 1x PNG: llä. Se on niin yksinkertainen kuin tämä:
.no-svg .logo { background: url('logo.png'); }.svg .logo { background: url('logo.svg'); }SVG: n rajoitukset
Ei ole vaikeaa luoda SVG-grafiikkaa mistä tahansa vektoripohjaisesta kuvasta. Monet pro-sovellukset, kuten Adobe Illustrator ja Inkscape, voivat viedä SVG: hen luonnollisesti. On kuitenkin muutamia asioita, jotka sinun on tiedettävä SVG: itä verkossa.
Ne eivät voi sisältää minkäänlaisia bittikarttakuvia.
Varmista, että voit lisätä ne SVG-kirjoitussovelluksiin, kuten Illustrator- tai InkScape-muotoon, ja tallentaa työn SVG-muotoisiksi, mutta ne eivät näytä missä se on väliä: selaimesi. CSS-velho on tarpeen ladata bittikartta SVG: n päälle tarvittaessa.
Voidaan ottaa ikuisesti kuorma, jos se on monimutkaista
Jos teet monimutkaisen SVG: n, sinut lyö kuormituskertoja, jotka eivät poikkea edellä mainitusta 2000px x 2000px -kuvasta. Et halua esimerkiksi piirtää monimutkaista maalausta SVG-muodossa.
Pitää pitää yksinkertaisena
Sovellukset, kuten Illustrator ja Inkscape, voivat tehdä paljon enemmän kuin selaimesi voi käsitellä. He ovat täynnä puhallettuja kuvasovelluksia, eivät web SVG-luojaohjelmia. Itse asiassa on turvallista olettaa, että 90% toiminnoista, joita tällaiset sovellustarjoukset tarjoavat, eivät ole käytettävissä verkossa oleville katsojille. Jos olet perehtynyt vektoriohjelmistoihin, sinun täytyy oppia vaihtoehtoisia tapoja luoda vaikutuksia, joita olette rakastaneet.
Yritä oppia kieltä
SVG-koodi ei ole sellainen, jota voit "nähdä mielessäsi", kuten voit, kun luet HTML: tä. Se on sarja ohjeita, jotka on kartoitettu toisiaan vasten, elementti elementtiä kohti kerros kerrallaan. Valitettavasti nykyään sinun on luultavasti tapettava aika ajoin, koska Adobe Illustrator ei tarjoa joitain tuloksia.
Esimerkiksi Illustrator-kuvissa on kankaalle, johon vedät; se on asetettu leveys asetetun korkeuden mukaan. Tämä on hienoa, mutta jos haluat hallita näitä yksityiskohtia selaimessa, tarvitset tällaisten tietojen poistamista itse SVG: stä (huomaa: jotkut selaimet tulkitsevat CSS: ää riippumatta ilmoitetuista SVG-mitoista, mutta kaikki eivät). Se ei ole erityisen vaikeaa, mutta se voi olla päänsärky. Kannattaa viettää aikaa tutustumalla kieleen, jotta voit manipuloida SVG: itä entisestään.
SVG luontoon
logot
Logojen pitäisi yleensä olla vektorimuodossa joka tapauksessa, joten ne ovat erinomainen tapa tuoda SVG verkkosivustoosi. Käyttämällä yllä olevaa merkintää saat kaiken, mitä tarvitset ensimmäisen SVG-elementteesi verkossa.
kuvakkeet
Kuvakkeet ovat erinomainen hakija SVG: lle. Niin paljon, että olen luonut täydellisen kuvakekokoelman käyttämällä SVG-grafiikkaa. SVG: n skaalautuva luonne tarkoittaa sitä, että kuvakkeita voidaan käyttää millä tahansa koolla, ja niihin mahtuu monenlaisia sivuston malleja.
animaatiot
Animaatiot ovat myös erinomainen tapa SVG-graafiseen käyttöön. Koska animaatiot ovat tyypillisesti sidottu kiinteään leveyteen ja korkeuteen, SVG menee jonkin verran auttamaan animaatioita reagoimaan. Flash käyttää vektorigrafiikan elementtejä, nyt myös HTML5-animaatioita.
Taustakuvat
Taustakuvat ovat aina olleet hankala kohta web-kehittäjille; mahdolliset kuormitusajat, kuten edellä mainitsin, voivat olla hulluja. SVG-taustakuvat voivat olla niin suuret kuin haluat; heillä on silti mukavat kuormitusajat, jos he eivät ole todella monimutkaisia.
johtopäätös
Kaiken kaikkiaan resoluution itsenäisyys on fantastinen tavoite, jolla myös web-suunnittelijat ja kehittäjät pyrkivät. Se tarkoittaa, että niiden suunnittelumaalit ovat vanhentuneita ennen niiden sivuston kuvakuvia. Vaikka on tärkeää lähestyä niitä silmäsi auki, on aika selvää, miten SVG-grafiikka voi siirtää sinut lähemmäksi kokonaisratkaisuun perustuvan itsenäisyyden tulevaisuutta.
Kun lataat SVG-yhteensopivan sivuston korkean resoluution laitteella, kuten iPad 3: ssä, ja voit zoomata, sinut myydään.
Toivon, että tämä artikkeli menee jonkin verran rohkaisemaan resoluution itsenäistä ajattelua web-suunnittelussa ja kehityksessä, ja toivon, että se on rohkaissut jotkut teistä ajattelemaan, miten SVG voi toimia seuraavalla sivustolla.
Olen ollut SVG-altaassa jonkin aikaa, ja minun on sanottava, että vesi ei ole koskaan ollut kauniimpi.
Oletko SVG-muunnos vai käytätkö skaalattuja bittikarttoja verkkokalvojen näytöille? Ovatko vektorit web-grafiikan tulevaisuus? Kerro meille kommentit.
Esitetty kuva / pikkukuva, vektori kuva kautta Shutterstock.