A reszponzivitásáról jó eséllyel minden webes fejlesztések iránt érdeklődő laikus hallott már. Ugyanakkor amekkora a téma iránt érdeklődés, ugyanakkora a fejekben lévő káosz, azt látjuk, hogy sokszor némi zűrzavar és félreértés mutatkozik a kérdésben. Saját, Magento webáruház fejlesztési projektjeinkben is találkozunk azzal, hogy ügyfeleinknek téves vagy féligazságokra épülő tudásuk van a témában.
Miért is fontos a reszponzivitás?
- Egyfelől a weboldalak és webshopok használati trendjei miatt. Ha szigorúan az e-kereskedelmet nézzük, számos szegmensben azt látjuk, hogy a felhasználók a webáruházakat nem desktop környezetből, hanem valamilyen Post-PC eszközön (tablet, mobil) böngészik. Ha nem reszponzív a webáruházunk, ezek a felhasználói tömegek elpártolnak tőlünk mint a lemingek.
- A másik megkerülhetetlen tényező a Google. A reszponzív kialakítás a SEO egyik pillére, ugyanis a Google büntet bennünket azért, ha nem mobilbarát webáruházzal rendelkezünk. A világ első számú keresője nagyon egyszerű eszközt alkalmaz erre: történetesen hátrébb sorol bennünket az organikus találatok között, ha azt látja, hogy csak desktop környezetben szolgáljuk ki a felhasználóinkat.
Nem nehéz belátni: ahogyan a web minden területére, úgy az e-kereskedelemre is hatványozottan igaz, hogy a reszponzivitás nagyon jelentős terület, létkérdés. Ma már nem reszponzív webshopokat fejleszteni bűn. Pont.
Alapfogalmak
Először is tisztázzunk pár alapfogalmat, amely kavarodni szokott a fejekben! Milyen felépítésű frontend felületekről beszélünk, és mi mit jelent?
- Fixed: Ez gyakorlatilag a webes tervezés hagyományos módja, régebben a portálok és webáruházak felületei ilyen módon készültek. Ez az az eset, amikor a weboldal rögzített pixel méretekre tervezve készül és ezek a méretek nem változnak aszerint, hogy mekkora a böngésző ablak mérete, vagy milyen eszközről nézzük őket. Értelemszerűen ez a tervezési minta ma már kerülendő.
- Fluid: Az az opció, amikor a webáruházunkat vagy weboldalunkat alkotó UI komponensek mérte százalékban van meghatározva, így azok folyamatosan alkalmazkodnak a böngésző ablak méretéhez. Ez még önmagában nem jelenti azt, hogy az így készült oldalak alkalmasak mobil verziók kiszolgálására. Itt még nem beszélünk töréspontokról. Ez pusztán csak annyit jelent, hogy ha például egy elem szélessége 80%-ra van állítva, akkor az minden esetben a böngésző ablak szélességének a 80%-a lesz, függetlenül attól, hogy az éppen 400 pixelt, vagy 1600 pixelt jelent. Ez sem jelent kielégítő reszponzvitást ma készülő új weboldalak, webshopok esetében.
- Adaptive: Az adaptív weboldal esetében beszélünk arról, amikor un. media query-k (apró lekérdezések, amelyekből meg lehet állapítani a böngésző ablak szélességét, az eszköz típusát, a kijelző pixelsűrűségét és pl. a kijelző orientációját [fekvő, álló]) alapján célzunk meg különböző eszköz méreteket, mint pl. kisebb monitorok (és akár nagyon nagy monitorok), táblagépek, mobil eszközök. Az adaptív frontend fejlesztés tulajdonképpen a reszponzivitás előszobája, ugyanakkor ma már ritka: a böngészőben generált felület ugyan fix méretekkel dolgozik, ám a különböző eszközöket más-más layout elrendezéssel szolgálja ki.
- Responsive: A reszponzív weboldalak gyakorlatilag a fuild és az adaptív technológiák együttes alkalmazásából épülnek fel. Tehát ezek fluid grid-rendszerre épülő weboldalak, amelyek bizonyos töréspontokon változtatnak a layot elrendezésén is, hogy jobban alkalmazkodjanak az adott képernyőméret kihasználásához. Vagyis úgy alkalmaznak töréspontonként más és más elrendezést, hogy folyamatosan igazodnak is a megjelenítést végző kliens méretéhez. Ma már minden webáruház és weboldal tervezése kapcsán a reszponzív kialakítás javasolt, a Magento 2 ezt a frontend tervezési mintát kiemelten támogatja.
Grid rendszerek és Framework-ök
Ha reszponzivitásról beszélünk vagy olvasunk, jó eséllyel találkozni fogunk a grid rendszerek és frontend framework-ök fogalmával. Tisztázzuk hát ezek jelentését is! Nagyon fontos, hogy ez a két fogalom nem szinonimája egymásnak, bár vannak közös pontjaik.
A grid (segédvonal) rendszerek használata már jóval a web előtt, például a nyomdaiparban is bevett szokás volt. Pusztán annyit jelent, hogy a felületek tervezését egy hasábokból és eltartásokból álló, előre meghatározott grid-re végezzük, ami egyszerre segíti a grafikusok munkáját és jelentősen gyorsítja a fejlesztés folyamatát is. A grid rendszer lehet egyedileg tervezett is, de a weben rendelkezésre áll rengeteg előre elkészített ilyen rendszer. Ezek előre megírt (ma már szinte mind reszponzív) CSS szabályokat tartalmaznak, amik a layout megjelenítését szabályozzák. A legtöbbhöz elérhető Photoshop alap template is, amire a tervezést lehet készíteni.
A framework-ök ezeknél sokkal komplexebb rendszerek. Ezek a CSS szabályok mellett előre elkészített javascript modulokat, vizuális elemeket (gombok, menük, infó ablakok, tooltip-ek, felület elemek) és akár komplett vizuális sablonokat is tartalmazhatnak. Egyfajta kiinduló eszközkészletként szolgálnak a frontend fejlesztők számára a webáruház megjelenésének felépítéséhez. Legnépszerűbbek ezek közül a Bootsrtap és a Foundation, előbbi térnyerése az utóbbi években igen figyelemre keltő.
Kész frontend framework alkalmazásával nemcsak a reszponzivitást tudjuk biztosítani, hanem rengeteg olyan előre gyártott komponenst is kapunk, melyek gyorsabbá teszik a fejlesztést. Széles elterjedésük révén pedig harmadik felek számára is könnyen továbbfejleszthetővé teszik a webáruházunkat, így erősíthetjük projektünk szállítófüggetlenségét. Mindenképpen ajánlott tehát olyan portál-technológiát választani a webáruházunk kialakításához, amelynek frontend kimenete egy iparági szabványokra épülő framework-re épül. Az Oander által a Magento 2-höz fejlesztett saját sablonrendszerünk például a Bootstrap-et használja, ami lehetővé teszi teljesen reszponzív felületek gördülékeny és költséghatékony megvalósítását.
Retina kijelzők kérdésköre
A kijelzők pixelsűrűsége ma már szintén egy kritikus pontja a webes tervezéseknek. Mivel a legtöbb webáruház vagy portál esetében kifejezett célunk, hogy minél szélesebb legyen azoknak az eszközöknek a köre, amin a felület szépen jelenik meg, fontos számolnunk a retina (magas képpont sűrűségű) kijelzős eszközök kiszolgálása is. Azokban az esetekben, amikor a vizuális elemek a CSS-ből meghatározott attribútumok alapján jelenek meg, ez nem jelent problémát, hiszen ezek vektoros alapúak. A probléma a hagyományos képformátumok esetében merülhet fel (főleg amik már eleve jelentősen tömörítettek, mint például a JPG). Ezek a képek többnyire rossz minőségűnek, elmosódottnak tűnhetnek egy retina felbontású kijelzőn.
Erre is létezik többféle megoldás is. Ha a forráskép rendelkezésre áll vektor alapú formátumban, akkor a képek ma már akár SVG, akár ikon-font létrehozásával kiszolgálhatóak vektorosan is a böngészőnek. Ez az eljárás viszont sajnos nem működik a fotók és pixel grafikus képek esetében. Ezeknél nagyon sokféle mód van arra, hogy a pixel sűrűség alapján (szintén media query alapon) különböző méretű képeket töltsünk be, akár egy eredeti felbontásban feltöltött képanyag különböző verzióinak frontendre való generálásával. Ez általában backend oldali követelményekkel is jár, például a portálmotornak kezelnie kell az eltérő pixelsűrűségű képgenerálás lehetőségét. A Magento 2 webáruház motor esetében ez például megoldott.
Érintő kijelzős eszközök sajátosságai
További fontos szempont reszponzív webáruházunk tervezéskor, hogy amikor mobil és táblagép méretű eszközökre tervezünk, akkor nem csak a képernyő terület limitáltságát kell figyelembe venni, hanem az olyan sajátosságokat is, mint például az asztali környezetben rendelkezésre álló dupla kattintás, vagy a hover állapot hiánya. Ugyancsak fontos tervezési szempont a hivatkozások esetében az ergonómiai szempontból minimális méretű kattintható felület biztosítása. Például tablet és mobil változatokon a gomboknak, hivatkozások méretének legalább akkorának kell lennie, mint egy tipikus ujjbegy. Érdemes ezért reszponzív tervezésben jártas UX / UI szakértőkkel készíttetnünk webáruházunk terveit.
Megjelenítési kérdések
A hatékony reszponzív felületek tervezésnek további fontos szempontja a DOM (Dokumentum Objektum Modell) fogalmának ismerete és kellő alkalmazása. Ez gyakorlatilag azt a rendszert takarja, ami a dokumentum minden tartalmát, illetve valamennyi összetevőjét magában foglalja. A DOM adja minden weboldal frontend komponenseinek betöltődési sorrendjét.
Ez azért nagyon fontos, mert a DOM struktúrában az elemek sorrendje nagyon nagy jelentőséggel bír, és ez a sorrend DOM manipuláció nélkül (ami frontend oldalról például erőforrás igényes javascript manipulációkkal lehetséges) nem változik. Tehát amikor reszponzív felületeket tervezzük, akkor figyelni kell arra, hogy a töréspont elhelyezésekor pusztán csak az elemek formázásáért felelős CSS szabályok változnak, a DOM nem. Tehát, ha egy elem, ami az oldal legvégén volt, csak úgy kerülhet például a legelejére, ha CSS-ből vizuálisan “odarendezzük”, de valójában forráskód szinten ugyanúgy a végén marad.
Itt sajnos nehéz általánosságban beszélni arról, hogy mit lehet és mit nem, minden eset egyedi, és ahhoz, hogy el lehessen dönteni ismerni kell a CSS és a HTML nyelv lehetőségeit. Például el lehet tüntetni felesleges elemeket pusztán CSS használatával is, de a sorrendjüket variálni már nehezebb.
Annyit általánosságban is el lehet mondani, hogy reszponzív webáruházunk tervezése során lehetőleg a töréspontoknál a DOM elemek sorrendje ne változzon, csak például a mérete/megjelenése. Ezzel támogatjuk a minél tisztább frontend kód kialakítását, amit egyebek mellett a Google is értékelni fog. Nyilván vannak olyan esetek, amikor ez nem kivitelezhető, de törekedni kell arra, hogy ilyen csak ott forduljon elő, ahol feltétlenül szükség van rá.
