Reszponzív weboldal

A reszponzív megoldás alatt azt értjük, hogy a megnyitott honlap alkalmazkodik a használt eszköz kijelzőjéhez és ennek megfelelően igazítja a betöltött tartalmat. Ez a technológia az okostelefonok ugrásszerű terjedésével került előtérbe, mert egyszerre nyújt hatékony és olcsó megoldást, hogy minden látogatót megfelelően tudjunk kiszolgálni. A látogatók ma már sok esetben ugyanazt a honlapot több eszközről is megnézik, attól függően, hogy éppen mire van szükségük. (Hírek olvasása otthon tableten vagy pc-n, de a buszon már mobilon. Termékek kiválasztása otthon pc-n, de az üzlet címének megkeresése mobilon, ha már a közelben van.)

A fő problémák a nem reszponzív weboldalak megjelenítésével a mobiltelefonokon, hogy a tartalom egészen kis méretben látható és minden egyes sor elolvasásáért keményen kell küzdenie a felhasználónak. Az optimális megjelenítés viszont nem csak a betűméret helyes beállítását jelöli, hanem az alábbiakat is:

• Egyszerű navigáció

• Jól olvasható tartalom

• Görgethetőség csak fel és le

• Gyors betöltődés

Ezekre a problémákra két komoly megoldás született, lássuk őket!

Az okosmobilok terjedésével először az önálló mobil weboldal jelent meg, mint megoldás, ebben az esetben egy a mobilos megjelenésre optimalizált tartalmat készített a tulajdonos és azt helyezte el egy önálló honlap formájában pl.: m.honlap.hu vagy honlap.hu/m. Ez nem volt rossz elképzelés egy ideig még maga, a google is javasolta ezt a mobil megoldást, mint lehetséges jó utat. A reszponziv megoldással szemben viszont számos hátránya van a mobil weboldalnak (dupla adminisztráció, óriási kockázat a duplikált tartalomra, a google sem nézni mindig jó szemmel), ezek nem a felhasználó számára jelentkező hátrányok, hanem főleg a tulajdonost érintik.

A reszponzív weboldal ezzel szemben egy adminfelületet használ, azonos tartalmat nyújt a mobilos és hagymányos felhasználóknak, a google is kifejezetten ezt a megoldást javasolja, így abban is biztosak lehetünk, hogy a keresőben a lehető legjobb eredményeket így érhetjük el.

A reszponzív weboldal design gyakori elemei

A honlap tartalmi egységei rugalmasan vannak meghatározva, mindig az aktuális mérethez igazodnak. Ebben az esetben nem csak a szöveg méretére kell gondolni, hanem a menü átrendezésére is, hogy az egy ujjal is kezelhető legyen, ne lógjon ki oldalra a képernyőből, és a gombok mérete megfeleljen a ducibb ujjak elvárásainak is.

Másik gyakori elem a lap tetejére ugrást elvégző gomb. A tartalom általában több hasábban foglal helyet a monitorokon, de a mobil eszközökön ezek a tartalmak egymás alá kerülnek így nagyon hosszú oldalak jöhetnek létre. A felhasználó dolgát úgy könnyíthetjük meg, ha egy gombnyomással felugorhat a weboldal tetejére, ez a funkció egyébként hosszabb cikkek esetében már a hagyományos honlap esetében is hasznos.

Nagyon fontos hogy nem csak a szöveges tartalmat, hanem a képeket, videókat, beágyazott elemeket is képernyő szélességéhez kell igazítani. A legjobb megoldás, ha a képeket a maximális szélességhez méretezzük, de nagyon figyelünk az oldalarányok megtartására is.

A reszponzív honlap tervezése

A helyes megközelítés a mobile first, tehát az első „kinézet” amit el kell készíteni az a mobilos megjelenés. Ugyanis, a hagyományos megjelenés sok apró eleme -amely feldobja nagyképernyős designt – egyszerűen nem fér el és nem jut szerephez akkor, ha a weboldal mobilon jelenik meg. Ezért nem is érdemes teret hagyni neki, mert  akkor használhatatlan lesz a honlap mobilon. A google 2011 óta javasolja a fejlesztőknek a mobile first elvet, a reszponzív honlapok tervezésekor, mindenképp ajánlott ezt az elvet követni weblap tervezésekor.

A másik fontos szempont, hogy a reszponzív weboldalnak minden eszközön gyorsan kell betöltődnie, így az értelmetlen, esetenként felesleges grafikák túlságosan megnövelik a honlap betöltési idejét mobilon, így ezért is érdemes lemondani róluk.

A reszponzív design nagymértékben egyszerűsítette a honlapok megjelenítését és tovább erősítette a tartalom király (Content is king!) szemléletet. Előtérbe kerültek a színek, a minimalista stílusok, és sok esetben már egy űrlap kinézete, vagy a menü az, ami a honlap designját meghatárizza.

Hogyan alakítsunk át egy meglévő weboldalt reszponzívvá?

A régi honlapok esetében érdemes más paramétereket is figyelembe venni, hogy érdemes-e átalakítani a meglévő honlapot reszponzivvá, vagy egyszerűbb, jobb és olcsóbb egy új honlapot készíteni.

Van néhány kizáró tényező a weboldal átalakítás kapcsán:

• flash-ben készített weboldal

• táblázatos felépítésű weboldal

Ezekben az esetekben a régi honlap átalakítása nem elegendő, hanem új reszponzív weboldat kell készíteni. (Ha nem tudja, hogy az Ön weboldalak ilyen-e akkor vegye fel velem a kapcsolatot és segítek kideríteni!)

Ha ezen a két paraméteren túl tudunk lépni, akkor is felmerül még számos olyan dolog, amit meg kell vizsgálni. Ezek, bár nem kapcsolódnak szervesen a honlap arculatához, de ma már egy új honlapot ezek nélkül nem szabad elkészíteni. Lássuk melyek ezek a paraméterek:

• A régi honlap keresőbarát felépítésű-e?

• Van-e hozzá adminisztrációs felület, amelyek keresztül kezelni lehet az oldalt?

• Mennyi és milyen minőségű tartalom van a weboldalon, mekkora munkával jár a költöztetése?

• Szeretne-e a tulajdonos változtatni a weboldal kinézetén, volt-e azóta arculatváltás a cégnél?

• Kell-e változtatni az oldal struktúráján a mai igényeknek megfelelően?

Ezek összetett és bonyolult kérdések, de muszáj őket megválaszolnunk, hogy ne feleslegesen kidobott pénz legyen a honlap átalakítása, amely után1-2 évvel a teljes honlapot újra lecseréljük, mert a fenti dolgok hiányoztak belőle.

Mit tegyünk, ha úgy döntünk, hogy lecseréljük a régi honlapot egy új reszponzív oldalra?

Ez első és legfontosabb dolog, hogy fel kell mérni a régi weboldal erősségeit és gyengeségeit, a statisztikai rendszer és a Google Webmester Eszközök segítségével.

Miután látjuk, hogy hogyan teljesít a régi oldal, tudni fogjuk, hogy mely részeket kell megtartanunk és mely részeket kell törölnünk az új oldalról.

Írjuk össze azokat a funkciókat, amelyekkel bővíteni szeretnénk a weboldalunkat, így nem csak a reszponzív megjelenést, hanem hasznos keresőoptimalizálási és marketingeszközöket is beépíthetünk az oldalba.

Keressük meg az ideális megoldást, annak függvényében, hogy milyen elvárásaink vannak és mennyi pénzt és időt vagyunk hajlandóak a feladatra áldozni.

Az én javaslatom, egy olyan tartalomkezelő rendszer, amellyel könnyen készíthetünk reszponzív weboldalt és támogatottsága miatt, számos más problémára is megoldást nyújt. Jómagam a WordPress-t ajánlom, de más rendszerek is alkalmasak az ilyen reszponzív weboldalak elkészítésére.