Reszponzív weboldal készítés

Valószínűleg nem mondok azzal újdonságot, hogy az emberek egyre gyakrabban interneteznek a telefonjukról, tabletről és egyéb eszközökről. Ezért ma már nem elég, ha csak az asztali gépen jelenik meg megfelelő formában a weboldalad, mobil eszközökre is optimalizálnod kell. Itt jön képbe a reszponzív weboldal készítés.

A reszponzív weboldal (vagy mobilbarát weboldal) minden felbontáshoz automatikusan igazodik és mobilon is ugyanolyan magas felhasználói élményt nyújt, mint táblagépen, vagy laptopon, pc-n.

Régebben elég volt egy statikus weboldalt elkészíteni, azonban ma már annyi különböző felbontású eszköz létezik, hogy a reszponzivitás alapkövetelmény egy weboldal számára. Minden webfejlesztő repertoárjának részét kell, hogy képeznie a mobilbarát dizájn.

Ebben a cikkben a reszponzivitás témakörét járjuk körbe, kezdjünk is bele!

A reszponzív szó jelentése

Rögtön az elején érdemes meghatározni, hogy mit is értünk a „reszponzív” kifejezés alatt. Sokan (én is) még ma is a mobilbarát szóval szokták helyettesíteni, azonban ez ma már jóval több, mint a mobil eszközök felbontásának figyelembe vétele. Gondolj csak bele, hogy a 4K-s tv-k, vagy a Retina kijelzővel rendelkező iMac-ek kijelzőire is terveznünk kell, ezek pedig nem mobil eszközök.

A reszponzív kifejezés egy olyan metódust jelent, mely szerint a weboldal az azt megjelenítő kijelző méreteihez adaptálódik. A reszponzív weboldal készítés lehetővé teszi, hogy bármely kijelzőn tökéletesen funkcionális weboldalt láthassunk, optimális felhasználói élményt biztosítva, attól függetlenül, hogy egy iPad-en nyitod-e meg a website-ot, vagy egy laptopon.

A reszponzivitást a HTML és CSS (és néhány esetben Javascript) technológiák használata teszi lehetővé. Ezek olyan modern programozási nyelvek, melyek a mai weboldalak alapjait adják. A HTML adja a reszponzív weboldal keretét, míg a CSS felelős a dizájnért. Ezt azért fontos megjegyezni, mert a reszponzivitás nem egy programnyelvet jelent, hanem egy weboldal készítési metódust.

Mi az a reszponzív weboldal?

A fentebb említett metódussal készített weboldalakat nevezzük reszponzív weboldalaknak. Mivel manapság már alapkövetelmény a technológia alkalmazása, ezért szinte minden új weboldalt reszponzív weblapnak nevezhetünk. Alapvető elvárás minden webfejlesztő vállalkozás részéről a reszponzív megközelítés használata.

A reszponzív webdesign alapelemei

Több olyan tényezőt is meghatározhatunk melyek egy weboldal helyes megjelenéséért felelősek, így a reszponzív weboldal készítés szempontjából nélkülözhetetlenek. Ezek a következőek:

CSS és HTML

A modern web alkotóeleme a CSS és HTML kódok kombinációja. Minden weboldal alapjait ez a két programozási nyelv adja, nincs ez másképp a reszponzív weboldalak esetén sem. Ez a két kódtípus kontrollálja az elemek böngészőben történő megjelenését. A HTML felelős az alapvető struktúráért, magáért a vázért, míg a CSS a különböző elemek finomhangolásáért felelős.

CSS media query

A media query-nek nevezett kategória a CSS egy olyan eleme, mely segít a weboldal tartalmát különböző tényezők szerint (felbontás, méret, stb.) módosítani.

Konyhanyelvre fordítva gyakorlatilag egy módosító elemről beszélünk. Ugyanis ez a néhány sor kód azt vizsgálja, hogy mekkora a megjelenített felbontás és ha az egy adott kategóriába esik, akkor azon kategóriának megfelelően fogja módosítani a weblap tartalmát. Tehát más méretet és elrendezést fog egy elemnek adni egy 1080 pixel széles, reszponzív weboldalon és egy 768 pixel széles weblapon.

Töréspontok

