Mi az a reszponzív design? És milyen hibákat követhetsz el a használatánál? (Frissítve, 2023.11.09.)

Elmondjuk, mi az a reszponzív design, mire és hogyan használhatod, miként működik, miért nem hoz automatikusan jó konverziós arányokat mobilon, vagyis milyen hibákat követhetsz el a használatánál, miben különbözik az adaptív designtól, és mi lesz a jövője. (Frissítés, 2023.11.09. – Egy új fejezettel bővítettünk: Mi a gond a mobile-first designnal?).

Habár a fejlesztők és webdesignerek már hosszú évek óta a reszponzív designnal kelnek és fekszenek, időnként rá kell döbbenni arra, hogy más nem feltétlenül így van vele. Nem mindenki naprakész a webdesignt illetően, és nem is kell annak lenniük, hiszen a megrendelők, ügyfelek más területeken mozognak.

Ezért arra gondoltunk, hogy nem árt újból, alaposan körüljárni a reszponzív design témakört. Annál is inkább, mert a külföldi online szakmai lapokat nézegetve kiderült, hogy a reszponzív design Amerikában is még mindig érdekesnek számít, azaz megér egy-két blogbejegyzést. És ha a fogalmat már szinte mindenki ismeri is, azért az alapvető tudnivalókat talán érdemes összefoglalni.

Mi az a reszponzív design?

A reszponzív design a weboldalnak egy olyan kialakítása, amelyik rugalmasan alkalmazkodik a különböző böngészők képernyőjének méretéhez annak érdekében, hogy optimális megjelenést biztosítson a felhasználónak minden böngészésre alkalmas eszközön, legyen az desktop, laptop, mobil, vagy tablet. A reszponzív design a legkényelmesebb és legteljesebb felhasználói élményt biztosítja a látogatónak bármilyen eszközön böngészik weboldaladon.

A reszponzív designt az egyre többféle méretű kijelző megjelenése hívta életre. Egy olyan megoldásra volt szükség, mely mobiltól a tableten keresztül az asztali PC-kig, minden eszközön képes megjeleníteni egy weboldalt azonos URL alatt, közel azonos designnal és tartalommal. A korábbi fix szélességű elrendezéssel készülő weboldalak már nem tudtak optimálisan megfelelni a mobileszközök által támasztott igényeknek.

Néhány weboldal készített ugyan szeparált mobilos weboldalakat még a reszponzív design megjelenése előtt, ez azonban a legtöbb, kisebb weboldal számára nem volt igazán járható út, arról nem is beszélve, hogy akár a munkaigényt (karbantartás, fejlesztés), akár a SEO-szempontokat tekintve nagyobb kihívást jelentett. Akik pedig nem készítették el a szeparált verziójukat, azok nagy kijelzőkre optimalizált oldalai szinte teljesen használhatatlanok voltak a mobilok kis kijelzőjén. Ez pedig nem segíti elő a látogatók megtartását, akikből egyre többen vannak olyanok, akik mobilon böngésznek.

Miért fontos a reszponzív design?

Tehát, mint látjuk, a reszponzív weboldalak olyan weboldalak, melyek igazodnak minden kijelzőmérethez és felbontáshoz. Nem csak asztali gépek képernyőihez, hanem mobilok és tabletek kijelzőihez, sőt most már gyakran tévékhez is.

A felhasználók 80 százaléka egyébként nem hajlandó mobilon olyan weboldalt megnézni, amely nincs mobilra optimalizálva. Arról nem is beszélve, hogy a Google is hátrébb sorolja azokat a weboldalakat, melyek nem mobilbarátak. Ezzel kapcsolatban érdemes egy kicsit beleolvasni a most már működő mobil index témakörébe is.

Ez persze nem azt jelenti, hogy most már csak a mobilos webdesignra kellene figyelni, hiszen a felhasználók 83 százaléka azt várja el, hogy laptopon folytathassa a mobilon megkezdett böngészést. Ahhoz, hogy ennek az elvárásnak megfeleljen a weboldalad reszponzívnak kell lennie.

Ha meg akarod tudni, hogy reszponzív-e a weboldalad, vagy bármely más weboldal, akkor mindössze annyit kell tenned, hogy elkezded lekicsinyíteni a böngésződ méretét a számítógépeden. Amennyiben nem változik a weboldal megjelenése, akkor az oldal nem reszponzív (ettől persze lehet még adaptív, ami ugyanúgy mobilbarát megoldás, de erről egy kicsit lejjebb olvashattok).

Milyen előnyei vannak a reszponzív designnak?

Ma már a felhasználók döntő többsége arra számít, hogy egy cég mobilos weboldala legalább ugyanolyan jó, mint a desktopos verzió, sőt jobb. Várják a mobilhoz kapcsolódó extra funkciókat, és komoly csalódást okoz nekik, ha egy korábban PC-s monitoron használt weboldalt menet közben a telefonjukon nem tudnak a megszokott módon használni.

• Reszponzív design esetén csökken a visszapattanási arány, hiszen a mobilról érkezők is jól tudják használni ezeket az oldalakat, amikor megnyitják. Ez az előny pedig meg fog mutatkozni a Google találati rangsorolásánál, mely figyelembe veszi a látogatásokat és a visszapattanásokat.
• Egy szeparált mobiloldalhoz képest gyorsabb lesz a weboldalad, hiszen nincsen tele átirányításokkal a mobilos oldalakra. A gyorsaság pedig szintén befolyásolja a rangsorolást.
• És bár a Google mobil algoritmusa a szeparált mobiloldalakat is mobilbarátként rangsorolja, a legjobb megoldásnak a Google a reszponzív weboldalt tartja. Egy reszponzív design esetén azonos az URL és nem kell minden fájlból kettő, ami a keresőnek is egyszerűbbé teszi a helyzetét. Ráadásul a látogatók száma sem oszlik el a két URL között.
• Hosszú távon gazdaságosabb egy reszponzív oldalt működtetni, hiszen mindig csak egyszer kell belenyúlni a kódba vagy a tartalomba, nem pedig külön mobilos és desktopos verziót kezelni, akár fejlesztésről, akár a tartalom bővítéséről legyen szó.
• Ráadásul a reszponzív webdesignnal felkészülünk minden, a jövőben megjelenő eszközön való böngészésre, hiszen ahogy jelen pillanatban is minden kijelzőhöz igazodik a reszponzív weboldalunk, úgy a jövőben is alkalmazkodni fog.

Ahogy egyre több lesz a mobileszköz, vagyis az okostelefonok és a tabletek, már nem is igazán azt várjuk el egy weboldaltól, hogy “mobilbarát” legyen. Inkább azt, hogy ugyanazt az élményt nyújtsa a felhasználóknak minden eszközön. A reszponzív design pedig pont a felhasználói élmény ilyen irányú optimalizálásában segít, de egyszerűbbé teszi a keresőoptimalizálási munkát, és hosszú távon időt és pénzt is megspórol neked.

Hogyan működik?

A reszponzív design rugalmas elrendezésével, rácsszerkezettel, képekkel és médialekérdezésekkel képes igazodni minden mobileszközhöz. A rugalmas elrendezésnél az értékek százalékban kerülnek megadásra, ami a kijelző méretéhez viszonyított arányt jelent, így ahogy változik a kijelző mérete, úgy változik egy adott elemé is.

Ahhoz, hogy a weboldalad minden kijlezőméretnél az optimális élményt nyújtsa, szükség van az ún. médialekérdezésekre, melyek révén a weboldal kommunikál a különböző eszközökkel, illetve azok böngészőivel. Kijelzőmérettől függően kerülnek elhelyezésre a weboldal egyes elemei: például míg desktop nézetben a fejléc alatti hasábok egymás mellé kerülnek, addig mobilon már egymás alá rendeződnek.

