Honnan ered?

Minden nagyszerű dolog mögött egy tervező áll, aki úttörőként hoz létre valami forradalmi újdonságot az utókornak. A reszponzív webdesign esetében ő nem más, mint Ethan Marcotte, aki 2011-ben megjelentette katalizátorként emlegetett könyvét,, a "Reszponzív Webdesign"-t, amely megalapozta a webdesign újfajta megközelítését. Az általa leírt szabályok és rendszerek persze azóta mindenki számára alapvető tervezési elvárássá váltak.

A reszponzív weboldal célja, hogy optimális megjelenést biztosítson a felhasználónak. Ez azt jelenti, hogy az oldal legyen

• könnyen olvasható és befogadható
• egyszerűen navigálható
• a legkülönfélébb eszközökön (az asztali számítógép monitorjától egészen a mobiltelefonokig) is működjön

Tehát a reszponzív webdesign egyszerűen minden képernyő mérethez képes alkalmazkodni, amire optimalizálva lett.

Egy kis kitérő: a mobile first design

Ez ugyan csak marginálisan kapcsolódik a témánkhoz, mégis fontos említést tenni róla. Manapság a felhasználók jó része mobilról nyitja meg a weboldalak nagy többségét. Pontosan emiatt kezd kialakulni az a trend, hogy egy weboldal felépítésekor egyes design tervezők a mobil nézetet alakítják ki először. Azonban ez a folyamat becsapós lehet,  meg hát könnyen a fejlesztő fejfájásához vezethet, hiszen neki jóval nehezebb dolga van, ha visszafelé, tehát kis képernyőtől nagyképernyő felé halad a fejlesztés. Mégis mi ennek az oka? A mobil méretre tervezéskor számos grafikai elemet el kell hagyni a kis felület miatt, így tanácsos inkább a nagyobb mérettől a kisebb felé haladni. Hiszen az asztali méretben minden grafikai díszítést, trükköt, animációt, képet bele vihetünk a designba, (persze, addig, amíg az a befogadhatóság célját szolgálja!),  majd ahogy haladunk a kisebb képernyő méretek felé (tablet, mobil), redukál hatjuk az oldalt.

Egyedi és sablonos megoldások

Kétféle módon lehet reszponzív weboldalakat készíteni, sablonos megoldással, vagy egyedileg.

1. Mitől egyedi?
2. Egyedi megoldások esetében minden az alapoktól indul. Az ügyféligények felmérése után  megtervezzük az oldal tartalmi struktúráját, majd a drótvázakat, ezzel párhuzamosan megalkotjuk a designt, és a webdesign alapokat, szép angol kifejezéssel a  “UI Kit”-et. Ez a  leendő honlap“atomjait” tartalmazza, amiből később felépül az oldal. Betűkészlet, színek, gombok, elemek lekerekítései, kártyák, szekciók - tehát minden! Azért jó megoldás, mert ebben az esetben az összes elem a leendő tulajdonos üzleti igényeire van szabva.
3. Sablon alapú weboldal tervezés
4. A jelentést is önmagában hordozó cím szerint egy előre kiválasztott sablon adja a tervezés alapját. Az előre megvásárolható reszponzív sablonok általában egy témát ölelnek fel, de vannak olyan univerzális sablonok is, amelyek több száz megjelenést is tartalmazhatnak. Ezek igen népszerűek, hiszen a fejlesztőnek elég egyetlen egy rendszert megtanulnia. A folyamat azért nem ennyire egyszerű, találkozhatunk ugyanis hátrányokkal: A sablonok sebessége igen csak kifogásolható, hiszen rengeteg fel nem használt kódot, esetleg felesleges bővítményt és funkciót is tartalmaznak.
5. A tervezés folyamata azonban igen egyszerű: a megrendelő kiválaszt egy neki tetsző sablont, amit a fejlesztő/tervező  később testre szab. Természetesen nem elhanyagolható itt sem az ügyféligények felmérése, illetve az arculat megtervezése sem, hiszen ezekből alakítható és egyediesíthető a sablon.Ami ezen metódus mellett szól, az az ár-érték arány, és az időtakarékosság.Ha ezt a pár sort olvasva megdobbant a szíved, és úgy érzed, a sablonos megoldás bizony a te utad, ebben a cikkünkben bővebben írunk erről a munkafolyamatról.

Miért való neked?

Számos előnye van, ezek közül megemlítünk neked párat.

Mobilkompatibilis: Mondhatjuk, hogy ez a legnagyobb erőssége! Ha reszponzív webdesignban tervezünk egy honlapot, akkor a weboldalak nagy része a legtöbb okostelefonon jól jelenik meg. Az egyedileg tervezett oldalak esetében a felületek megjelenítése a végletekig finomítható, ezért a mobilos megjelenés optimalizálásában gyakorlatilag a lehetőségek korlátlanok, határ a csillagos ég.

Konzisztens : Követhető, kiszámítható, ezáltal növeli a felhasználói élményt. A látogató ezáltal örömmel tölt időt a weboldalon.  Egy cég számára ráadásul kiemelten fontos a márkaarculat egységes megjelenítése,  erre a célra pedig tökéletes választás a reszponzív weboldal, hiszen több felületet is kiszolgál (mobil, tablet, desktop).

Ár-érték arányban az egyik legjobb választás: bár előfordulhat, hogy a tervezést magasabb összegért készíti el  egy design stúdió, mégis olyan befektetésről beszélünk, ami a későbbiekben egyértelműen megtérül. Miért is? A látogatók, adott esetben a vásárlók a jobb felhasználói élményeknek köszönhetően több időt (és adott esetben pénzt) költenek az oldalon. Már megérte, nemigaz?

SEO szempontból is optimális - miért? Mert a Google kifejezetten támogatja a reszponzív megjelenést, ezzel együtt a mobilbarát weboldalakat is. Nagy előnye, hogy **a forrás fájlok egyetlen rendszerben helyezkednek el, ezért sokkal könnyebben és kisebb energiával optimalizálhatók.

És még az analitika is egyszerű vele: A mai analitikai eszközökkel - pl. Google Analitycs, Search console abszolút  könnyen tudod megvizsgálni a reszponzív weboldalad teljesítményét.  Ez persze érvényes a különböző eszközeidre is.

Összegzés

Mondhatjuk tehát, hogy  amennyiben a mai trendeknek megfelelően szeretnéd minél hatékonyabban és szebben megjeleníteni az arculatod és a weboldalad, akkor a reszponzív tervezés a legkézenfekvőbb választás! Ha ennél mélyebben elmerülnél az alapokban, akkor  Ethan Marcotte: Responsive Web design című könyve segíthet neked ebben.A reszponzív weboldal biztosítja, hogy a felhasználói élmény a lehető legjobb legyen a különböző eszközökön, ráadásul a Google és más keresőmotorok is előnyben részesítik a reszponzív weboldalakat, ezért is érdemes a terezésnél ebben a metüdusban gondolkodni. Összességében A reszponzív weboldal garantálja, hogy a felhasználói élmény minden eszközön a lehető legjobb legyen, ráadásul a Google és más keresőmotorok is kedvezően értékelik ezt a dizájnt, így érdemes ezt a megközelítést választani a tervezés során!