3 soovitust: kuidas teha veeb 4K monitoride jaoks ilusaks?

Pane tähele! Artikkel on ilmunud enam kui 5 aastat tagasi ning kuulub Geeniuse digitaalsesse arhiivi.

Need arvamused, et 4K jaoks pole veebis vaja midagi teha, on jäänud juba aastate taha – isegi sülereid on juba 4K ekraanidega, lauamonitoridest rääkimata. Muidu täiesti korralik veeb võib aga neli korda Full HD-st suurema punktihulgaga ekraanidel hoopis teistsugune välja näha. Seega ei tee paha oma veebi arendades korraks ka sellisele kasutajagrupile mõelda.

Põhiline, mis 4K monitoride kasutajatel silma hakkab paljudes veebides käies, on tühjus ja karvasevõitu pildid. Tühjus tekib sellest, et veebi kujunduselemendid ja plokid ei venita end kogu neli korda suurema pinna peale laiemaks või ei jätku sisu nii paljude punktide jaoks. Karvased pildid aga tähendavad, et kui tavaveebis näidatakse veebi jaoks vähendatud mahuga pilte veel normaalse kvaliteediga, siis neli korda suuremaks venitades on kvaliteedikaod selgelt näha.

Mida siis saab oma veebiga ette võtta, et see aina kasvav kliendisegment ka kodulehte kenasti näeks?

Siin on kolm esmast soovitust.

1. Kasuta vektorgraafikat

Veebi disainielemendid ja graafika peavad vähe ruumi võtma, kuid see tähendab kvaliteetsetel ekraanidel selget kvaliteedikadu. Kui kasutad rasterformaadis graafikat (JPG, GIF, PNG jm), siis igal graafikaelemendil on kindel hulk piksleid, mida 4K ekraanil näidatakse lihtsalt neli korda suuremana ja see muudab väljanägemise kehvaks ja laialivalgunuks.

Selle asemel kasuta vektorgraafikat – näiteks SVG faile, mis joonistavad terava ikooni või graafikaelemendi ka suure punktitihedusega ekraanil kenasti selgete äärte ja värvidega.

2. Kasuta muutuvat disaini ka üle 2560 piksli laiustel ekraanidel

Enamasti tehakse koduleht valmis nii, et taustapildid ei hakkaks korduma näiteks 1920 x 1080 pikslisel ekraanil ja et veerud laotuksid kogu ekraanipinda ära kasutades just sellisele suurusele. Proovi luua disain ka 3840-pikslisele ekraanile või lase arendajal teha. Vaata tulemust 4K monitoril, et veenduda, kas kujundus on sellisel seadmel mugav ja ilus. Tavaliselt tehakse responsive ehk seadme ekraanisuurusega kohanduv veebikujundus pigem väiksematele mobiiliekraanidele kohanduv, kuid suured ekraanid unustatakse. Seega pea meeles neli korda tavalisest Full HD-st suuremaid pindu, kus kodulehte võidakse vaadata.

3. Kasuta kvaliteetseid pilte ja 4K videot

Veebide arendamisel on võimalik vastavalt ekraanisuurusele näidata ka erineva kvaliteediga pilte, et kulukama mobiilse andmesidega ei peaks kõik oma väikestele mobiiliekraanidele maksimum-resolutsiooniga fotosid ja videosid üle neti tõmbama.

Seega serveeri 4K monitoridele kõrgema reolutsiooniga pilte, mis tähendab sisu postitaja jaoks samuti kõrgemaid nõudeid illustratsioonidele ning kui kasutad taustavideoid või videopleiereid, proovi hankida 4K kvaliteedis materjal. See polegi enam üldse keeruline, sest isegi tippklassi mobiilid salvestavad 4K kvaliteedis.

Populaarsed lood mujal Geeniuses

Igal argipäeval

Ära jää ilma päeva põnevamatest lugudest

Saadame sulle igal argipäeval ülevaate tehnoloogia-, auto-, raha- ja meelelahutusportaali olulisematest lugudest.