Ugyanígy rendbe kell tenni a képek megjelenítését is, vagyis hogy minden kijelzőméretnél veszteség nélkül jelenjenek meg. Százalékos értékek alapján kijelzőhöz igazíthatók a képek, egyes részek eltakarhatók vagy éppen megjeleníthetők, de akár csúsztatható képeket is használhatunk.

A Webshark oldala is már régóta reszponzív, most így néz ki asztali nézetben:

Az látható, hogy ha böngészőben megjelenítenénk a fenti, desktop oldalt, akkor elég nehéz lenne használni ekkora méretben a hamburger menüt, olvashatatlan lenne a szöveg. Persze két ujjal lehet nagyítani, csak akkor ide-oda kell rángatni az oldalt, és aki nem ismeri a szerkezetét, az nagyon könnyen ilyenkor elveszik, nem tudja egy idő után hol jár, mit és hol talál. Ezért így néz ki mobilon:

A mobilos nézet viszont leegyszerűsíti a helyzetet az okostelefonon netezők számára, miközben a tartalomból nem vész el semmi. Továbbra is megvan a menü – csak most már nagyobb -, világosan látható és olvasható a tartalom, nem kell jobbra-balra lökdösni a weboldalt, csak scrollozni lefelé.

Az egész úgy néz ki, mint egy vagy több hasáb, ami kisebb négyzetekből áll, és egy rács mentén mindig átrendeződik a helyzetük a böngésző méretének megfelelően. És itt elérkeztünk a reszponzív design nagyon leegyszerűsített lényegéhez: a rácsban mozgó, négyzetekbe foglalt tartalomhoz, mely nagyon könnyen képes átrendeződni és bármekkora felületet kitölteni. Amikor reszponzív designról beszélünk, alapvetően ilyen szerkezetben kell gondolkodni. További jellemző elemei:

– a mutatóujjal is használható menü, ami jellemzően nem foglal helyet mobilnézetben,
– a mindig jól olvasható méretű betűk,
– az átméreteződő képek.

A reszponzív design esetében még jobban oda kell figyelni a whitespace megfelelő használatára, és nem csak jól áll neki a flat-szerű design, hanem érezhetően kívánja. Ez kell ahhoz, hogy a funkcionalitás teljes spektrumában kitáruljon a felhasználók előtt. Vagyis bármely displayméretben könnyen értelmezhető és használható, azaz kattintható, bökdöshető elemek, ikonok jelenjenek meg.

Miként jutunk el ide?

Amikor mobil-first designról beszélünk, akkor az alatt azt értjük, hogy először a mobil weboldal készül el, és csak ezután kerül sor a desktop verzió megalkotására. Több oka is van, hogy ez a régi elv miért működik még mindig remekül:

• A mobil weboldalakon általában több használhatósági problémába futunk bele, ami általában a korlátozottabb kijelzőméretnek köszönhető. Ezért jobb megoldás a mobil-designnal kezdeni.
• Könnyebb ezután felskálázni a mobilverziót asztalivá, mint fordítva.
• A mobil-first design sokkal jobban rákényszerít arra, hogy átgondol, mi az ami vizuális és funkcionális szempontból elengedhetetlenül fontos a weboldaladon.

A mobil-first megközelítés során felmerül néhány kérdés a kisebb kijelzőméret miatt:

• Valóban szükség van egy adott funkcióra?
• Egy-egy vizuális effekt megéri a munkát, vagy csak lelassítja mobilon az oldal megjelenését?
• Mi az elsődleges cél, és milyen vizuális elemek segítik ennek elérésében a felhasználókat?

Mire figyelj reszponzív design kialakításánál?

Akadályok eltüntetése

A legfontosabb egy mobilra optimalizált weboldalnál, hogy az elsődleges célokra összpontosítson. Ilyen elsődleges cél például egy termék megrendelése. De mondjuk a hírlevél-feliratkozás már csak másodlagos cél. Az a fontos, hogy semmi se akadályozza a felhasználót az elsődleges cél elérésében.

Tervezz az ujjakra!

Az egyik nagy különbség asztali gépek és mobileszközök között, hogy utóbbiakat az ujjainkkal irányítjuk, a másik pedig az, hogy a monitor az asztalon szokott lenni, az okostelefon pedig a kezünkben (többnyire). Ezek olyan különbségek, melyek meghatározzák, hogy miként tervezzük meg a fontos UI elemeket, melyekkel a felhasználók interakcióba lépnek.

Az embereknek a hüvelykujjukkal el kellene érniük ezeket az elemeket, például a navigációs menüt, a fontos linkeket és CTA-kat. Ráadásul ezek méretét is meghatározza a hüvelykujjhasználat: a magasságuk legalább 44 pixeles legyen.

Legyen fluid a megjelenés

Ez azt jelenti, hogy miközben a designereknek figyelniük kell a reszponzív töréspontokra a tervezésnél, azt is figyelembe kell venniük, hogy mi történik a töréspontok között. Hiszen például nem mindenki használja a monitorján teljes kijelzőn a böngészőt. Azért kell tehát fluidnak lennie az elrendezésnek, hogy megfelelően alkalmazkodjon a böngésző méretéhez. Itt látható a különbség:

Ne feledkezz meg a horizontális tájolásról!

A mobilokat nem csak függőleges, hanem vízszintes tájolásban is használjuk. A navigációval általában nincs gond, ugyanakkor a görgetés már nehezebbé válik, ami különösen azért gond, mert ilyenkor többet kell görgetni. Át kell tehát gondolni a vízszintes elrendezésnél alkalmazható töréspontokat is.

A tipográfia is legyen reszponzív

Habár a designerek általában pixelben számolnak tervezéskor, ez ma már nem sokat jelent, mert a különböző eszközök különböző felbontásokat használnak. Ez mutatja meg a PPI érték a mobiloknál. Vagyis egy 16 pixeles betű egyik kijelzőn kisebb, a másikon nagyobb lesz. A webfejlesztők általában em egységeket használnak a font-méretek meghatározásakor, ahol az 1em 1 pontnak felel meg.

Különbözzön-e a reszponzív weboldalad tartalma mobilon és desktopon?

Sokszor beszélünk arról, hogy mobilon és desktopon nem lehet teljesen ugyanazt a tartalmat, ugyanolyan formában lenyomni az emberek torkán. Mert ami az egyik eszközön könnyen befogadható, az a másikon nem. Felmerülhet a kérdés, hogy vajon ez azt jelenti, hogy akkor többféle tartalmat kellene gyártani mindenféle eszközre? A mobilra pedig egy lebutított verziót kell készíteni?

Nem egészen. Már csak azért sem, mert a felhasználók elvárják a teljes értékű felhasználói élményt minden eszközön. A reszponzív designnak éppen az a nagy előnye, hogy elvileg ugyanahhoz, ugyanolyan értékű tartalomhoz jut hozzá a felhasználó mobilon is, mint desktopon. Nem pedig egy másodrendű verzióval találkozik, mint annak idején a szeparált mobiloldalak esetében. Mégis át kell gondolni alaposan a megjelenést, mert egy kicsit más megoldásra van szükség mobilon, ha el akarjuk érni ugyanazt a felhasználói élményt.

MI INDOKOLJA A KÜLÖNBSÉGET?

Abból indulunk tehát ki, hogy a tartalomnak azonosnak kell lennie minden eszközön, nem élhetünk a leegyszerűsítés eszközével. Ugyanakkor mégiscsak adottság, hogy a desktopos kijelzőnk lényegesen nagyobb, mint a mobilunké, könnyebb átlátni, feldolgozni egy terjedelmes tartalmat.

És habár mindkét eszközön könnyű és gyakran használt megoldás a görgetés, illetve az oldal csúsztatása, ennek ellenére egy nagyméretű szöveges tartalom webes olvasgatása nem a legpraktikusabb megoldás mobilon. A felhasználó a kis kijelző miatt könnyen eltévedhet a sorok között, nem igazán látja át a tartalmat.

