Mi az a reszponzív webdesign?

A reszponzív webdesign ugyanazt a tartalmat különböző felbontású és méretű kijelzőkön más-más stílus alkalmazásával jeleníti meg. Ennek köszönhetően a weboldal tartalma minden típusú kijelzőn áttekinthető, az oldal gördülékenyen működik, a képek megfelelő méretűek és a betűméret is optimális, akár laptopról, akár telefonról, akár táblagépről internetezik a felhasználó. Létezik egy másik alternatíva is: az adott weboldal tulajdonosa készíttethet külön honlapot mobilra, valamint táblagépre optimalizálva, azonban ez sokkal időigényesebb megoldás. A reszponzív webdesignt csak nagyon régi honlapok esetében nem ajánlatos alkalmazni, a kivitelezésük ugyanis valószínűleg túl sok időbe és pénzbe kerülne.

2015-12-21

Mobil korszakban élünk

A legfrissebb kutatások szerint ma már több ember rendelkezik mobiltelefonnal, mint számítógéppel. Az átlagos felhasználásra teljesen megfelelnek a mai mobilok, sokan feleslegesnek tartják a laptop vagy PC használatát. Ez a viselkedési folyamat a Google Analytics statisztikákból is kiolvasható, hiszen ha megnézzük bármelyik weboldalról készült jelentést, kimagasló a mobil eszközről érkező látogatók száma. Természetesen ezt a keresőmotorok is tudják, és nagy előnyben részesítik azokat a weboldalakat, amelyek rendelkeznek mobil nézettel.  

A reszponzív webdesign előnyei

• Növeli a felhasználói élményt
• Előnyös a keresési listákban, jobb SEO eredmények
• Gyorsabb betöltési időt tesz lehetővé
• Univerzális használhatóság, bármilyen eszközről elérhető a weboldal
• Sikeresebb piaci jelenlét, csökken a visszafordulási arány
• Időtakarékos, egy tartalmat csak egy helyen kell frissíteni

Milyen egy reszponzív weboldal?

A reszponzív weboldalak könnyen olvashatóak és kezelhetőek, a lehető legkevesebb nagyítással és görgetéssel. Méretükben és elrendezésükben is alkalmazkodnak a látogatók által használt eszközökhöz, sőt ha az eszköz elforgatásra kerül, akkor átrendeződik a weboldal tartalma. A legjobb megoldás az, ha egy url-en van minden tartalom, és média lekérdezések segítségével alkalmazkodik a weboldal kinézete a mobil eszközökhöz. Ilyenkor a képek és a szövegek rugalmasan átméreteződnek. 

Melyek a leggyakoribb felbontások?

A rankings.hu felmérése szerint az alábbi 10 felbontás a leggyakoribb a magyarországi internetezők magyar webhelyeken történő látogatásai alapján: 

• 360x640
• 1366x768
• 1920x1080
• 1280x800
• 375x667
• 1440x900
• 1024x768
• 320x768
• 1600x900

Mire kell figyelni egy reszponzív webdesign tervezése közben?

Fontos, hogy a mobil weboldalak tervezésénél más szempontokat kell figyelembe venni, mint egy normál asztali nézet esetén. Sokan azt az elvet vallják, hogy elsőnek a mobilok kijelzőjére kell megtervezni a tartalmakat, majd innen haladni a nagyobb felbontások felé. Ezt az elvet ún. „mobile-first” megközelítésnek nevezzük. Érdemes elgondolkodni ezen, hiszen sok idő nyerhető ezzel a megoldással. Egy mobil design esetén át kell gondolni, mi az, ami kell, és mi az, ami nem szükséges, de mindezt a felhasználói élmény csökkentése nélkül. 

• Legfontosabb a képek optimalizálása. A képek könnyen méretezhetőek, de vajon az eszközökön keletkező méretarány mennyire használható? A képek megjelenítését mindig ellenőrizni kell a lehető legtöbb eszközön, sokszor előfordulhat, hogy az egyes felbontásokra külön-külön el kell készíteni egy képet, hogy az minden esetben a megfelelő színvonalat hozza.
• A navigáció mindig a lehető legegyszerűbb és könnyen megtalálható legyen. Érdemes keresőmezőket is elhelyezni, hiszen egy bonyolult menürendszert könnyebb helyettesíteni egy input mezővel. A felhasználónak nincs ideje keresgélni a weboldalon, ha feltűnő helyen talál egy keresőmezőt, inkább begépeli a keresett kifejezést.
• Mobil eszközökön nem javasolt a felugró ablakok használata, még akkor sem, ha az reszponzív. Nagyon bosszantó tud lenni, biztosan növeli a visszafordulási arányt.
• A reszponzív világban különösen igaz a mondás, hogy sokszor a kevesebb több. Kerülni kell a hosszú tartalmak megjelenítését. Mindig csak a legfontosabb tartalom jelenjen meg. Bevált módszer egy hosszabb blokk esetén a „Tovább” felirattal történő lezárás. Így ha valaki kiváncsi a tartalom többi részére, akkor lehetősége van tovább olvasni, akit viszont nem érdekel, azt nem érdemes untatni a részletekkel.
• Mobil nézeten nem szabad elrejteni tartalmakat a felhasználók elől. Ugyanazt a teljes értékű weboldalt kell nyújtani minden eszközön, csak a megvalósításokban szabad eltérni. Figyelni kell a felhasználók mobil felbontásokon tanúsított viselkedésére. Erre az egyik legjobb megoldás a Google Analytics.
• A weboldal sebességének minden eszközön a maximálisnak kell lennie. Javasolt a Google PageSpeed Insights online szoftver használata az internetes teljesítmény ellenőrzésére. A program asztali és mobil nézetre egyaránt kiszámolja a sebességet, majd javaslatokat ad azok gyorsabbá tételéhez. Érdemes megfogadni a tanácsokat, és alkalmazni a legtöbb bevált módszert a teljesítmény növelésére, illetve a jobb felhasználói élmény érdekében.
• Az egyes kijelzők nemcsak a méretükben különböznek, hanem a beviteli módokban is. Igaz, léteznek mobilokhoz, tabletekhez csatlakoztatható billentyűzetek, de a felhasználók többsége az ujját használja. Szem előtt kell tartani ezt a tényt, és törekedni kell a nagyobb gombok és margók használatára.