Ahhoz, hogy a fentebb említett query-ket a reszponzív weboldal elkészítése során használhassuk, ahhoz meg kell határoznunk úgynevezett töréspontokat. Ezek olyan meghatározott szélességek, melyeket ha elér az adott felhasználó böngészője, akkor az adott törésponthoz tartozó szabályok vonatkoznak majd a reszponzív weblapot alkotó elemekre.

Rugalmas felépítés (Fluid grid)

A fluid felépítés a reszponzív weboldal készítés elengedhetetlen eleme. Régen minden egyes weboldalt felépítő elemnek fix szélességet adtak a fejlesztők. A fluid grid megjelenésével azonban már képesek lettünk százalékos és méretarány szerint változó értékeket megadni.

Hogy miért jó ez? Így a reszponzív tartalom képes a kijelző méretéhez alkalmazkodni, mivel a fixen elfoglalt pixelek helyett, a kijelző bizonyos százalékát tölti ki.

Reszponzív tipográfia

Erről sokan szeretnek elfelejtkezni, de a szöveges tartalmat is reszponzívvá kell tennünk. Ezt úgy tudjuk megtenni, ha a hagyományos pixelekben megadott szövegméret helyett reszponzív mértékegységeket használunk például az úgynevezett „em”, vagy „rem” méretezést.

Reszponzív képek

Alapesetben a reszponzív képek a fluid gridhez hasonlóan működnek, százalékos értéket kapnak, így képesek a felbontáshoz alkalmazkodni. Van azonban egy igen komoly probléma ezzel a megoldással. Mégpedig az, hogy minden felhasználó a teljes méretű képet tölti le, akár teljes méretben jeleníti azt meg, akár nem. Éppen ezért a media query-hez hasonló megoldást alkalmazunk itt is és különböző méretű képeket szolgálunk ki a különböző felbontásokhoz.

A reszponzív webdesign előnyei

Nem nehéz belátni, hogy egy reszponzív weboldalnak számtalan előnye van, egy nem reszponzív weboldallal szemben. Nézzük ezek közül a legfontosabbakat!

Hibátlan mobilos megjelenés

A legegyértelműbb előny ami a reszponzív weboldal készítéssel jár, az nem más, mint hogy mobilon is egy tökéletesen funkcionális, jó megjelenésű weboldalt láthatunk.

Ma, mikor már mindenkinek ott a zsebében az okostelefon és a weboldalak több mobilos forgalmat regisztrálnak, mint asztali gépről érkezőt elengedhetetlen, hogy mobilbarát website-tal rendelkezzünk. Azzal, hogy mobilon is megfelelő felhasználói élményt nyújtunk, rengeteg mérőszámunk fog jobb eredményt mutatni, melyről még a későbbiekben külön írok.

Magasabb felhasználói élmény

Ahogy említettem egy reszponzív weboldallal jobb felhasználói élményt tudunk nyújtani, bár ma már ez inkább standardnak mondható, elvárható az, hogy egy website mobilbarát legyen.

De mi is az a felhasználói élmény? Egy igen komplex témakör, ami mindent magában foglal amit az interakció során tapasztal a látogató, az oldal betöltési sebességétől kezdve, a navigáció könnyedségén át akár a tartalmak minőségéig.

Alacsonyabb visszafordulási arány

Bontsuk ki egy kicsit a felhasználói élmény témakörét. A visszafordulási arány egy olyan mérőszám melyet könnyen mérhetünk és a felhasználói élmény milyensége közvetlenül befolyásolja.

Ez a mérőszám azt mutatja meg nekünk, hogy a látogatók hány százaléka hagyja el a weboldalt, anélkül, hogy továbbnavigálna a weboldalon belül, vagy bármilyen interakciót végezne. Eléggé egyértelmű, hogy egy nem reszponzív weboldal szinte teljesen használhatatlan egy mobil böngészőben, ezzel szemben, ha a reszponzív webdesignra alapozunk, akkor jóval alacsonyabb visszafordulással számolhatunk.

Magasabb konverziós ráta

Egy másik nagyon fontos mérőszám, amire közvetlen hatással van a reszponzív webdesign. Minél jobb élményt nyújtunk és minél komolyabb elköteleződésre tudjuk sarkallni a látogatót, annál biztosabbak lehetünk benne, hogy a konverziók számán meg fog látszani az erőfeszítésünk.

Keresőoptimalizálási előny

Nem csak az emberek számára fontos, hogy reszponzív legyen a weboldalad. A Google rangsorolási tényezőként tekint a weboldalak mobilbarát megjelenésére, sőt már a weboldalak feldolgozása során is a mobil nézetet helyezi előtérbe.

Ebből következik, hogy SEO szempontból is igen fontos a reszponzív weboldal készítése. Ha nem reszponzív a honlapod, borítékolhatod, hogy jóval hátrébb fogsz rangsorolni, mint a versenytársaid.

Sokszor előfordul, hogy nem értek egyet a Google keresőoptimalizálással kapcsolatos döntéseivel, de a reszponzív weboldalak megléte egyértelműen jobbá teszi az internetet.

Gyorsabb weboldal készítés

Mivel manapság már nem kell két, három, vagy több külön weboldalt lefejlesztünk, hanem elég egy reszponzív weboldalt elkészíteni, mely képes alkalmazkodni a felhasználó igényeihez, ezért a fejlesztés folyamata is felgyorsult. Jóval rövidebb idő alatt, akár néhány hét, vagy egyszerűbb weboldalak esetén, akár néhány nap alatt elkészíthető egy reszponzív weboldal.

Egyszerűbb karbantartás

Az előző ponthoz szorosan kapcsolódik a karbantartás kérdésköre is. Mivel megint csak egy weboldalról beszélünk három helyett, így ebben az esetben is leegyszerűsödik a dolgunk. Elég egyetlen weboldal infrastruktúráját és tartalmát naprakészen tartani.

Alacsonyabb üzemeltetési költségek

Abból, hogy több weblap helyett csak egyet kell elkészítenie a webfejlesztőknek és csak egyet kell folyamatosan karbantartani, egyenesen következik, hogy alacsonyabb költségekkel számolnunk egy reszponzív weboldal esetén. Nem csak költségoldalon tudsz megtakarítást elérni, hanem időt és munkaerőt tekintve is, bár ezek is forintosíthatóak.

A fenti tényezőket összefoglalva úgy gondolom elég egyértelmű, hogy ma már nem is érdemes nem reszponzív weboldal készítésen gondolkodnod. Azonban fontos megjegyezni, hogy a reszponzív weboldal készítést érdemes profikra bízni, mert egy nem megfelelően elkészített weboldal sokat árthat a márkád renoméjának. Nézzünk néhány kritikus pontot, amire a reszponzív weboldal fejlesztése során érdemes kiemelt figyelmet szentelni.

A reszponzív weboldal készítés kihívásai

Számtalan szempont van amit figyelembe kell venni reszponzív weboldal készítés során, azonban van néhány neuralgikus pont, amire ha egy kis extra figyelmet fordítasz, akkor rengeteg későbbi problémát előzhetsz meg vele.

A kutatómunka (és annak a hiánya)

Mielőtt reszponzív weboldal tervezésébe kezdünk, fontos megvizsgálni a jelenlegi üzleti weboldal teljesítményét. Minél több a látogatók viselkedését jellemző információt tudunk kinyerni, annál szilárdabb alapokra helyezhetjük, új már reszponzív webdesign szerint épülő oldalunkat.

Érdemes megfigyelni, hogy hogyan navigálnak az oldalon belül, milyen elemekre érdemes kiemelt hangsúlyt fektetni, milyen tartalmakat kell átemelnünk és reszponzívvá tennünk, vagy ilyen kritikus kérdés a leggyakoribb felbontások listázása is.

Tartalmak megjelenítése és elrejtése

Sok webdesign használhatósága ennél a pontnál szokott megbukni. Sokszor nehéz megoldani azt, hogy minden egyes elemet amit asztali gépen, vagy tableten megjelenítünk, azt mobilon is elérhetővé tegyük. Persze előfordulhat, hogy egy csak dizájn célokat szolgáló illusztrációt jobb elhagyni, de fontos megvizsgálnod, hogy mely elemek nélkülözhetetlenek és hogy ezeket milyen formában érdemes átadni.

Túl kicsi elemek

Kapcsolódva az előző elemhez. Talán találkoztál már olyan „reszponzív” weboldallal, amelyen használhatatlanul apró volt némely elem. Ez legtöbbször akkor szokott előfordulni, ha a lusta webfejlesztő sablon megoldást használ és nem szabja méretre az elemeket.

A tesztelés (és annak hiánya)