Érdemes ebből a szempontból egy pillantást vetni a Wikipédia oldalaira, melyeknél ugyanaz a tartalom jelenik meg mobilon és desktopon is, mégis előbbi jóval kevesebbnek tűnik és persze könnyen használható okostelefonos netezésnél. Ez a kialakítás egyben jó iránymutatást is ad arra nézve, hogy mi a megoldás nagyméretű tartalmak esetében.

És így néz ki ugyanez mobilon:

A TARTALOM DARABOLÁSA

A megoldás a tartalom mobilos befogadhatóságánál annak feldarabolása önállóan is életképes, önmagukban is értelmes részekre. Ez persze azt követeli meg a tartalom szerzőjétől, hogy ne a megszokott keretek között gondolkozzon, amikor a tartalmat elkészíti. El kell szakadni a korábban alkalmazott, egy logikai szálra felfűzött, összefüggő és hosszú szövegfolyamoktól – még akkor is, ha ezeket esetleg alcímekkel tagoljuk. Ehelyett inkább olyan tartalmi blokkokban kell gondolkodni, melyek önmagukban is megállnak a lábukon.

Ez azért praktikus mobilon, mert a felhasználó könnyen áttekintheti a tartalmat az alcímek alapján, és az őt érdeklőt nyitja csak le. Természetesen, ha az egész szöveg érdekli, akkor mindegyik tartalmi részt lenyithatja, azonban, ha csak csak egy-egy részre kíváncsi, akkor elegendő egy-egy rövidebb, könnyen befogadható mennyiségű szöveggel foglalkozni, majd folytathatja máshol a böngészést.

MOBIL-SZERŰ MEGJELENÉS A DESKTOPOS WEBOLDALON

A mobil-first szemléletből következően célszerű, ha nem akarjuk a desktopra kigondolt tartalmunkat változatlan formában ráerőltetni a mobilos felületre, hanem mobilra megtervezzük az említett módon, majd innen lépünk tovább a desktop irányába. Mégpedig oly módon, hogy a desktopos megjelenést tesszük hasonlatossá a mobiloshoz.

Ez annyit jelent, hogy az alcímekből lenyíló tartalmi egységeket akár a desktopon is lenyíló megoldásúvá tehetjük. Kombinálhatjuk akár azzal is, hogy a tartalomnak egy része ugyan látható lesz az alcímen kívül, azonban a teljes szöveget egy “Tovább” gomb révén kapja meg a felhasználó, amennyiben az valóban érdekli.

Élhetünk viszont azzal a lehetőséggel is – mellyel sokszor találkozhatunk webáruházaknál -, hogy a tartalmat tabok alá rendezzük. Ezek a tabok különféle, összefüggő, mégis önmagukban is érthető tartalmi egységeket képeznek. Az egyik tab alatt lévő tartalom mondjuk csak egy általános leírást tartalmaz a termékről, a másik esetleg egy termék részletes összetevőit listázza, a harmadik a vevővéleményeket, stb.

Ezekkel a megoldásokkal elérhetjük, hogy a felhasználónak kevesebbet kelljen görgetnie. A különbség annyi, hogy míg desktopon horizontális a tartalom darabolása a füleknek vagy taboknak köszönhetően, addig mobilon előnyös, ha ez a felosztás vertikális irányú.

Akkor tehát, amikor mobilbarát, reszponzív designt tervezünk, vagy mondjuk most már úgy, hogy egyszerűen csak megtervezzük a weboldalunkat, akkor ne csak a navigációt, képeket, gombokat, linkeket, stb. szabjuk mobilon is jól használhatóvá, hanem a tartalmainkat is tegyük mobilbaráttá. Ezt viszont ne feltétlenül úgy akarjuk elérni, hogy lebutítjuk, csökkentett értékűvé tesszük!

Ugyanakkor van egy további probléma, ami komoly megfontolást igényel, és amely miatt mégis szükség lehet némi eltérésre:

Miért lehet gyenge a konverziós arányod mobilon reszponzív design mellett?

A gyakorlatban óriási az eltérés az asztali gépek és a mobileszközök konverziós arányában. De miért? És hogyan lehet ezt a különbséget mérsékelni? Egyszerű: jobb reszponzív oldalakkal.

Van egy 270 százalékos eltérés a desktop és a mobil konverziós arányában – hívta fel a figyelmet a minap a Moz a Smart Insightson megjelent adatokra hivatkozva. Itt látható egy táblázatban a különbség, mely az idő múlásával sem látszik javulni:

Nem a mobil a hibás, hanem a rossz weboldalak

Hogy mi lehet az oka ennek? Sokan nyilván úgy vélik, hogy ez a mobilok adottsága, pedig nem a mobileszközökben kell keresni a hibát. A weboldalak a rosszak, melyek a mobiltelefonok kijelzőjére készülnek. Úgy tűnik, hogy még mindig nem értjük, hogyan kell jó weboldalakat készíteni a mobiltelefonokra, milyen mobilos weboldalak hozzák a megfelelő felhasználói élményt és a hatékonyságot.

Elviekben a reszponzív design egy eszközökön keresztülívelő világ, mely ugyanazt a tartalmat és felhasználói élményt kínálja mindenféle kijelzőméreten. Alapesetben asztali gépek nagy monitorától a kis mobiltelefonok kijelzőéig. Úgy néz ki azonban, hogy a reszponzív design ellenére – vagy éppen amiatt – óriási a romlás a konverziós arányokban a mobilokon.

A gond ott van, hogy a mobil first még mindig inkább csak elméletben létezik. A gyakorlatban a reszponzív design segítségével ültetik át a desktopon megjelenő hatalmas mennyiségű tartalmat a webdesignerek mobilra is. A weboldalak még mindig az asztali gépeket használók számára készülnek.

Így az emberek egyáltalán nem azzal találkoznak a mobilos weboldalakon, mint amire szükségük lenne. Azért nem, mert egész más szándékkal kezdenek böngészni telefonon, teljesen más tudatállapotban vannak. Így persze nem találják, amit keresnek, a weboldaladat pedig csalódottan és zavarodottan hagyják ott. Ez az oka a sokkal rosszabb konverziós arányoknak.

Nem is a reszponzív design a hibás, hanem a webdesignerek

Mindez persze nem azt jelenti, hogy kukába kellene dobni a reszponzív designt. Azt kell inkább átgondolni, hogy mit lehetne kezdeni a mobilos felhasználói élménnyel, hogyan tudjuk jobban megérteni a mobilos felhasználók tudatállapotát. Ahelyett persze, hogy rutinból, gondolkodás nélkül megpróbáljuk beleerőszakolni a mobilba az asztali gépekre készült weboldalakat.

A Moz szerzője, Talia Wolf szerint itt két dologból lehet kiindulni:

• Át kell gondolnod, hogy miért jönnek a mobilos felhasználók a weboldaladra.
• Meg kell értened a szándékaikat.

Ezek fogják meghatározni, hogy mit kell eltávolítanod, mit kell kiemelned és mit kell optimalizálnod a mobilos weboldaladon. Az alább található az az öt alapelem, melyet át kell gondolnod, amikor mobilos felhasználói élményt tervezel.

1. Képméretek optimalizálása

A képek a reszponzív design révén átméretezhetők. De azok a képek, melyek jól néznek ki egy nagy monitoron, mobilon lehet, hogy túlságosan dominánssá és zavaróvá válnak. Habár a képek méretezhetők, nem biztos, hogy a méretezés és az átalakítás megfelelően történik.

Ezért mindig ellenőrizd, hogy miként jelenik meg egy kép a reszponzív designban! Hatékony marad a használata? Lehet, hogy tönkreteszi a designt a rossz méret vagy kivágás. Ha a kép elfoglalja a teljes kijelzőt a telefonon vagy túlságosan a középpontba kerül, akkor érdemes valamit változtatni a megjelenésén.

2. Egyszerűsített navigáció

Talán az egyik legfontosabb funkció a mobil weboldalakon egy érthető és egyszerűen használható navigációs sáv. Egy jól látható, könnyen hozzáférhető menü vagy keresés abban segíti a mobilos felhasználókat, hogy könnyen eljussanak oda, ahova akarnak. A legtöbb felhasználó mobilon egyszerű céllal érkezik a weboldaladra, és nincs ideje arra, hogy keresgéljen a menüben, csak kattintani akar az adott oldalon.

Ahhoz azonban, hogy a mobilos weboldalad felkészítsd ezekre az igényekre, elemezned kell a mobilos felhasználóid viselkedését. Ennek során esetleg felfedezed azt, hogy sokszor inkább a keresést használják, mint a kattintást a fő call to action gombodra. Ebből kiindulva átalakíthatod a weboldalad, nagyobb hangsúlyt helyezve a keresőre. Ráadásul az is kiderül a vizsgálatból, hogy mire keresnek rá az emberek, azaz, hogy mi az, ami nagyon hiányzik, mi az, ami nem világos, és mit kellene még optimalizálni.

A mobilos látogatók számára nagyon fontos a kapcsolati oldal, hiszen mozgásban vannak. Rendszerint egy cím vagy egy telefonszám érdekli őket, amin el tudják érni a céget, és ami megtalálható vagy a főoldalon, vagy egy könnyen megközelíthető aloldalon. Ez különösen fontos azoknak a cégeknek, akik egy fizikailag létező címen érhetők el. A felhasználók pedig sokkal szívesebben adnak egy megrendelést, látogatnak el az üzletedbe, ha egyszerű vagy és egyenes.

3. Felejtsd el a reszponzív felugrókat!

A felugró ablakok és overlayek, melyek asztali gépes élményhez készülnek, csak megzavarják a mobilos felhasználókat abban, hogy elérjék elsődleges céljukat a weboldaladon. Ez a desktopos megoldás teljesen tönkreteszi a konverziókat mobilon, ahol arra kellene törekedned, hogy minél inkább megkönnyítsd az utukat azon cél felé, amely miatt a weboldaladra érkeztek. A desktopra készült ovarlayeket egyébként sem tudod igazán hozzáilleszteni a mobilkijelzőkhöz, így a legjobb megoldás, ha nem is használod őket.

Egy rossz méretű overlay vagy felugró teljesen beboríthatja a mobil kijelzőjét, így semmit nem lát a felhasználó a weboldalad tartalmából. Ráadásul sok esetben nehéz lekattintani, és még csak nem is illeszkedik megfelelően a mobilkijelző méretéhez, ezért még a célját sem éri el.

Ahhoz, hogy megfelelő overlayt készíthess a látogatók számára, meg kell értened a viselkedésüket. Ez segít abban, hogy meghatározd, hogy mit kérjen tőlük az adott felugró, hova vezesse őket, vagy hogy milyen információkat adjon át számukra.

4. A kevesebb több: egyszerűsítsd, rövidítsd a szövegeket

A zsúfoltság és a zűrzavar elkerülése érdekében a weboldal szövegeit érdemes rövidre fogni. Itt lép a képbe az információs hierarchia. Át kellene szervezned, újraírnod, újraformáznod minden szöveget, hogy a mobilos felhasználók számára csak a legfontosabb információk jelenjenek meg. Ez biztosítja, hogy a szövegek ne vegyék át teljesen az uralmat a mobilos weboldaladon.

Arra is érdemes figyelni, hogy a szövegek hatására a mobilos weboldalon hová kerül a call to action, hiszen nagyon mélyre csúszhat, ha hosszú a szöveg. Tehát, ami jól el volt rendezve desktopon, hajtás fölé kerülő CTA-gombbal, az lehet, hogy egy nagy összevisszaság lesz mobilon, ami aztán nem hoz semmiféle kattintást.

Azt is át kell gondolni, hogy míg desktopon egy weboldalra vetett pillantással be tudod fogadni a teljes üzenetet szavakkal, képekkel együtt, addig mobilon az emberek scrolloznak. Azaz, ahogy megérkeznek egy mobilos weboldalra, szinte automatikusan lökik felfelé a kijelzőn a tartalmat, és csak akkor állnak meg, ha valamin megakad a szemük. Ez pedig hatással van arra, hogyan írj meg egy címsort. De a szövegeknek is rövidnek és tömörnek kell lenniük, hogy megragadják az emberek tekintetét és értékesek legyenek a számukra.

5. Gondold át a CTA-kat!

Egy mobiloldalnak egyetlen jól meghatározott céllal kell rendelkeznie. Ezt a célt kell támogatnia a call to actionnek. A CTA-gombnak kellene annak a weboldalelemnek lennie, melyen megakad a felhasználók tekintete, és amely egyértelmű üzenetet küld számukra, hogy mit is kellene tenniük.

Ha tehát tudod, hogy a felhasználók miért érkeznek a mobil weboldaladra, akkor egy olyan figyelemfelkeltő CTA-gombot kell egy kiemelt helyre elhelyezned, mely egyértelműen vezeti őket a céljuk elérése felé.

Tehát miközben az a cél, hogy akadálytalan élményt kínálj a felhasználóidnak minden eszközön, annak érdekében, hogy növeld a konverziós arányodat mobilon és egy jobb mobilos felhasználói élményt alakíthass ki, jobban meg kell ismerned a felhasználóidat. Meg kell értened a viselkedésüket, a tudatállapotukat, hogy ne az egyszerű, de elterjedt megoldásokat válaszd, melyek tönkreteszik a konverziókat és az élményt. Ne felejtsd el a weboldalad tervezése során, hogy a mobilos felhasználóknak mindig sajátos a viselkedésük és mások az igényeik, mint azoknak, akik asztali gépen keresztül érik el a weboldaladat. És ezt jobb komolyan venni, ha a hatékonyság a célod.

Néhány egyszerű példa reszponzív megoldásokra

Reszponzív design esetén a nehézséget az okozza, hogy nagyjából ugyanazt a tartalmat kell megjeleníteni egyrészt fekvő, másrészt álló elrendezésben. A képeknél is találkozol ezzel a megjelenéssel: az előbbi mondjuk egy tájkép, amire sok minden elfér – tehát a központi elem mellett még más részletek, amelyek kiemelik azt -, míg utóbbi esetében általában portrékról van szó, melyek sokkal inkább fókuszáltak.

Ahogy a képeknél, úgy a technikai eszközök kijelzőinél is ezt a megközelítést kell alkalmazni. Vagyis, amikor megtörténik az átmenet fekvő elrendezésből álló módba, akkor jellemzően szűkül a fókusz, és elmaradnak részletek.

A fenti oldalnak mobilon megjelenő változatából éppen ezért eltűnik néhány részlet, már nem látjuk az eredeti képet, viszont a lényeg megmarad, és hangsúlyosabb is lesz:

Egy másik megoldásnál a horizontális elrendezés átvált függőlegesre, illetve a tartalom esetében történik mérséklés:

Így néz ki mobilon:

Az előbbi példánál már meg lehet figyelni az arányok változását is, ami még inkább feltűnik ennél az oldalnál:

A mobilos változatban nagyobb hangsúly helyeződik a képre, és csökken a szöveg mérete:

A következő oldal esetében látható, hogy míg a desktop oldalon három kép is használható, ez nyilván nem működik mobilon, így itt is elhagyják az elhagyhatót:

És nem egy az egyben teszik át a desktopos tartalmat mobilra:

A reszponzív design buktatói

Ma már tehát kétségtelen, hogy aki weboldalt készíttet vagy átalakít, annak reszponzív webdesignban érdemes gondolkodnia. Ugyanakkor a reszponzív design sem jelent mindenre megoldást akkor, ha hibákat követünk el a tervezése során. Ezek ugyanis képesek lenullázni az általa elérhető előnyöket. De melyek ezek a hibák?

1. HA NEM FIGYELSZ A FELHASZNÁLÓId VISELKEDÉSéRE

Gyakran előfordul, hogy nem vizsgáljuk meg megfelelően a felhasználói viselkedést. Pedig amikor reszponzív webdesignra váltunk, akkor nagyon fontos, hogy információkat gyűjtsünk a felhasználói szokásokról, preferenciákról, a felhasználók típusairól, érdeklődésükről, és ezek tudatában tervezzük meg az akadálytalan mobilos használatot.

Érdemes vizsgálni azt is, hogy milyen mobileszközöket és milyen célból használnak gyakran a látogatóink. A webdesignerek csak a felhasználói viselkedés ismeretében tudnak hosszabb távon eredményes reszponzív weboldalakat tervezni.

2. HA MÉG MINDIG A DESKTOP AZ ELSŐ, AMIRE TERVEZEL

Az egyik leggyakrabban elkövetett hiba reszponzív weboldalak tervezése során, hogy a webdesignerek vagy éppen a weboldaltulajdonosok számára még mindig az asztali gépek, laptopok jelentik az első számú felületet. Erre terveznek elsősorban, pedig a mobileszközök kijelzőjére kellene a mobile first szemlélet jegyében, majd innen méretezni felfelé a weboldalt a nagyobb kijelzőkre.

A mobile first szemléletnek oka is van, mégpedig az, hogy ezáltal könnyebben kiküszöbölhetők azok a hibák, melyek a mobilkijelzőkre történő konvertálás során óhatatlanul is felbukkannak, és képesek tönkretenni a felhasználói élményt a mobileszközökön. Az információs architektúra, a töréspontok, a navigáció, az átméretezhetetlen grafikák kapcsán gyakran bukkannak fel problémák, melyek fel sem merülnek, ha már eleve a mobilkijelzőből indulunk ki a tervezésnél.

3. HA ELREJTESZ TARTALMAKAT A FELHASZNÁLÓK ELŐL

Habár a reszponzív weboldalak elvileg ugyanazt a tartalmat kínálják mobilokra és desktopra, a gyakorlatban nagyon sokszor előfordul, hogy mobileszközök használata esetén bizonyos tartalmak rejtve maradnak a felhasználók elől a kisebb mérethez való igazodás miatt. Az emberek ugyanakkor bizonyos várakozással vágnak bele a weboldalad használatába, és a Te felelősséged, hogy képesek legyen elérni a céljaikat nem csak asztali gépeken, hanem mobilon is.

4. HA NEM TESZTELSZ

A tesztek hivatottak arra, hogy még a weboldal élesítése előtt kiderüljenek annak hibái, akadálytalanul lehessen használni őket. Ennek ellenére sok weboldal kerül élesítésre mindenféle teszt nélkül. Ha nem is mindent, bizonyos elemeket mindenképpen tesztelni kell egy-egy újonnan indított weboldal kapcsán. Például a weboldal kompatibilitását a különféle böngészőkkel és operációs rendszerekkel, de fontos lenne különböző eszközökön is ellenőrizni a weboldalt az indulás előtt.

5. HA NEM TÖRŐDsz A WEBOLDALad SEBESSÉGÉVEL

Teljesen mindegy, hogy mennyire lett lenyűgöző a reszponzív weboldalad, ha a betöltési ideje túl hosszú. A felhasználóknak nincsenek hosszú másodperceik arra, hogy megvárják, amíg megjelenik a böngészőjükben a weboldalad. A betöltési időt legalább három másodperc alá kell szorítani, de minél gyorsabb, annál jobb. Különösen, ha mobileszközökről van szó, ahol a sebesség kérdése még kritikusabb. Ennek érdekében a képek, grafikák méretét optimalizálni kell, hogy megfelelő minőséget nyújtsanak, még elfogadható méret mellett, valamint minimalizálni a kódok méretét. A weboldalsebességről itt írtunk részletesebben.

6. HA AZT HISZED, EGY KÉP-MÉRET MINDEN ESZKÖZRE ILLIK

Sok webdesigner követi el azt a hibát, hogy egyetlen képet használ az összes platformot megcélozva. Ez azonban nem a legjobb megoldás, hiszen a kompatibilitási problémák rontják a felhasználói élményt és csak idegessé teszik az embereket. Vagyis amikor reszponzív oldalról van szó, akkor az eszközök igényeihez kell igazítani a képeket is.

7. HA TÚL KICSIK A CALL TO ACTION GOMBJAID

Ha egy felhasználónak nagyítania kell azért a weboldalon, hogy mobilon rá tudjon kattintani egy-egy CTA-gombra, vagy véletlenül egy másik linkre kattint, akkor ott komoly gond van. Győződj meg tehát arról, hogy call to action gombjaid is megfelelő méretűek és kellően elkülönülnek a weboldal más elemeitől!

8. Amikor az eszközökre koncentrálsz a kijelzők helyett

Az elképesztő változatosság teszi lehetetlenné azt, hogy egy-egy eszközt célozzunk meg, amikor webdesignt készítünk. Ehelyett elsősorban a különböző kijelzőméretekre érdemes fókuszálnunk.

Tehát felejtsük el azt a felosztást a tervezésnél, hogy vannak a viselhető eszközök, mobilok, tabletek és számítógépek! Ehelyett inkább gondolkodjunk mikro-kijelzőkben, kisméretű kijlezőkben, közepes méretűekben, nagyméretű és extra nagy kijelzőkben.

Ez azért is egyre fontosabb, mert ahogy az eszközök fejlődnek, azt látjuk, hogy a kategória-határok egyre jobban elmosódnak. A mobiltelefonokat ma már alig lehet egyetlen kategóriába beleerőltetni, olyan mértékben eltérőek a kijelzőik méretei. Egy-egy mobiltelefon kijelzője időnként nagyobb, mint egy tableté, miközben a tabletek kijelzőméretei elérik a kisebb laptopokét, de akadnak olyan számítógépmonitorok, melyek akár már tévéméretűek.

Az eszköz maga egyre kevesebb támpontot ad a kijelző méretével kapcsolatban, vagyis nem lehet figyelembe venni a reszponzív töréspontok megtervezésénél.

9. Csak az eszközméreteket veszed figyelembe a töréspontoknál

Ha létező eszközök méreteit veszed figyelembe a töréspontoknál, akkor egy-egy újabb eszköz és egy újabb kijelzőméret megjelenése akár gondot is okozhat majd a weboldaladnál. Vagyis nem lehet csak a jelenleg létező méretekben gondolkodni. A megoldást az jelenti, ha először a “mobile first” elv figyelembe vételével a weboldalad megtervezed a legkisebb kijelzőméretre, amit még használnak a látogatóid.

Ha elkészíted a tervet a legkisebb kijelzőre, innen elkezdheted felfelé skálázni a designt, médialekérdezéseket alkalmazva a megfelelő elrendezések kialakításával összefüggésben. A reszponzív töréspontokat ennél a megoldásnál maga a design határozza meg, nem pedig az eszközök. Ezzel elérhető, hogy a weboldal jól fog megjelenni a legkisebb és a legnagyobb kijelzőkön is, és nem lesz gond akkor sem, ha olyan kijelzőtartományban jelenik meg egy eszköz, ami jelenleg nem létezik.

10. Csak kicsiben gondolkodsz

Habár a kisméretű mobilkijelzők most rendkívül fontosak az egyre terjedő mobilhasználat miatt, a reszponzív design nem csak az okostelefonokról szól. Gondolni kell a nagyméretű kijelzőkre is a weboldalak tervezésénél. A felhasználók 42 százaléka még mindig számítógépeket használva látogatja a weboldalakat, ami azért nem egy jelentéktelen arány.

Ebből következően:

• Érdemes a nagyobb kijelzőket is ugyanolyan fontossággal kezelni, mint a kisméretű kijelzőket!
• Nem elég csak felméretezni a designt, hogy illeszkedjen a nagyobb kijelzőkhöz, hanem a rendelkezésre álló plusz területeket ki is kellene használni!
• Meg kell győződnöd arról, hogy a legfontosabb tartalmak a megfelelő helyeken jelenjek meg a nagyméretű kijelzőkön is!
• Figyelj a sorok hosszára, melyeknél a 45-75 karakterszám az ideális, ne legyenek olvashatatlanul hosszúak a sorok!
• A betűméretek se váljanak óriásivá a nagy kijelzőkön. Mindig érdemes ellenőrizni, hogy jól olvashatók-e még a szövegek nagy kijelzőkön is!

11. Ha mindenhol ugyanahhoz a navigációs megoldáshoz ragaszkodsz

Miközben persze rendkívül fontos dolog következetesnek maradni a navigációt tekintve, a különböző kijlezőméretek indokolhatják az eltérő megoldásokat. Nem kell tehát erőltetni az abszolút következetességet minden elrendezésnél, még akkor sem, ha navigációról van szó. És itt nem csak a hamburger ikon megjelenésére gondolunk a mobilos weboldalakon, hanem például arra, hogy egy desktopon horizontális navigációs menü mobilon vertikális elrendezésűvé változhat.

Amiben következetesnek kell maradni, az a linkek vagy gombok szövege, a betűtípusok és a színek. A gombok méretei, az elrendezés viszont változhat, ahogy a navigáció működése is alkalmazkodhat például az érintőkijelzőkhöz. Tehát míg egy navigációs menü a monitoron statikusan az oldal tetején helyezkedik el, addig kisebb kijlezőméreteknél akár folyamatosan látható lehet az oldal tetején.

12. Ha elfelejted, hogy az érintőképernyőket másként használjuk

A kijelzők nem csak méretükben különböznek, hanem a beviteli módban is. A designerek azonban időnként elfeledkeznek arról, hogy mobilon a felhasználók az ujjukat használják. A kijelzők sarkai kapcsán tisztában kell lenni azzal, hogy a nagyon kicsi méreteknél a bal alsó sarok a legkönnyebben elérhető pont a felhasználók számára. Ugyanakkor tableteknél a felső sarkok ezek. Ebből következően a CTA-gombok akár különböző helyekre kerülhetnek különböző kijelzőméreteknél.

A CTA-gombok esetén azok méretére is figyelni kell: egy minimum 44 pontos méret általában megfelelő. Szintén fontos, hogy az egyes kattintható elemek ne kerüljenek túl közel egymáshoz, a javasolt távolság az egyes elemek között legalább 23 pt. Emellett nem szabad elfelejteni, hogy érintőképernyőkön nincs hover, valamint figyelembe venni a leggyakoribb gesztusok használatát az interakciók tervezésénél, például az ujjak csúsztatását.

13. Nem mobilbarát oldalra linkelni

Végül pedig gondot jelenthet a felhasználóknak, ha egy reszponzív weboldaladon olyan linkek jelennek meg, melyek nem mobilbarát weboldalakra vezetik őket. Néha persze ezt nem lehet elkerülni, hiszen azokat az oldalakat, melyeket nem Te kezelsz, nem tudod befolyásolni ilyen szempontból. A megoldás legfeljebb az lehet, ha mobilbarát változatot keresel egy-egy tartalomból, amikor linkelsz.

Természetesen, ha olyan tartalomra linkelsz, mely a Te befolyásod alatt áll, legyen az akár egy mikrosite vagy egy partneroldal, akkor ezeknél az oldalaknál is biztosítanod kell a reszponzív megoldást.

Mi a gond a mobile-first designnal? (FRISSÍTÉS, 2023.11.09.)

Probléma nem csak abból adódhat, ha monitorra tervezett weboldalad rosszul jelenik meg mobilon, hanem abból is, hogy a mobile-first megközelítés miatt az asztali gépes felhasználói élmény romlik.

Az ilyen megjelenésre jellemző, hogy a tartalom túlságosan széthúzva jelenik meg, hosszú görgetéssel, óriási negatív terekkel, túl nagy képekkel és betűkkel, ami eléggé megnehezít a felhasználóknak az oldal befogadását monitoros megjelenésnél.

Márpedig 2023-ban már elég sok weboldal készül mobile-first designnal, így akadnak oldalak, ahol fel lehet fedezni ezeket a problémákat a gyakorlatban is:

Az ilyen széteső megjelenés olykor csak a weboldal egy részére jellemző, nem feltétlenül az egész oldalra, ilyenkor nyilván kevésbé okoz gondot. Ugyanakkor, ha már a tartalom nagyobb része így jelenik meg, akkor az erősen rontja a felhasználói élményt.

Az NNG vizsgálatai szerint nagyméretű kijelzőn a széthúzott megjelenés erősen megnöveli a kognitív terhelést és az interakciós költséget a felhasználóknál, akik nehezebben dolgozzák fel a tartalmat, így csalódottan távoznak az oldalról.

Ebben persze nem csak a rossz reszponzív megjelenés játszik közre, hanem, hogy népszerűbbé vált a minimalizmus és a nagyméretű képek használata. Ezek a tényezők mind hozzájárulnak ahhoz, hogy egy alapvetően mobilra tervezett weboldal reszponzivitása ellenére is használhatatlanul jelenik meg nagy kijelzőn.

Mit lehet tenni, hogy elkerüljük ezeket a problémákat?

• Mindenképpen ellenőrizni kell, hogy miként jelenik meg a weboldal nemcsak mobileszközökön, hanem nagyméretű kijelzőkön is. Ha azt látjuk, hogy az oldal valamely részei aránytalanul nagyok lesznek, akkor meg kell fontolni az újratervezést, különösen a fontos tartalmi részeknél, hogy asztali gépen is befogadhatóvá váljon a tartalom.
• Meg kell vizsgálni, hogy a képek adnak-e értéket a tartalomhoz. A nagyméretű, de kevés információval nem szolgáló, csak dekorációs célú képek desktopon több kárt okoznak, mint amennyi értéket jelentenek.
• Át kell gondolni az összekapcsolódó tartalmak elrendezését, és arra kell törekedni, hogy a legfontosabb információk lehetőleg egy kijelzőnyi méretben jelenjenek meg monitorokon, így elkerülve a zavaró fel-le görgetést asztali gépes megjelenésnél.
• Lehetőleg kerülni kell a mobilos interakciós és design elemeket, tehát például a kinyíló megoldásokat, ugyanakkor érdemes megfontolni az adaptív kialakítást, mely jobb élményt hozhat nagy kijelzős megjelenés esetében.
• A negatív terek használata legyen tudatos, vagyis mindig azt a célt szolgálják, hogy a fontos elemekre, tartalmi részekre hívják fel a figyelmet, ne pedig feleslegesen szorítsák ki a hasznos tartalmat a kijelzőről.

Reszponzív vagy adaptív design? Melyiket válaszd?

Mi a különbség a kettő között? A felhasználó szemszögéből tényleg nem sok: mindkettő megfelelően működik a különböző kijelzőméreteknél. Ennek ellenére mégsem egészen mindegy, hogy melyiket választjuk. Az elmúlt években minden a reszponzív webdesigntól volt hangos. Mellette nem feltétlenül rajzolódott ki világosan, hogy létezik az adaptív design. De az is előfordul, hogy a kettőt keverik, hiszen mindkettő célja ugyanaz. A két név sem mutatja meg pontosan, hogy mi is közöttük különbség, különböző definíciók keverednek, illetve bizonyos megközelítés szerint a reszponzív design a nagyobb halmazt jelentő adaptív design része.

