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

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 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 ka 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 näiteks kallima mobiilse andmesidega ei peaks kõik oma väikestele mobiiliekraanidele maksimumresolutsiooniga 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 pole enam üldse keeruline, sest isegi tippklassi mobiilid salvestavad 4K kvaliteedis.

Jaga
Nõuandja