Weboldaltervezés különböző méretű kijelzőkre
Tökéletes megjelenés minden monitoron
Megnézted valaha, hogyan néz ki weboldalad mobilon vagy régebbi vagy újabb monitorokon? Laptopon? Tableten? Ugye, nem ugyanúgy néz ki mindenhol?
Semmi sem lóg ki? Minden jól látható?
(…És mindennek mi köze van a piros ruhás lányhoz? Kattints ide és megtudod!)
Különböző monitorokra kell terveztetni a weboldalunkat, erről szól ez a cikk!
Miért van manapság szükség többféle megjelenítésre?
Milyen megoldásokat alkalmazhatunk arra, hogy honlapunk látogatói kényelmesen használhassák oldalunkat?
Mire figyeljünk oda a képek, grafikák tervezésekor?
Telefon vs. asztali monitor mérete
Ahogy az okostelefonokon (és tableteken) lehetővé vált a weboldalak megtekintése, hamar kiderült, hogy valamit változtatni kell ezeknek a kialakításán, hiszen a telefonok kijelzőjén egy teljes oldal tartalma olvashatatlanul kicsiben jelenik meg, és esélyünk sincs, hogy ujjunkkal eltaláljunk például egy miniatűr gombot.
Kézenfekvő volt, hogy mobiltelefonon egészen más betűméret, tördelés, menürendszer használható.
A lustaság dicsérete…
Mivel a világot az okos de lusta emberek újításai viszik előre („Mindig lusta embert választok ki egy nehéz feladatra. Mert ő talál egy könnyű módszert az elvégzésére.” – Bill Gatesnek tulajdonított mondás), azon gondolkodtak az okos és lusta programozók, hogy hogyan lehetne megoldani azt, hogy egy weboldallal a lehető legkevesebbet kelljen dolgozni, és mégis mindenféle méretű kijelzőn élvezhető módon jelenjen meg a tartalom (halkan jegyzem meg, hogy a látvány nemcsak a kijelző méretétől, hanem felbontásától és a böngészőtől, operációs rendszertől is függ).
Így végül megalkották a weboldalkészítés reszponzív = adaptív = a kijelző méretéhez igazodó lehetőségeit. Vegyük végig, miből választhatunk!
Megoldások a többféle megjelenítésre
1. Kicsit kakukktojás: m.valami.hu
Az egyik megoldás az lehet, ha mobilra egy teljesen külön weboldalt állítunk össze, és még a nevében is megkülönböztetjük az asztali változattól. Ezek a gyakorlatban így szoktak kinézni: m.valami.hu.
Az „m” mutatja, hogy mobilra készült az oldal.
Az ilyen tartalom sokszor „lebutított”, kevesebb képpel, szűkebb menürendszerrel bír, bizonyos funkciók nem működnek, de az oldal gyorsabban betöltődik. Ilyen például az IKEA mobilra fejlesztett honlapja. Nincs rajta például a konyhatervezési applikáció – nehéz is lenne mobilon használni…
Ne felejtsük el, hogy „m.weboldal” esetében két teljesen külön weboldalról beszélünk tulajdonképpen. Ezért neveztem kakukktojásnak ezt a címben.
Az viszont tény, hogy ezt a weboldaltípust is az okostelefonokon internetezés igénye hozta létre.
Előny: kifejezetten mobilra méretezett, optimalizált megjelenés.
Hátrány: kétszeres munka minden változtatáskor.
Ezek is érdekelhetnek:
2. Modulok, menüszerkezet stb. meghatározott mérethez rendelve
A másik lehetőség, ha a weboldalsablon segítségével definiáljuk, hogy milyen képernyőméreten melyik tartalmat jelenítse meg az oldal. Erre az általam használt DIVI sablonon belül például van lehetőség: asztali, tablet- és mobilnézetben engedélyezhetjük vagy tilthatjuk az adott modul tartalmát. Azzal is játszhatunk, hogy milyen menüszerkezet legyen a különböző eszközökön.
Ezeket a lehetőségeket azonban jól át kell gondolni, és csak mértékkel alkalmazni! Például, ha sok képet berakunk különböző méretekben, különböző menüket pakolunk az oldalba, akkor a méret jelentősen nőhet!
Előny: egy weboldalt kell csak kezelni.
Hátrány: a különböző eszközökre szánt modulokat külön-külön lehet csak módosítani. Az oldal mérete nő, ezáltal betöltődési sebessége csökkenhet (egy jól megtervezett oldalnál ez azért elenyésző).
3. All-in-one: egy dizájn mindenre jó
A harmadik megoldás, hogy olyan weboldalt tervezünk, amelynek tartalma minden szempontból igazodik a kijelző méretéhez.
Ez persze nem egyszerű feladat, hiszen mondanivalónk szerkezeti felépítését (menüpontok, menüszerkezet), a tartalmat és a képeket is úgy kell összeraknunk, hogy bármilyen méretű és arányú kijelzőn jól mutasson – és akkor még a Google technikai elvárásairól, valamint a felhasználóbarát megjelenítésről és a keresőoptimalizálási szempontokról nem is beszéltünk.
Előny: egyszeri munkavégzés (lustaság = fél egészség!).
Hátrány: nagy szakértelem szükséges ahhoz, hogy az oldal MINDEN feltételnek (ld. előző bekezdés) a lehető legjobban megfeleljen! Szerencsére vannak hozzáértő szakemberek!
A grafikai tervezés kihívásai reszponzív oldalaknál
Régen könnyű volt szegény grafikusok élete! Megmondták nekik, hogy mekkora helyre tervezzenek, oszt’ terveztek akkora helyre! És szép volt, jó volt, aranymetszés, meg minden…
Ennek a világnak vége! A reszponzív világban a képeknek nincs abszolút méretük, a program az adott képernyőmérethez igazítja, formázza a grafikát. Ezért a grafikusnak is úgy kell terveznie, hogy bármilyen méretben „elég jól” nézzen ki a mű.
A tervezők és megbízók többsége nagyobb monitorokon (asztali vagy legalább laptop) tervezik és ellenőrzik a kész munkát, és csak elvétve nézik meg, milyen is mobilon!
Ezért számtalan olyan esettel találkozhatunk, amikor kiderül, hogy ami a nagy monitoron szép/hasznos/ütős, az értelmetlenné válik egy mobilkijelzőn. Álljon itt erre egy példa.
Mennyit látunk a szép lányokból a nagy monitoron és mennyit mobilon?
Egyértelmű, hogy nem mondhatunk le a szép képekről kisebb kijelzőn sem, így kezelnünk kell a helyzetet!
Itt is többféle megoldásból választhatunk…
A. Több méretben megtervezett grafika
Egy „klasszik”, régivágású reklámügynökségnél emelt hangig fajuló megbeszélésem volt egy grafikus hölggyel, aki ragaszkodott hozzá, hogy akkor mondjam meg, hányféle változatban csinálja meg a fejlécképet, és akkor majd ő annyi méretben megcsinálja!
Nem tudtam megértetni vele, hogy ha csinál is 3 általánosan elfogadott átlagméretűt (asztali, tablet, mobil), akkor sem tudja lefedni a teljes palettát. Hiszen csak mobiltelefonból hányféle méretű kijelző létezik!
Ha megnézzük az előző animált képet, láthatjuk, hány változás történik az asztali verzióknál is, mielőtt a tabletméretre váltana a program. A tablet- és mobilméret az, ahol a menüpontokat úgynevezett „hamburger-ikon” (= 3 párhuzamos volnalka) alá rejtik.
Ettől függetlenül egyes, indokolt esetekben jó megoldás lehet a több méretben elkészített grafika. Például az előző, piros ruhás lányos példánál maradva: ez a banner a legfontosabb eleme a címlapunknak. Ezért indokolt egy asztali (2 lány) és egy mobilos változat (1 lány) elkészítése. Erről a következő pontban írok részletesebben.
B.1. Okostervezés: nem baj, ha a széle nem látszik!
Ha elfogadjuk, hogy különböző képernyőkön különböző mennyiség fog látszani egy képből, akkor ehhez igazodva is terveztethetünk grafikát. Erre jó példa a Crown International Kft. oldalának fejlécképe.
A logó középen helyezkedik el. A grafikustól azt kértem, hogy a cégre jellemző két legfontosabb gép képe, a hegesztőpisztoly és a hegesztőrobot közvetlenül a logó két oldalán helyezkedjen el, így még mobilon is látható legyen. Ahogy egyre nagyobb a monitor mérete, egyre több további eszköz, berendezés képe válik láthatóvá.
Egy másik lehetőség, ha elfogadhatjuk, hogy egy fekvő formátumú monitorra optimalizált kép nem lesz ideális álló mobiltelefonra.
Ilyen esetben terveztethetünk a mobilra egy álló formátumú képet.
Továbbra is a piros ruhás lányos példánál maradva egyiküket kihagyjuk (bocs!), a gomb pedig átfedéssel látható a mobilra optimalizált képen… A lényeg megvan!
Ne érezzük úgy, hogy feladtunk valamit. Hiszen a legfontosabb az olvasó tájékoztatása egy igényes weboldalon. Nem kötelező azonban minden kijelzőn pontosan ugyanazt mutatni.
B.2. Okostervezés: minden eszközön tökéletes megjelenés!
Hozzáértő szakember bevonásával olyan grafikát is terveztethetünk, amely minden képernyőméreten megfelelő látványt nyújt! Erre jó példa ennek a kártevőirtós oldalnak a négy fejlécképe. Az állat minden méretben jól látható, és nem takarja ki zavaróan a telefonszámot.
Így egyetlen képpel elintéztük a fejlécet: a grafikai költség is egyszeri, és a weboldal mérete is a lehető legkisebb. Bingó!
Ez a megoldás azonban nem minden esetben használható és hozzáértő grafikust igényel.
Összegzés
Korunk nagyszerű vívmánya a reszponzív, kijelző méretéhez igazodó weboldaltervezés.
Szerencsére többféle lehetőség közül választhatunk a legjobb felhasználói élmény elérése érdekében, ezért az a legjobb, ha az igényeinknek legjobban megfelelő megoldásokat alkalmazzuk.
Bozókiné Antal Rita
2004 óta onlinemarketing-tanácsadás, marketingstratégia kialakítása, keresőoptimalizálás (SEO), közösségi média részvétel tervezése, kivitelezése. Webhelyadatok elemzése, konkurenciafigyelés, online kampányok kidolgozása. Tartalommarketing, szövegírás.