Mobilra a reszponzív design és az adaptív is jó

De ezeken a problémákon átlendülve közelítsük meg úgy a dolgot, hogy mindkét megoldásnál egyaránt érvényesül az az elv, hogy olyan weboldalakat lehet velük készíteni, melyek egyaránt jól jelennek meg okostelefonokon és asztali gépeken. Ha a felhasználók szempontjából nézzük, akkor tehát adott egy weboldal, mely egy URL-ről elérhető, és használható mobilon, tableten, laptopon is. Nincsen tehát semmi gond.

Nem ez a helyzet ugyanakkor a weboldaltulajdonosok szemszögéből. Vannak ugyanis különbségek a két megoldás között, melyekkel nekik nem árt tisztában lenni, ha valóban optimális élményt akarnak adni látogatóiknak minden eszközön.

Mi a különbség?

A két technológia között sokféleképpen leírható a különbség, de az egyik legegyszerűbbnek tűnő megközelítés szerint úgy ragadható meg, hogy míg a reszponzív design esetében egy kliensoldali megoldásról van szó, addig az adaptív esetében egy szerveroldaliról. Míg előbbinél a teljes weboldalt megkapja minden felhasználó – az is, aki mobilon netezik és az is, aki asztali gépen -, addig az utóbbinál a szerver azonosítja az eszközt, és olyan weboldalt szolgáltat, amelyik az eszközünkön jól jelenik meg.

A reszpozív design esetén tehát be kell tölteni a teljes weboldalt okostelefonokon is, és csak a böngészőhöz érkezve dől el – úgynevezett médialekérdezés segítségével választja ki a stíluslapot -, hogy mit kap végül a felhasználó. Ezért van az, hogy egy reszponzív design esetében ahogy változtatjuk a böngészőablak méretét, úgy változik a weboldal mérete, elrendezése. Az adaptív esetében a szerver egyszer azonosítja be az eszközt egy szkript lefuttatásával, és az annak megfelelő verziót tölti be.

Előnyök és hátrányok

Ebből a jellegzetességből mindjárt világosan látszik a reszponzív design legtöbbet emlegetett hátránya is: adott esetben túl nagy lesz a weboldal mérete a mobilos netezéshez. Vagyis lassabb lesz az oldal betöltődése, amit nem szeret sem a Google, sem pedig a látogatók és a vevők.

Ugyanakkor az is nyilvánvalóvá válhat egyből, hogy gond van az adaptív esetében is: nem elég egyetlen weboldalt, azaz egy HTML-fájlt készíteni, ehelyett több statikus elrendezést kell összedobni – ami több HTML és CSS fájlt jelent -, melyek közül a kijelzőfelbontástól függően választ a szerver.

Az adaptív design mellé a mobilos gyorsaságon túl még egy további érv felsorakoztatható, mégpedig az, hogy mobilra a technika segítségével bizonyos esetekben sokkal inkább passzoló oldal készíthető. Vagyis olyan funkciók jelennek meg csak mobilok számára, melyek a mobileszköz hordozhatósága miatt lehetnek fontosak (például utazás, helyváltoztatás közben). Ezzel pedig jóval bonyolultabbá, akár költségesebbé is válhat egy weboldal elkészítése adaptív megoldással.

Ugyanakkor lehet olcsóbb is az adaptív design, hiszen egy meglévő weboldalunk mellé csak hozzáteszünk még néhány adaptív template-et, és máris lesz mobilon is használható weboldalunk.

Kinek érdemes adaptív megoldást és kinek reszponzívot választania?

Adaptív webdesignt azoknak érdemes választani, akik a mobilos verzióba olyan (például lokáció alapú) funkciókat akarnak elhelyezni, amelyek az asztali változatban feleslegesek lennének. De azoknak is érdemes megfontolni a használatát, akik túl nagy méretű és túl összetett desktop weboldalt képzelnek el, nagy képekkel, videókkal, melyet nehéz lenne megjeleníteni mobilon, és ráadásul az elfogadhatónál lassabban töltődne be.

Azok viszont, akik egyszerű, átlátható, áramvonalas és egy teljesen új weboldalt szeretnének, bátran vállalják be a praktikus és jól használható reszponzív webdesignt, mert nagyobb döccenők nélkül fog siklani minden eszközön, miközben kevésbé bonyolult és költséges.

További lehetőségek

Ugyanakkor, hogy ne legyen ennyire egyszerű a dolog, a két megoldást kombinálni is lehet. Így például lehetséges, hogy miközben reszponzív a weboldalunk, használunk valamennyi szerver oldali lekérést is, és bizonyos elemeket (például nagy képeket, videókat) mobilnézetben ennek segítségével kihagyunk a weblapunkról. (A HTML 5.1 ugyanakkor a képek szempontjából már segítséget jelent a reszponzív design számára, tehát még árnyaltabbá válik a helyzet.) Ugyanakkor létezik kliensoldali adaptív megoldás is, amikor Javascript használatával gondoskodunk arról, hogy a mobilos verzióban nem megjelenő elemek kerülhessenek a weboldalra laptopon való használatkor.

A reszponzív design (jelene és) jövője

Mire végre alkalmazkodtak a designerek a mobiltelefonok világához, úgy tűnik, hogy ez a világ egy nagyot változott. Egyre szaporodnak a viselhető eszközök, a szenzorok, terjed a “dolgok internete”. Mindez megbonyolítja a helyzetet, máshogy kell tekinteni a reszponzív designra is, mint ahogy eddig tettük. Új szempontok merülnek fel a tervezésben, és ezekre a szempontokra, a hozzájuk való igazodásra hívta fel a figyelmet a Webdesigner Depoton megjelent cikkében Sergio Nouvel.

Már ne mobilra, hanem mobilitásra tervezz!

Eddig ugyanis a mobilra való tervezést a reszponzív design jelentette. Ez leegyszerűsítve a kisebb méretű, érintésre optimalizált webről szólt. Most azonban termékek és szolgáltatások sora jelent meg érzékelőkkel és net-hozzáféréssel. Így a mobilról sokkal inkább a mobilitásra helyeződik a hangsúly. Tehát ahelyett, hogy egy meghatározott eszközre terveznénk, ki kell tágítani a szemléletet. Mert a mobilitás már a kontextusról szól, nem pedig az eszközről.

Sokáig a mobilok jelentették tulajdonképpen az egyetlen okos és valóban mobil eszközt. Ma már azonban velünk vannak az okosórák, a fitneszkarkötők és egyéb viselhető eszközök különféle szenzorokkal felvértezve. Ezen eszközök egyre többet tudnak a felhasználók egy adott időben jellemző környezetéről.

Ez a kontextus-tudatosság az olyan helyzetekre való tervezést is magába foglalja, amikor a rendelkezésre álló információk mennyisége korlátozott. Bizonyos helyzetekben ugyanis nem hozzáférhetők az adatok, például a felhasználó helye nem meghatározható. A lényeg azonban, hogy

ÚJRA KELL DEFINIÁLNI A RESZPONZIV DESIGN FOGALMÁT.

A reszponzív design jelentése mára megváltozott az eredeti jelentéséhez képest. Leszűkült arra, hogy egy design különféle méretű kijelzőkhöz igazodik. Most az újabb eszközök megjelenése miatt vissza kell térni a reszponzív design eredeti, teljes jelentéséhez, vagyis hogy képes reagálni és kommunikálni a felhasználóval.

Egy valóban reszponzív felület ugyanis aktívan figyeli az egyébként kiszámíthatatlan környezetet. Ebbe beletartozik minden, egészen az internetkapcsolat megszakadásán keresztül a felhasználó szívverésének hirtelen felgyorsulásáig. Remek dolog például, hogy a Waze automatikusan átvált éjszakai módra napnyugta után, ugyanakkor ennél is jobb megoldás volna, ha folyamatosan figyelné a fényviszonyokat, és ha az autó egy alagútba ér, vagy akár csak egy mesterségesen megvilágított parkolóházba, akkor is váltana.

