Responsive webdesign – mit jelent, és miért jó nekem?
A responsive webdesign nemcsak lekicsinyítés – tabletre, vagy mobil eszközre, sőt egyáltalán nem az.
A responsive webdesign egy új, struktúrált szemléletmód, melynek lényege, hogy a weboldalunk nagyszerűen és jól alkalmazkodva jelenik meg asztali gép monitorán, laptopon, táblagépen (tablet) és a különféle mobiltelefonok verzióin.
Más megjelenítésre van szükség, ha a honlapunk egy asztali gép monitorán, egy laptop képernyőjén jelenik meg – itt a design lehet tartalomban gazdag, méretarányaiban kihasználhatjuk a széles (képernyő) formát és a nagy felbontást, a struktúrát ennek megfelelően készítjük el. Itt még nem kicsinyítünk és nem dobunk ki semmit.
Táblagép – itt már kisebb felbontás és kisebb megjelenítés jellemző (de még mindig elég nagy felület).
Itt már figyelnünk kell arra, hogy az álló és fekvő pozícionálás is bejön a képbe, és ennek megfelelően alakítsuk ki a rugalmas szélességet – tartalom és kód szempontjából is.
Például:
- kisebb fejléc kép,
- kisebb tartalmi rész – több oszlop esetén vagy méretarányosan csökken a két oszlop szélessége, vagy a kisebb oszlop lekerül az első oszlop tartalma alá, és méretarányosan megnövekszik az első oszlopnak megfelelően.
- Amennyiben az asztali gép monitorán megjelenő designunk tartalmazott háttérképet, vagy egész egyszerűen a honlap szélessége nem borította be az egész monitort, tehát a tartalmi résztől jobbra és balra is szerepelt valamilyen szín vagy háttérkép, akkor ez a tabletra készített designban már elhagyható. Helyet spórolunk vele.
Megjelenítés mobilon – az okostelefonok világát éljük.
Egyre több gyártó talál ki és készít újabbnál újabb okostelefonokat, természetesen különböző felbontással és mérettel. Ha mobil eszközre szeretnénk optimalizálni a weboldalunkat, több méretre is optimalizálhatunk.
Például: szélesség: 240px, 320px, 480px stb.
A lényeg: sokkal kisebb helyünk van mint táblagépen vagy asztali gép monitorán. Mégis úgy kell kialakítanunk a designt, hogy:
- a lényegi információk szerepeljenek ebben a kis méretben is,
- könnyel, jól olvasható legyen a tartalom
- minden tartalmat könnyen, logikusan, gyors navigálással elérjünk.
A tartalom itt még jobban „egymás alá csúszik” – logikus struktúrában:
- kisebb méretű képek (akár kattintásra legördülő listában)
- gyorsabb oldal betöltés,
- tartalom könnyen olvasható méretben, bizonyos blokkok (kevésbé fontosak) kiesnek, vagy egész egyszerűen csak egy sornyi link utal rá,
- Jellemző, hogy a menüből – mely eddig egy (vagy több) sorban szerepelt, csak egy gomb lesz – menü felirattal – melyre kattintva legördül a menü és ott kiválasztjuk azt a menüpontot, melynek tartalma érdekel.
A flash tartalmat érdemes kerülni az oldalon:
- egyrészt a google nem tud olvasni a flash tartalmában, tehát akármilyen hasznos tartalmat is teszünk bele, nem látják a google robotok (tehát a google keresési listában sem leszünk előbbre),
- másrészt a flasht tartalmazó oldalakat a legtöbb mobil telefon böngészője egyáltalán nem tudja kezelni, így jobb esetben egy fehér képernyő jelenik meg, rosszabb esetben az az üzenet fogad, hogy „Nem sikerült megjeleníteni a lapot.”
Összefoglalva: legyen szó pc monitorról, laptopról, tabletről vagy mobiltelefonról, ha az oldalt responsive (rugalmas) designnal oldjuk meg, ésszerűen, jól struktúrált megjelenítésben kell gondolkodnunk, hogy weboldalunk ne csak szép, de könnyen érthető és jól kezelhető legyen! A hasznos és fontos információk, amiket kommunikálni szeretnénk az oldalra látogatóinknak, azt a felhasználó gyorsan megtalálja!
Előnye:
- a legtöbb internetezésre alkalmas eszközön jól struktúráltan, rugalmasan jelenik meg weboldalunk.
Hátránya:
- design és kódolás szempontjából több munkával jár – így elkészítése több pénzbe is kerül.
Jó példa, hogy néz ki egy oldal különböző méretű megjelenítésben: http://mattkersley.com/responsive/
Szeretnél azonnal értesülni a friss blogbejegyzésekről email-ben? Iratkozz fel: ITT!
Amennyiben hasznosnak találtad a cikket, kérlek oszd meg ismerőseiddel is, a cikk alján található gombok valamelyikével! Köszönöm!
