Weboldalak optimalizálása – reszponzivitás

Források:

Iren Korkishko: UI/UX design guide with terms, explanations, tips and trends

Geoff Graham: The Difference Between Responsive and Adaptive Design

Patrick Grady: Re-thinking Breakpoints in Responsive Design

Weboldalak optimalizálása – reszponzivitás

Miért érdemes optimalizálni egy weboldalt, és milyen szemponton merülnek fel ennek során? Ha azt szeretnénk, hogy a látogatóink könnyebben megtalálják a weboldalunkat a népszerű keresőkben, elégedettek legyenek vele, valamint szívesebben visszatérjenek, akkor egy sor dologra kell figyelnünk az elkészítése során.

Ennek egyik szeletét képviseli a design technikai optimalizálása, amit a most következő cikkünkben járunk körül. Így nemcsak, hogy a látogatóink száma nő, hanem az oldal használatának pozitív élménye nyitottabbá is teszi őket arra, hogy kapcsolatba lépjenek velünk, és a termékeinkkel.

 

Reszponzivitás / adaptivitás – a design optimalizálása a kijelző méretéhez

Egy mai modern weboldal alapvető követelménye, hogy a sok különböző méretű és felbontású eszközön is minimum használhatóan – sőt szépen – jelenjen meg, nem is beszélve az operációs rendszerek és böngészők számtalan kombinációjáról. Ezért olyan keretrendszereket használunk, amelyek erre szinte maguktól, félautomata módon képesek.

Ezek közül a legjelentősebb a WordPress motor, amely open source1 jellegéből fakadóan az online szakma legjavát vonta be a fejlesztésbe. A közel 20 évnyi fejlesztés eredményeképp egy megbízható, és szinte korlátlanul testre szabható keretrendszert nyújt. Ez a nagyfokú rugalmasság azzal a kitétellel társul, hogy (mint minden rendszernek) megvannak a maga gyenge pontjai, ezért precíz felügyeletet és karbantartást igényel. A felügyelet túlnyomó része szerencsére automatizálható.

Egy másik keretrendszer a Bootstrap framework, amely 2011 óta forradalmasította az online applikációk2 prototipizálását, és a megjelenítő eszköz tulajdonságaira reagáló, avagy reszponzív weboldalak készítését. Akkoriban még nem volt egyértelmű, hogy mennyire át fogja alakítani a szakmai standardeket, de azóta világossá vált, hogy egy jól átgondolt és alaposan tesztelt, grid3 és flexbox4 alapú keretrendszerről van szó.

A kiváló reszponzív keretrendszerek mellett is szükség van finomításokra (adaptációra) egy weboldal felületein, hogy pontosabban helyezkedjenek el az elemek az aktuálisan leggyakoribb platformok és a megcélzott felhasználói csoportok számára. Akármilyen körültekintően járunk is el, lehetetlen minden eszközön és képernyőfelbontáson tökéletesen megjelenő weboldalt készíteni, ezért általában 3-4 gyakori eszközhöz idomítjuk őket, és az eszközök közötti hasonlóságoknak köszönhetően a többit is lefedjük ezzel. A reszponzív töréspontokról (hol váltsanak az oldal elemei méretet és pozíciót) minden weboldal esetében egyedileg döntünk a leggyakoribb töréspontokból és a környező elemek méreteiből kiindulva. Azt kell elérnünk, hogy a grafikai, UI5 és UX design6 is kidolgozott legyen, még ha növekszik is emiatt a fejlesztési idő- és erőforrásigény.

A célcsoport elemzéshez nem árthat mérni a weboldal működése során azt, hogy milyen eszközökről érkeznek a látogatók. Hogy milyen adatokat nézünk ilyenkor, arra példa itt található, ami megmutatja nekünk, milyen operációs rendszeren, és milyen böngészőben nyitjuk meg az oldalt.

A mobileszközök elterjedésével egy új módszertan is kialakult: a “mobile-first7 fejlesztési elv. Ennek az a lényege, hogy a weboldal minél kisebb terhelést, és minél nagyobb kompatibilitást nyújtson a mobileszközökre nézve a letöltött adatforgalom, a betöltődési sebesség, és a funkcionalitás szempontjából. Első körben nehezen definiálható, hogy mi is az a mobile-first elv, mivel ennek a fogalomnak a kiforrása évekbe telt, és a mai napig legalább két fő táborra oszlik a megítélése. Számunkra megkönnyíti az értelmezését, ha figyelembe vesszük, hogy a legtöbb orvosszakmai weboldal esetében nem kifejezetten a mobileszközök felhasználói a célközönség, hanem zömmel irodai PC-k és laptopok használói, akik a munkájuk során használják a weboldalakat. Ezért mi először általában desktopra tervezünk, és utólag igazítjuk a designt és a funkcionalitást a mobileszközökhöz.

A weboldalakat több típusú iPhone és Android okostelefonon, és szinte bármilyen operációs rendszeren és böngészőben tudjuk tesztelni. A költség- és időhatékonyság érdekében azonban a kisebb felhasználói körrel rendelkező eszközöket és operációs rendszereket mellőzzük az élesítés előtti tesztelés során. Emellett a félautomata keretrendszerek és a tartalomhoz igazodó töréspontok gondoskodnak róla, hogy sok probléma eleve fel se merüljön a cross-platform8 megjelenést tekintve.

Előfordulhat, hogy egy bizonyos eszközre kell optimalizálni a weboldalt, mint például egy adott típusú tabletre. Ha nem rendelkezünk ilyennel, szükséges lehet beszerezni (akár kölcsönözni) egy példányt belőle, és azon végezni a weboldal elkészítését. Ha van kimondott céleszköz, akkor azt érdemes minél hamarabb egyeztetni, mert már a tervezési folyamatban is hangsúlyos szerepet kaphat pl. a kattintható elemek és az űrlapok esetében, amelyek tipikus UX és marketing kulcspontok.

Nem kis feladat a weboldal grafikai elemeinek a megtervezése és optimalizálása sem.
Olvasson tovább ebben a témában:

Weboldal grafikai elemeinek a megtervezése és optimalizálása – Ár-érték arány

 

Szójegyzék

1open source (nyílt forráskódú): szabad felhasználású programkód, amelyet bárki díjmentesen megismerhet, felhasználhat és módosíthat

2grid: egységnyi méretű részekre osztott térhálós váz, pl. 12 egyforma széles oszlopra épülő elrendezés

3flexbox: a weboldal megjelenítési egységei („dobozok”) rugalmasan, a méretüktől függően tagozódnak egymás mellé. Ha pl. két doboz együtt meghaladná a böngészőablak méretét, automatikusan egymás alá rendeződnek, de ha nem, akkor egymás mellett jelennek meg

4UI design: User Interface design; logikusabb folyamat. A felhasználó által látott felület elrendezésének megtervezése. Pl. milyen méretűek legyenek a gombok, és milyen folyamatokhoz kötődnek az adott felületen.

5UX design: User Experience design; kreatívabb folyamat. A felhasználó által látott felület stílusának és benyomásának megtervezése.  Pl. milyen színűek legyenek a gombok, és milyen üzenetet hordozzanak.

6mobile-first: elsősorban mobiltelefonra való tervezés, utólagos igazítással a nagyobb felületekhez

7cross-platform: megjelenítési felületeken átívelő

Vörös Amadea
webfejlesztő

Iratkozzon fel hírlevelünkre, hogy értesüljön híreinkről, új blog bejegyzéseinkről!