A tervezők egyelőre nem használják ki eléggé azokat az adatokat, melyeket már megszerezhetnek egy felhasználóról. Az analitika például nagyon sokat elmond arról, hogy ki látogatta meg az oldalunkat vagy az applikációnkat. Ezeket az adatokat azonban egészen passzív módon használjuk fel, amikor csak azt vizsgáljuk, mi történt. Mi lenne, ha az analitikai adatok révén valós időben reagálnánk a felhasználókra?

A kijelző fogalma is bizonytalanná vált

Azt nyilván senkinek sem kell bemutatni, hogy a kijelzők sok eszközön egyre kisebbeké válnak, miközben bővülnek a képességeik. Azt viszont talán nem mindenki tudatosította, hogy most már magának a kijelzőnek a fogalma is bizonytalanná vált. Hiszen például egy Oculus Rift kijelzőnek számít? Vagy mi a helyzet az autók szélvédőjén megjelenő interface-szel? Vagy azzal, amit a Holo Lens helyez a szobánk falára?

Tehát egyfelől a vizuális felhasználói felületek esetében már nem csak a világító négyzetről van szó, mint amit a mobilunkat elővéve látunk. Másfelől viszont a hang vagy az érintés alapú visszajelzések révén még több lehetőség adódik kommunikációra a felhasználókkal. A mobilitás ebben a helyzetben egyet jelent a visszahúzódással, hiszen a rendszer alkalmazkodik a felhasználókhoz, nem pedig nekik kell hozzá igazodni.

NOTIFICATION-FIRST DESIGN

Emellett az appok által küldött jelzéseket, üzeneteket is meg kellene tervezni, sőt ez sok esetben fontosabb lenne, mint az app belső felülete. A hangsúly tehát az app desingjáról annak a tartalomnak az értékére helyeződik, amit a felhasználó kap az alkalmazástól. Ez persze nem jelenti azt, hogy az appok eltűnnek vagy elértéktelenednek, hiszen egyrészt ezek szolgáltatják magukat az információkat, másrészt pedig az appokban részletesebb infókat találnak a felhasználók.

Ugyanakkor azt már nem szabad elfelejteni, hogy a kártyákon megjelenő vagy más apró értesítések váltják ki leginkább az elköteleződést és az interakciót a felhasználókból. A “notification-first” szemlélet miatt egy alkalmazás értékét már csak másodlagosan határozza meg annak designja, elsődlegesen az általa megjelenített információk értéke számít.

Ez persze nem azt jelenti, hogy innentől bombázni kell a felhasználókat az értesítésekkel, hiszen sokkal kevesebbre lenne szükségünk annál, mint amennyit már most is kapunk. Sok alkalmazás él vissza a lehetőséggel, és irreleváns, nem kért, váratlan információkkal zavarja meg az embereket. Az értesítéseknek sokkal inkább értéket kell hordozniuk, és nem folyamatosan zaklatniuk a felhasználókat.

AZ INFORMÁCIÓ ÉS A KONTEXTUS KAPCSOLATÁNAK MEGTERVEZÉSE

És ezzel vissza is jutottunk a kontextus-tudatossághoz, amire a designereknek jóval nagyobb figyelmet kell majd fordítaniuk. Azért is, mert a növekvő mobilitás miatt a környezet egyre kevésbé kiszámíthatóvá válik. Míg a ‘90-es években szinte biztos volt, hogy egy felhasználó egy asztal előtt egy széken ül egy szobában, addig most már lehet bárhol, bármikor.

A technológia révén hozzáférhetünk azokhoz az adatokhoz, melyekből következtethetünk a felhasználó helyzetére, körülményeire. Meg kell azonban értenünk, értelmeznünk kell a kontextust, mert e nélkül csak egy rakás használhatatlan adatot kapunk a szenzorok révén. A felhasználó-kutatás tehát még fontosabbá válik, hiszen ezáltal tehetők jobbá a termékek és a szolgáltatások, valamint következtethetünk a kontextusra, amire persze reagálnunk kell.

Összességében a szerző azt a következtetést vonja le, hogy a UX design az új eszközök révén sokkal bonyolultabbá válik, a designereknek még szélesebb perspektívájú, együttműködő szemléletre van szükségük, alaposan figyelembe véve, hogy kinek terveznek. Mélyíteni kell a tudásukat az elérhető technológiával kapcsolatban, olyan mértékben, hogy a felhasználókat ne lepjék meg ezekkel.

az okosórák korszaka

Egy másik elképzelés szerint viszont az okosórák miatt a hangalapú webdesignra kell átállni. A fő probléma ugyanis az, hogy okosórákra az eddig megszokott séma szerint nem lehet úgy begyűrni egy weboldalt, hogy az befogadható legyen a felhasználó számára. Az Apple Watch nem is teszi lehetővé az órán történő böngészést, hiszen nincs rajta webböngésző. Ennek oka nyilván nem az, hogy az Apple nem akarta, hogy az emberek a webet használják az órájukon, sokkal inkább az, hogy nem tudták értelmes módon megoldani az okosórás böngészést – véli a Webdesigner Depot szerzője, aki egy cikket szentelt annak a kérdésnek, hogy mi jöhet a webdesignban az okosórák korszakában.

Abból indul ki, hogy adott egy eszköz, melynek 272×340 pixeles a kijelzőfelbontása. Ez nem megfelelő egy weboldal megjelenítésére, mindössze néhány sor fér rá olvashatóan. És a probléma nem csak az Apple Watchok esetében áll fenn, hiszen a konkurencia már évek óta készít okosórákat, melyeknél ugyanez a kihívás.

A megoldás nyilván nem lehet az eszközök méretének ész nélküli növelése, mint azt az okostelefonok esetében láttuk, hiszen egy idő után megszűnnek óraként, vagyis viselhető eszközként funkcionálni, ilyen erővel a mobiltelefonunkat is a csuklónkra csatolhatnánk. Persze bizonyos információkat át tud adni egy okosóra is a felhasználójának, ezeket az appok ki is szolgálják. A web viszont a bélyeg nagyságú felületen egyszerűen nem működik.

Mobile first helyett audio first?

A megoldás a szerző szerint leginkább az lehet, hogy megváltozik a viselhető eszközöknél az információ-átadási módszer: ahogy ma már használhatók a hangalapú utasítások a Sirinek, a Cortanának és az OK Google-nek köszönhetően, úgy a legéletképesebb megoldásnak az tűnik, hogy a böngészés is hangalapúvá válik. Amihez viszont hamarosan igazodni kell a weboldalak tervezésénél.

Természetesen időt vesz igénybe, mire kiforrnak ezek a viselhető eszközök, és kialakulnak az új sztenderdek, melyekhez érdemes lesz alkalmazkodni, ugyanakkor a kijelzőn lévő tartalmat felolvasó megoldásokra vonatkozó szabványok már léteznek. A webdesign jövőjét tehát a most már teljes mértékben kijelzőfüggetlen technikák jelenthetik, ami a gyakorlatban azzal jár, hogy lassan ejteni lehet a mobile first szemléletet és komolyan venni az audio first megközelítést. Amennyiben egy weboldalt már most is jól tudnak használni a kijelzőolvasók, akkor az várhatóan jól együtt tud majd működni a webböngészők következő generációjával – véli Benjie Moss.

Aztán vagy elhisszük a szavait, vagy csak legyintünk rá, hogy ez még igen messze van. Először próbáljunk meg legalább mobilra optimalizálni, mert a weboldalak legnagyobb része még ezzel is adós. Neked már mobilbarát, reszponzív a weboldalad? Ha nem, akkor keress minket bátran!

Címkék: adaptív design, mobilbarát webdesign, reszponzív design, reszponzív webdesign