Mit jelent a reszponzív weboldal?
Bele sem gondolunk már, annyira a mindennapjaink része, hogy a kedvenc social media vagy hír oldalunk ugyanolyan jól olvasható reggel a metrón utazva az okostelefonunkon, mint az asztali számítógépünkön. Vagy egy weboldalon könnyen megtalálhatók a gombok tableten és laptopon is.
A technika fejlődése és az egyre változatosabb kijelzőméretű okoseszközök megjelenése hívta életre az igényt arra, hogy minden eszközünkön kényelmesen tudjunk böngészni.
A reszponzív weboldal szakmai és száraz Wikipediás megfogalmazás szerint ‘egy olyan megközelítéssel tervezett weboldal, amelynek a célja az, hogy optimális megjelenést biztosítson – könnyű olvashatóság, egyszerű navigáció a lehető legkevesebb átméretezéssel és görgetéssel – a legkülönfélébb eszközökön.’ Vagyis reszponzív designnak nevezzük azt az oldalt, amely minden képernyőn jól jelenik meg.
A gyakorlatban ez azt jelenti, hogy a webdesign a weboldal tartalmát úgy tördeli, hogy a felhasználónak ne kelljen ránagyítania az egyes elemekre, ne csússzon szét az egész oldal és összességében rugalmasan alkalmazkodjon az adott kijelzőmérethez.
Miért szükséges a reszponzív weboldal?
- a reszponzív oldalak esetében csökken azoknak a látogatóknak a száma, akik az oldalra érkezve azonnal el is hagyják azt. Ezt nevezzük visszapattanási aránynak, tehát az a jelenség, hogy az olvashatatlan, rugalmatlan oldalról azonnal távoznak az emberek. A magas visszapattanási arány egyébként negatív hatással lehet a Google Adwords hirdetési költségekre is.
- -egyszerűen szükséges a reszponzivitás, mert évről évre rohamosan növekszik mobileszközöket használók száma. A mobilinternettel rendelkező látogatók többsége pedig egyszerűen elvárja, alapnak tekinti, hogy a mobil eszközén megnyitott weboldal kifogástalanul jelenjen meg és teljes mértékben felhasználóbarát legyen.
- a Google bünteti a nem reszponzív weboldalakat. 2015 április 21.-én a Google egy új keresési algoritmust vezetett be, mellyel már bünteti a nem reszponzív megjelenésű weboldalakat (nevezik ‘mobilgeddonnak is’). Ez a gyakorlatban úgy jelenik meg, hogy azoknál a weboldalaknál, ahol nem fordítottak gondot a mobil eszközökre optimalizált megjelenésre, hátrébb kerültek a Google találati listáján
Alapszabályok egy jó reszponzív weboldalhoz
- Egyszerű navigáció
Mobilbarát nézetben nem rendezhetjük úgy a weboldalunkat, mint egy asztali számítógép esetében, egyszerűen azért mert nincs rá hely. Alkalmazzunk egyszerűsített menüt, amit három vízszintes vonalka jelöl a képernyő jobb felső sarkában. (Hamburger menü) Ez a legördülő menü segít választani a további tartalmak közül.
- Egy hasábos elrendezés
Mobilon nincs lehetőség a jobbra-balra keresgélni, ehelyett alkalmazzuk a függőleges görgetést. A tartalmakat egymás alá, egy hasábos elrendezésbe tanácsos rendezni. Az ilyen, rácsos elrendezés alkalmas arra, hogy kis felületen is viszonylag sok és sokféle tartalmat jelenítsünk meg ún. blokkos formában.
- Könnyen koppintható és ‘Call to action’ gombok
Érdemes a linkeket és a gombokat úgy méretezni, hogy azok könnyen eltalálhatók legyenek bármekkora is a látogató ujjmérete. Elég bosszantó ha a ‘megrendelem’ gombot sokadjára sem sikerül eltalálni, helyette valami másik menüpontra ugrik az oldal. Hagyományos honlapokon a ‘call to action’ azaz cselekvésre buzdító gombok (például: kérjen ajánlatot, rendelje meg) általában kapcsolatfelvételi vagy ajánlatkérő űrlapra visznek. Azonban mobilon eléggé hosszadalmas és kényelmetlen egy apróbetűs űrlapot végigpötyögni. Ezért mobilos nézet esetén érdemesebb a telefonos kapcsolatfelvétel lehetőségét kiemelni, ahol azonnal indítja is a hívást a felhasználó.
- Vissza a lap tetejére
Illendő nem ínhüvelygyulladásra ítélni a látogatót a folyamatos lefelé-felfelé görgetéssel, ezért legyen folyamatosan ott a ‘három vonalka’ ami a menüt jelzi, vagy adjunk lehetőséget, hogy egy koppintással az oldal tetejére jusson vissza az olvasó.
Ha nem vagyunk biztosak benne, hogy weboldalunk reszponzív-e, akkor azt könnyen leellenőrizhetjük erre specializálódott online felületeken.
Ilyen például a Google saját Mobil barát tesztje, ahol weboldalunk címét beírva megjelenik a weboldalunk képernyőképe, vagyis hogy hogyan is mutat a weboldalunk egy mobilon.
Számunka is kiemelt jelentőségű a reszponzívítás, így a Ryck Posternél mi is ilyen weboldalakat készítünk!
Ha tetszett ez a cikk, kérlek oszd meg másokkal is!
