4 tipp egy 4K-kész webhely tervezéséhez

Lehet, hogy pislogott és elmulasztotta, de az utóbbi években egy kis forradalom történt a felbontásban. Az egykor kísérleti és csúcstechnikának tekintett 4K képernyők napjainkban mindennaposak: a tévéképernyőkön, a számítógépes monitorokon és még az okostelefonokon is.

Mivel a 4K hüvelykenként négyszer annyi pixelt kínál, a webdesigntereknek meg kell győződniük arról, hogy webhelyeik a lehető legkiválóbbak a legújabb képernyőkön. Természetesen, ha már követed az elveket reszponzív webdesign , ezzel a legtöbb esetben biztosíthatja, hogy webhelye jól nézzen ki bárhol is. De ezen túl itt van négy olyan terület, amelyre különösen figyelnie kell a 4K-korszakban ...

01. Használjon méretezhető grafikát

Az ikonokat, logókat és más grafikákat méretezhető, nem raszterképként kell létrehozni

Az ikonokat, logókat és más grafikákat méretezhető, nem raszterképként kell létrehozni

Ahhoz, hogy webhelye jól nézzen ki a 4K képernyőkön, skálázható, nem pedig raszteres képeket kell használnia, ahol csak lehetséges.

A raszteres formátumok (amelyek JPEG-ket, GIF-eket és PNG-ket tartalmaznak) esetén minden kép rögzített számú pixelt tartalmaz, és így a méretük növekedésével egyre több pixellált és elmosódott lesz. Az SVG (méretezhető vektorgrafika) néven ismert méretezhető formátumok ezzel szemben geometriai alakzatokon alapulnak. Ez azt jelenti, hogy bármilyen nagyok is legyenek, tiszták és tiszták maradnak.

Természetesen továbbra is raszteres formátumokat kell használnia a fényképek elkészítéséhez. Ami azt jelenti, hogy média lekérdezéseket kell használnia a fényképek nagyfelbontású verzióinak 4K és 5K Retina képernyőkön való megjelenítéséhez, és sokkal kisebb, alacsony felbontású változatok mobileszközökhöz történő kiszolgálásához, hogy elkerülje webhelye teljesítményének megsemmisítését 3G és 4G kapcsolatokon. (Ha sok képpel dolgozik, akkor érdemes megjegyezni Photoshop CC lehetővé teszi egyetlen kép egyszerre több méretben történő exportálását.)

A logókat, rajzokat, felhasználói felület eszközöket, gombokat és így tovább mindig SVG-ként kell létrehozni. Ez megtehető olyan szoftverekben, mint az Adobe Illustrator, a CorelDraw és az Affinity Designer. Ha többet szeretne megtudni a méretezhető grafikáról, olvassa el a mi oldalunkat 10 aranyszabály az érzékeny SVG-k számára .

02. Fontolja meg a nagyobb kijelzőket

A New York Times weboldala, Jon Jabkonski által egy nagy monitoron

A New York Times weboldala, Jon Jabkonski által egy nagy monitoron

Ha arra gondol, hogy webhelye hogyan fog kinézni 4K-ban, ne feledje, hogy a nagyobb felbontások népszerűsítik az egyre nagyobb képernyőket.

Tehát bár csak most szoktuk meg azt az elképzelést, hogy webhelyeinket 1920x1080-as monitorokon nézzük meg, most azon kell gondolkodnunk, hogy fognak kinézni a 2560 pixel széles kijelzőkön. Számos webhely nehezen olvasható ezeken a képernyőkön, ahol a szöveg és a tartalom összeszűkültnek és összezsugorodottnak tűnhet, és túl sok a szóköz.

Ez kiváló cikk, Jon Yabkonski a CSS Tricks oldalon foglalkozik e szélesebb kijelzők technikai kihívásaival, és néhány megoldást javasol.

03. Használjon 4K videót

Az olyan állománykönyvtárak, mint az iStock by Getty Images, széles skálát kínálnak a 4K felvételekről

Az olyan állománykönyvtárak, mint az iStock by Getty Images, széles skálát kínálnak a 4K felvételekről

Mivel a szemünk természetesen úgy reagál a mozgásra, hogy az állóképek nem versenyezhetnek, a videó népszerű eszköz a weboldal látogatóinak figyelmének felkeltésére. De függetlenül attól, hogy videofejlécet, videohátteret vagy stratégiai videoklipeket ad hozzá a webhelyéhez, most 4K-ban kell szolgáltatnia, hogy elkerülje a legújabb eszközökön mutatkozó és régimódi megjelenést.

Manapság számos olcsó és egyszerű mód van a 4K-s felvételek készítésére, a legfrissebbek sokaságával fényképezőgépek , POV sportkamerák és okostelefonok 4K felvételi képességeket kínál. Alternatív megoldásként, ha nincs ideje, vagy szüksége van valamire, amelyet nem tudna lelőni, például drónfelvételek, a legtöbb készletkönyvtárban 4K videotartalom tömege van letölthető.

Ha többet szeretne megtudni a 4K videó használatáról, nézze meg Mit jelent a 4K videó új hulláma a tervezők számára .

04. Vásároljon 4K monitort

Ha olyan monitort vásárol, mint az Acer S277HK, az összes találgatással elkerülhető, hogy webhelye 4K-ban működjön

Ha olyan monitort vásárol, mint az Acer S277HK, az összes találgatással elkerülhető, hogy webhelye 4K-ban működjön

A nap végén a legjobb módja annak, hogy weboldalai jól nézzenek ki egy 4K monitoron - nyilvánvalóan kijelentve - 4K monitor vásárlása. A jó hír az, hogy akár 250 fontért is be lehet jutni, bár mint mindenhez hasonlóan, meg is kapja, amiért fizet.

A TechRadar testvéroldalunk legfrissebb monitorjainak naprakész összesítését találja itt , míg ha munkája 3D-vel, mozgásgrafikával és / vagy videószerkesztéssel jár, érdemes megnéznie ezt a körképet is.

Olvass tovább: