4 vinkkiä 4K-valmiiden verkkosivustojen suunnitteluun

Olet ehkä vilkaissut ja unohtanut sen, mutta päätöslauselmassa on tapahtunut hieman vallankumous viime vuosina. Aiemmin kokeellisena ja huipputeknologiana pidetyt 4K-näytöt ovat nyt yleisiä: TV-näytöissä, tietokonenäytöissä ja jopa älypuhelimissa.

Kun 4K tarjoaa neljä kertaa niin monta pikseliä tuumalla, verkkosuunnittelijoiden on varmistettava, että heidän verkkosivustonsa näyttävät niin hyviltä kuin pystyvät uusimmilla näytöillä. Tietenkin, jos noudatat jo periaatteita reagoiva web-suunnittelu , joka antaa sinulle suurimman tavan varmistaa, että verkkosivustosi näyttää hyvältä missä tahansa sitä katsotaan. Mutta sen lisäksi tässä on neljä aluetta, joihin sinun on kiinnitettävä erityistä huomiota 4K-aikakaudella ...



01. Käytä skaalautuvaa grafiikkaa

Kuvakkeet, logot ja muut grafiikat tulisi luoda skaalattavina, ei rasterikuvina



Kuvakkeet, logot ja muut grafiikat tulisi luoda skaalattavina, ei rasterikuvina

Jotta verkkosivustosi näyttäisi hyvältä 4K-näytöissä, sinun on käytettävä skaalautuvia eikä rasterikuvia aina kun mahdollista.

Rasterimuodoissa (jotka sisältävät JPEG-, GIF- ja PNG-tiedostoja) jokainen kuva sisältää kiinteän määrän pikseleitä, ja kun niiden koko kasvaa, ne vain pikselöivät ja epäselvät. Skaalautuvat muodot, jotka tunnetaan nimellä SVG (skaalattava vektorigrafiikka), sen sijaan perustuvat geometrisiin muotoihin. Tämä tarkoittaa sitä, että kuinka suuria he ovatkin, ne pysyvät puhtaina ja selkeinä.



Tietenkin sinun on silti käytettävä rasterimuotoja valokuvissa. Tämä tarkoittaa, että sinun on käytettävä mediakyselyjä palvelemaan valokuviesi korkean resoluution versiot 4K- ja 5K Retina -näytöille ja paljon pienempiä, pienikokoisempia versioita mobiililaitteille, jotta vältät sivustosi suorituskyvyn tuhoamisen 3G- ja 4G-yhteyksissä. (Jos työskentelet paljon kuvia, se on syytä huomata Photoshop CC voit viedä yhden kuvan useita kokoja samanaikaisesti.)

Logot, piirustukset, käyttöliittymän työkalut, painikkeet ja niin edelleen tulisi kuitenkin aina luoda SVG: nä. Tämä voidaan tehdä ohjelmistoissa, kuten Adobe Illustrator, CorelDraw ja Affinity Designer. Lisätietoja skaalautuvasta grafiikasta lue meidän 10 kultaista sääntöä reagoiville SVG: lle .

02. Harkitse suurempia näyttöjä

New York Times -sivusto, jonka Jon Yabkonski kuvasi suurella näytöllä



pitäisikö minun mennä taidekoulun tietokilpailuun
New York Times -sivusto, jonka Jon Yabkonski kuvasi suurella näytöllä

Kun ajattelet, miltä verkkosivustosi näyttää 4K-muodossa, muista, että korkeammat tarkkuudet tekevät yhä suuremmista näytöistä suositumpia.

Joten vaikka olemme vasta tottuneet ajatukseen siitä, että sivustojamme katsellaan 1920x1080-näytöillä, meidän on nyt mietittävä, miltä ne näyttävät 2560 pikselin levyisillä näytöillä. Monia verkkosivustoja voi olla vaikea lukea näillä näytöillä, joissa teksti ja sisältö saattavat näyttää supistuneilta ja kutistuneilta, ja tyhjää tilaa on liikaa.

Tämä erinomainen artikkeli Jon Yabkonski CSS Tricks -ohjelmassa käsitellään näiden laajempien näyttöjen teknisiä haasteita ja ehdotetaan joitain ratkaisuja.

kuinka lisätä mukautettuja siveltimiä studiomaalaukseen

03. Käytä 4K-videota

Varastokirjastot, kuten iStock by Getty Images, voivat tarjota laajan valikoiman 4K-materiaaleja

Varastokirjastot, kuten iStock by Getty Images, voivat tarjota laajan valikoiman 4K-materiaaleja

Koska silmämme reagoivat luonnollisesti liikkeeseen tavalla, jonka kanssa still-kuvat eivät voi kilpailla, video on suosittu työkalu verkkosivuston kävijöiden kiinnittämiseen. Olitpa lisäämässä sivustollesi videotunnistetta, videotausta tai strategisia videoleikkeitä, sinun on kuitenkin nyt tarjottava sitä 4K-muodossa, jotta et näyttäisi näppärältä ja vanhanaikaiselta uusimmilla laitteilla.

Nykyään on monia halpoja ja helppoja tapoja kuvata 4K-materiaalia, joista monet ovat uusimpia valokuvakamerat , POV-urheilukamerat ja älypuhelimet tarjoaa 4K-kuvausominaisuudet. Vaihtoehtoisesti, jos sinulla ei ole aikaa tai tarvitset jotain, jota et voisi ampua itse, kuten drone-materiaalia, useimmissa varastokirjastoissa on nyt ladattavissa massoja 4K-videosisältöä.

Katso lisätietoja 4K-videon käytöstä tutustumalla Mitä uusi 4K-videon aalto merkitsee suunnittelijoille .

04. Osta 4K-näyttö

Acer S277HK: n kaltaisen näytön ostaminen vie kaikki arvailut siitä, että sivustosi toimii 4K-muodossa

Acer S277HK: n kaltaisen näytön ostaminen vie kaikki arvailut siitä, että sivustosi toimii 4K-muodossa

Päivän päätteeksi paras tapa olla varma, että verkkosivustosi näyttävät hyvältä 4K-näytöllä - on ilmeisen todettava - ostaa 4K-näyttö. Hyvä uutinen on, että on mahdollista päästä alhaiseksi vain 250 puntaa, vaikka kuten kaikilla muillakin, saat mitä maksat.

Löydät ajan tasalla olevan yhteenvedon sisaryrityksemme TechRadarin uusimmista näytöistä tässä , mutta jos työhösi liittyy 3D, liikkuvaa grafiikkaa ja / tai videon muokkausta, kannattaa ehkä tarkistaa tämä yhteenveto liian.

Lue lisää: