Tartalomjegyzék
A reszponzív webdesign technológia segítségével készült üzleti reszponzív weboldal a legjobb megoldás lehet minden olyan cég vagy vállalat számára, ahol kiemelten fontos a különböző multimédiás, mobil eszközökön való jelenlét.
Mi az a reszponzív webdesign (responsive web design)?
A reszponzív webdesign Ethan Marcotte webdesigner nevéhez fűződik, ő az webdesigner aki kitalálta ezt a speciális webes tervezési metódust és ezzel egy csapásra megváltoztatta a klasszikus weboldal készítés alapjait.
A reszponzív webdesign jelenleg is a legnépszerűbb tervezési metódus a weboldal készítés világában. A reszponzív webdesign-al tervezett weboldal (reszponzív weboldal) tökéletesen illeszkedik a különböző multimédiás eszközök (mobil, tablet, laptop, monitor, stb.) képernyőihez, azok felbontásától függetlenül. Leegyszerűsítve, a reszponzív webdesign alapú weboldal képes alkalmazkodni minden képernyő mérethez, amire optimalizálva lett, a határ a csillagos ég.
Mi a reszponzív webdesign négy kulcs eleme?
Technikailag négy kulcs eleme van a reszponzív webdesign-nak:
Rugalmas layout Gridek (liquid):
A reszponzív weboldal kulcsfontosságú strukturális elemei rugalmas méretezésűek, így a különböző képernyő méreteken dinamikusan tud csökkeni, vagy nőni a szélességük.
Rugalmas méretarányos képek:
A reszponzív webdesign-ban a legöbb esetben a képek szélessége is dinamikusan növelhető, illetve csökkenthető a különböző képernyő méretek miatt, sőt a technológiának köszönhetően különböző képek is betöltődhetnek egymás helyére, felbontástól függően.
Reszponzív weboldal készítés határidőre
Kérj ajánlatot
CSS media query:
Gyakorlatilag ez a reszponzív webdesign (responsive web design) technológia lényege. A CSS media query segítségével ismerhető meg a weblap látogatója által használt készülékek képernyőjének mérete (és még egy csomó minden más is), amik alapján módosíthatóak a weboldalak megjelenései, mindez javascript használata nélkül.
Javascript:
Amennyiben igény van rá, hogy a régebbi böngészőkben is működjön a reszponzív weboldal, akkor szükség lesz a javascriptre, ugyanis az elavult böngészők nem képesek hibamentesen megjeleníteni a reszponzív weblapokat.
Mi az a reszponzív weboldal?
A reszponzív webdesign technológiával készült weblapokat nevezzük reszponzív weboldalaknak. Optimális esetben egy reszponzív weboldal három fajta nézetre van optimalizálva: Mobil nézet, tablet nézet és asztali nézet. Napjainkban már szinte minden weboldal reszponzív technológiával készül, tehát nyugodtan kijelenhetjük, hogy a reszponzív weboldal ipari standardnak tekinthető.
Mi az a reszponzív weboldal készítés?
A reszponzív weboldal készítés, mint ahogy a neve is mutatja, a reszponzív webdesign (Responsive Web design) metódussal tervezett weboldalak létrehozását jelenti. Napjainkban a két legelterjedtebb fajtája, az egyedi reszponzív weboldal készítés és a sablon alapú reszponzív weboldal készítés.
Kiváncsi vagy mi a különbség a kettő között? Vágjunk bele!
Sablon alapú reszponzív weboldal készítés
A sablon alapú reszponzív weboldal készítést általában az alacsonyabb költségvetéssel, büdzsével rendelkező cégek szokták választani.
Mint ahogy a neve is mutatja, a sablon alapú reszponzív weboldal készítés esetén, a készítés alatt álló weboldal alapját egy előre kiválasztott sablon (Reszponzív sablon) adja. 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. Kivitelezői szempontból az univerzális reszponzív sablonok nagy népszerűségnek örvendnek, hiszen fejlesztőnek elég egy rendszert megtanulnia, viszont megrendelői oldalról a legnagyobb hátránya az univerzális reszponzív sablonoknak a sebesség, mivel rengeteg fel nem használt kódot is tartalmaznak.
A sablon alapú reszponzív weboldal készítés folyamata általában úgy kezdődik, hogy kiválasztasz egy sablont, amit a kivitelező testreszab számodra. A tervezési szabadság ebben az esetben limitált, hiszen a megrendelői oldalon alkalmazkodnod kell a kiválasztott sablon struktúrájához.
Sablon alapú reszponzív weboldal legnagyobb előnye az ár és az idő. Kiválasztod, testreszabják, telepítik neked és indulhat a buli. Természetesen vannak hátrányok is. A sablon alapú reszponzív weboldalak legnagyobb hátránya a sebesség, a SEO és a testreszabhatóság szokott lenni, illetve a tény, hogy több ezer hasonló kinézetű weboldal pörög a interneten a sajátod mellett.
Egyedi reszponzív weboldal készítés
Az egyedi reszponzív weboldal készítés során gyakorlatilag minden az alapoktól kerül megtervezésre, hiszen a leendő tulajdonos üzleti igényeire szabva készül a friss egyedi weboldal.
Az egyedi reszponzív weboldal készítés tervezéssel kezdődik, ahol a kivitelező az elképzeléseid és a felmért igények alapján megtervezi nulláról a leendő weboldalak struktúráját drótvázak formájában. Miután elkészültek a végleges drótvázak, a design szakasz következik (reszponzív webdesign), ahol a webdesigner elkészíti a végleges designt a jóváhagyott drótvázak alapján és csak ezután jön a fejlesztés.
Pár mondatban áttekintem, milyen nehézségekkel kell megküzdeni az egyedi reszponzív weboldal tervezés során.
Több felbontásra optimalizált design
A reszponzív weblapoknál több képernyő méretre kell optimalizálni a design-t. Meg kell tervezni a mobil, a tablet, és a monitor nézeteket is, ami nem könnyű feladat, figyelembe véve, hogy egy monitorra sokkal több elem fér el, mint egy mobil kis képernyőjére.
Minél több felbontás, annál több kódolás
Általában Ipadre, Iphonera és 1280+ monitor felbontásra szokták a reszponzív weblapokat optimalizálni alapból. A weblap célközönsége és a céleszközök felbontása viszont változhat és további felbontásokat hozhat be a fejlesztésbe. Például optimalizáció nagy monitorokra 1920x+, TV-kre, kisebb tabletekre, Nexus, Ipad Mini vagy specifikus Android eszközökre. Tehát minél több eszközre szeretnéd optimalizáltatni a leendő reszponzív weboldalad, annál több időbe fog kerülni a fejlesztése.
Retina optimalizáció
A mai modern mobil eszközök már jóval nagyobb felbontással rendelkeznek az asztali monitorok felbontásainál, ezért azok a fotók képek, amik monitoron például élesek, lehet, hogy a mobilodon homályosan fognak megjelenni. Természetesen ezen a problémán lehet segíteni nagyobb felbontású képi elemek elkészítésével és az SVG technológiával, de ha sok fotó lesz a weblapodon, ez egy elég időigényes feladat tud lenni.
Az egyedi reszponzív weboldal készítés legnagyobb előnye a sebesség (SEO), a szabadság, (hiszen itt nincs megkötve a kezed az oldalak kialakításakor, mint pl. egy sablonnál) és a fókusz. A fókusz az egyedi reszponzív weboldal készítés esetében a céleszközök (desktop, laptop, mobil, tablet), a célcsoport és a felmerült igények teljeskörű kiszolgálását jelenti.
Nézzük az egyedi reszponzív weboldal hátrányait: A fentiekből is látszik, hogy az egyedi reszponzív weboldal készítés drága és időigényes mulatság, hiszen minden az alapoktól készül. Az egyedi reszponzív webdesign (responsive web design) általában a tőkeerős, hosszútávban gondolkozó cégek választása, akiknek számít a performance és egyedi megjelenésben gondolkoznak.
A reszponzív webdesign (responsive web design) az évek folyamán természetesen folyamatosan fejlődött és evolválódott. A klasszikus reszponzív weboldal készítés során a kivitelező első körben a weboldal asztali nézetét tervezi meg és csak ezután kezdi meg a tablet és mobil felületek tervezését. A legtöbb reszponzív weboldal ezzel a metódussal készül. Laikusként ezt úgy szűrheted ki, ha megnézel egy reszponzív weboldalt mobilon és asztali számítógépen (desktop), látni fogod, hogy a mobil nézet minősége elmarad az asztali nézet minőségétől. A weboldal elemei általában be vannak hányva egymás alá, a design nem konzisztens. A modernebb metódus a mobile-first metódus viszont megcseréli ezt a helyzetet, mivel (mint ahogy a neve is mutatja) a reszponzív weboldal felületei első körben mobilra terveződnek és csak ezután terveződnek az asztali nézetek. A mobile-first metódussal tervezett reszponzív weboldalak legnagyobb előnye, hogy mobilon magasabb felhasználói élményt nyújtanak a klasszikus metódussal készült társaival szemben.
Mikor érdemes ezzel a metódussal foglalkoznod? Természetesen akkor, ha a látogatóid nagyobb százalékban érkeznek mobil eszközökről, mint asztali számítógépről.
Mik a reszponzív weboldal készítés előnyei?
Nézzük át miért érdemes a reszponzív webdesign technológiába invesztálnod.
Mobil kompatibilitás
A reszponzív weboldalak legnagyobb erőssége a mobil kompatibilitás. A reszponzív webdesign (responsive web design) megjelenése előtt ha mobil kompatibilis weboldalban gondolkoztál, csináltatnod kellett egy weblapot külön mobilra és egy weblapot külön a monitoros megjelenítésre. Szerencsére a reszponzív webdesign (responsive web design) segítségével készült weboldalaknál, ez a probléma már nem áll fenn, hiszen a reszponzív weboldalak nagy része a legtöbb okostelefonon jól jelenik meg. Az egyedi reszponzív weboldal készítés során 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 tárháza végtelen.
Konzisztens márkaarculat és felhasználói élmény
Egy cég vagy online vállalkozás számára kiemelten fontos az egységes márkaarculat és az egységes felhasználói élmény megteremtése minden lehetséges platformon. Az interneten a reszponzív webdesign (responsive web design) a legjobb és leghatékonyabb megoldás az egységes márkaarculat és felhasználói élmény szempontjából, hiszen egy jó reszponzív weboldal több felületet is kiszolgál (mobil, tablet, desktop). Ha egységes branding-ben gondolkozol, a reszponzív weboldal készítés az egyik legjobb választás lehet számodra.
Költséghatékonyság
Az egyedi reszponzív weboldal készítés és a reszponzív design bár elsőre magasabb befektetési összeget igényel, hosszútávon nagyobb eséllyel hozza vissza az árát, hiszen egy fókuszált reszponzív weboldal segítségével jóval több felhasználót érhetsz el, mint egy platformra redukált applikációval. Amennyiben alacsonyabb költséggel rendelkezel, a sablon alapú reszponzív weboldal lehet a jó vàlasztás számodra, hiszen jóval olcsóbb az egyedi reszponzív weboldalaknál.
Könnyű karbantartás
Egy reszponzív weboldal karbantartása költséghatékony, hiszen a reszponzív webdesign technológiának köszönhetően, a weblapodon lévő tartalmadat elég csak egy helyen frissítened, az tökéletesen fog megjelenni, minden multimédiás felületen, amire a weboldalad optimalizálva lett.
Keresőbarát megjelenés
Keresőoptimalizálás (SEO) szempontjából a reszponzív weboldal készítés a legjobb választás lehet számodra, ugyanis a Google kifejezetten támogatja a reszponzív webdesign-t, a mobilbarát reszponzív weboldalakat. A reszponzív design hatalmas előnye, hogy a forrás fájlok egy rendszerben helyezkednek el, ezért sokkal könnyebben és kisebb energiával optimalizálhatóak. Ha a reszponzív weboldal készítés mellett döntesz, az már egy jó kiinduló alap lehet a vállalkozásod számára.
Egyszerű analitika
A modern webes analitikai eszközökkel pl. Google Analitycs, Search console, könnyedén és egyszerűn monitorozni tudod a reszponzív weboldalad teljesítményét. Sőt, akár multimédiás eszközökre lebontva is lehetőséged van arra, hogy tanulmányozd a reszponzív weboldalad analitikáját, ami főleg az oldalaid optimalizálásában lehet a segítségedre.
A fentiekből is jól láthatod, hogy a reszponzív weboldal készítés rengeteg előnnyel járhat a vállalkozásod számára. Ha a céged weboldala nem reszponzív webdesign technológiával készült, mindenképpen érdemes lesz váltanod, ezen felesleges is gondolkodnod. Ha a weboldalad már reszponzív webdesign technológiával készült, de még nem mobile-first alapú, akkor a SEO szempontjából érdemes lesz elgondolkodnod egy weboldal frissítésen.
Mik a reszponzív weboldal készítés hátrányai?
A reszponzív webdesign technológia nem csak előnyökkel, hanem hátrányokkal is jár természetesen. Nézzük át mik a reszponzív weboldal készítés hátrányai:
Lassú oldalbetöltés
A sablon alapú reszponzív weboldalak rendkívül népszerűek a piacon, mert nem igényelnek magas szakmai tudást a kivitelezői oldalról és relative gyorsan elkészíthetőek. Ráadásul jóval olcsóbbak az egyedi készítésű reszponzív weboldalaknál. Van viszont egy probléma velük, a sok előre beépített kód miatt a sablon alapú reszponzív weboldalak nagy része lassú és nehezen optimalizálható. Hogy miért probléma ez? A mai modern keresőoptimalizálás (SEO) egyik alapja a gyors oldalbetöltés. Természetesen egy alacsony sebességű reszponzív weboldal is érhet el jó eredményeket a Google keresőjében a megfelelő kereső optimalizálással (SEO), de ha a riválisaid gyors weboldallal rendelkeznek és a SEO-val is foglalkoznak, nem sok esélyed lesz befogni őket a Google-ben, ha a weboldalad lassú.
A reszponzív tartalomtervezés hiánya
A reszponzív weblapoknál érdemes előre meg tervezned az oldalak tartalmait, hiszen monitoron és tableten van hely bőven, viszont a mobil felületeken csak minimális hely áll a rendelkezésre a reszponzív weboldal készítés során. A tartalmat és a stratégiát tehát jó előre meg kell tervezned, vagy terveztetned egy profi szakemberrel, aki már több dimenzióban képes látni a különböző felbontások lehetőségei között. Sokan nem szoktak tervezni és terveztetni sem, aztán a végén jönnek szépen elő a struktúrából és tartalomból eredő problémák, például nem fér ki a szöveg.
A megfelelően felépített egyedi reszponzív weboldal megtervezése időigényes feladat lehet, hiszen akár a végtelenségig finomítható a weboldalak megjelenése a különböző felbontásoktól függően.
Összegzés
Ha modern, a mobileszközökön is tökéletesen megjelenő weboldalban gondolkozol, a jelenlegi legjobb választást a reszponzív webdesign (Responsive Web design), a reszponzív weboldal készítés nyújtja. Amennyiben még mélyebben szeretnél a technológia adta lehetőségekben elmerülni, bátran ajánlom Ethan Marcotte: Responsive Web design című könyvét, én rengeteget tanultam belőle.