A tesztelés kihagyhatatlan eleme a reszponzív weboldal készítés folyamatának. A folyamat ezen fázisa hivatott feltárni az esetleges hibákat, mielőtt élesítésre kerülne az oldal. Nem hiszem, hogy nagyon magyaráznom kellene, hogy miért jobb, ha egy problémát azelőtt fedezünk fel és javítunk, mielőtt azt az internethasználók fedezik fel.

A reszponzív weboldal készítés folyamata

Nézzük milyen lépéseken keresztül fogsz eljutni az árajánlat bekérésétől a kész reszponzív weboldal átvételéig.

Kapcsolatfelvétel

Ha már elhatároztad magad a reszponzív weboldal készíttetése mellett, akkor első lépésként keresned kell egy kivitelezőt. Teljesen egyéni preferencia, hogy mi alapján fogsz döntést hozni, de végeredményként előtted lesz néhány árajánlat, melyek közül a nyertes fejlesztőkkel megkezdődhet a közös munka.

Konzultáció

A konzultáció jellemzően az árajánlat elfogadása után történik, de vannak esetek, hogy ezt megelőzi egy közös beszélgetés. Ilyenkor az árajánlat pontosításra kerül, kijelölitek a főbb elvégzendő feladatokat, határidőt és döntéseket hoztok egyéb lényeges kérdésekben is. Ezt követően megkezdődhet a weboldal fejlesztés érdemi része.

Tervezés és dizájn

Ha megvan a konkrét elképzelés, akkor kezdődhet a reszponzív weboldal készítés tervezési fázisa. Ebben elkészül a váz, amely weboldalad alapjait fogja adni, majd erre folyamatosan, lépésenként építkezünk. Elkészül az oldaltérkép és a különböző grafikai elemek.

Fejlesztési fázis

A fejlesztési fázis során látni fogod, ahogy elemenként ölt alakot a weboldalad. Lépésenként válik a vázlatból, funkcionális reszponzív weboldal. A lépés végére már közel végleges formában láthatod a weblapot.

Tartalomkészítés

A későbbi tartalom helyét legtöbbször már kijelölik a fejlesztési fázis során. Ezt vagy a fejlesztés során már elkezdik megírni, vagy kissé körültekintőbb módon a fejlesztést követően látnak hozzá. Mindenesetre ha a tartalom elkészült és felkerült a helyére, akkor a kész reszponzív weboldaladat láthatod magad előtt.

Tesztelés és élesítés

Ha minden a helyén van, akkor indulhat a weboldal tesztelése. A folyamat ezen részén megvizsgáljuk, hogy minden úgy működik-e ahogyan azt elterveztük, különös tekintettel a weboldal reszponzivitására. A sikeres tesztelést követően átköltöztetjük weboldalad a végleges tárhelyére és elérhetővé tesszük az internetezők számára.

Honnan tudhatod hogy reszponzív-e a weboldalad?

Ha kíváncsi vagy rá, hogy jelenlegi weboldalad reszponzív-e arról nagyon könnyen megbizonyosodhatsz. Egyrészt a böngésződ használatával viszonylag könnyen megvizsgálhatod a weblapod, vagy használhatod a Google speciális mobilbarát tesztjét is.

Ha a böngészőt használnád, akkor a „Nézet” menün belül keresd meg a „Fejlesztői eszközök” almenüt, vagy használhatod a „Cmd + Alt + I” billentyűkombinációt is. Ha erre rákattintasz, akkor a weboldalad egy kisebb ablakba kerül és rengeteg extra felület jelenik meg mellette. Ha ez megvan, akkor használd a „Cmd + Alt + M” kombinációt, ezzel jelenítheted meg az eszközbeállításokat. Ezek segítségével megvizsgálhatod, hogy hogyan is néz ki különböző eszközökön a weboldalad.

Ha a Google mobilbarát tesztjét használod, akkor elég a vizsgálandó weboldal url-jét beírni és megnyomni az entert. Ezt követően láthatod, hogy a site megfelel-e a mobilbarát feltételrendszernek, illetve milyen esetleg hibái vannak a weboldalnak.

Reszponzív-e a WordPress?

Ügyfeleinkben gyakran felmerül ez a kérdés konzultációink során, szóval úgy gondolom érdemes néhány mondatot ejtenem a témáról.

A WordPress alapvetően egy keretrendszer. Képes a reszponzív megjelenítésre, mi is használjuk reszponzív weboldal készítés során. Azonban, ami meghatározza, hogy reszponzív lesz-e a WordPress weboldalad, az a téma, illetve az esetleges page builder plugin használata.

Ha fejlesztőkhöz fordulsz WordPress weboldal készítéssel kapcsolatban, akkor kérdezz rá, hogy reszponzív témát használnak-e (az válasz szinte biztosan igen lesz), ha magad fognál bele a fejlesztésbe, akkor a téma, vagy page builder bővítmény megvásárlása előtt győződj meg a reszponzivitásról.

Hogyan tedd reszponzívvá a weboldalad?

Ha már van weboldalad, de az nem reszponzív, akkor a weboldal típusától függően több opció is rendelkezésedre áll.

Ha egyedi fejlesztéssel van dolgunk, akkor ott mindenképp legalább egy front-end fejlesztő segítségét kell igénybe venni, aki a kódbázis alapján ad ajánlatot a website reszponzívvá tételére. Sokszor a költségeket megvizsgálva érdemesebb egy teljesen új dizájnt kidolgozni, ahelyett, hogy a régi megjelenést foltozgatnánk.

Az egyetlen eset mikor erőltetném a jelenlegi dizájn reszponzívvá tételét, az az mikor egy naprakészebb dizájnról van szó, ami valamiért bizonyos felületeken nem megfelelően jelenik meg. Ezek a helyzetek egy-két töréspont beszúrásával és testreszabásával sok esetben könnyen orvosolhatóak.

Könnyebb dolgod van akkor, ha CMS alapú a weboldalad, például WordPress-t használsz. Ilyenkor egy régi dizájn viszonylag egyszerűen módosítható egy reszponzív téma megvásárlásával és testreszabásával.

Új trendek a reszponzív weboldal készítésben

A reszponzív weboldalak fejlődése nem állt meg a mobil eszközök térhódítása után sem. Folyamatosan jelennek meg az új technológiák és szemléletmódok, amelyekhez a fejlesztőknek alkalmazkodniuk kell. Emellett új eszközök is segítik a kivitelezők munkáját, hogy még egyszerűbben készíthessenek reszponzív weblapokat. Nézzünk most ezek közül néhányat.

Retina design

A 2010-es évek első felében vezette be az Apple a „Retina” kifejezést a köztudatba. Ezzel jelölte a nagy pixelsűrűségű kijelzőit a cég. Ez a megszokottnál nagyobb sűrűség és nagyobb felbontás iparági standard lett az Apple eszközeinek rohamos terjedésével, így a webfejlesztők sem hagyhatják figyelmen kívül a reszponzív weboldalak készítése során.

Mobile-first megközelítés

Néhány éve elértük azt a pontot, amikor már többen böngésztek mobil eszközökről, mint asztali gépekről. Manapság világszinten valahol 60% körül van ez az arány a mobilok javára.

Ez az új felhasználói trend azt eredményezte, hogy a fejlesztőknek a mobil dizájnra legalább akkora hangsúlyt kell fektetniük a reszponzív webdesign elkészítése során, mint az asztali verzióra, sőt manapság már a legtöbb esetben hamarabb készítik el a mobil oldalt, mint az asztali verziót, ezt jelöli a mobile-first elnevezés is.

Flexbox használata

Korábban említettem, hogy manapság már százalékos értékeket és reszponzív mértékegységeket használunk fix szélesség helyett. Egy speciális CSS modul azonban még több lehetőséget biztosít a fejlesztők számára, ennek a neve Flexbox. A Flexbox segíti az egy blokkban található elemek elrendezésének módosítását oly módon, hogy egymáshoz és a weboldalhoz viszonyítva rendezi őket, egy szövegszerkesztő sorkizárt, vagy rendezett beállításaihoz hasonlóan.

Összefoglalva

Ha olyan weboldal készítésén gondolkodsz ami kiállja az idő próbáját és hosszútávon képes szolgálni a vállalkozásodat, akkor ma már nem engedheted meg azt, hogy ne egy reszponzív weboldalt készíttess. A cikk elolvasását követően láthatod, hogy kissé több munkát igényel, de nagyságrendekkel jobb felhasználói élményt nyújt a látogatók számára, így támogatva üzleti céljaid elérését.

Gyakran ismételt kérdések