Ez ma már kulcsfontosságú, ezért összeszedtünk 5 szabályt, amit akár működő weblap esetén is ellenőrizhetsz, de ha épp weboldal készítés előtt állsz, kötelező szem előtt tartanod. Ugyanez igaz akkor is, ha webáruház létrehozását fontolgatod.
#1. A méret a lényeg!
Talán eszedben sem jut, de az ultramodern weboldalakat a maximális reszponzivitás érdekében már 5 különböző szélességűre tervezik.
· 1920px (asztali monitor)
· 922px (laptop monitor)
· 768px (tablet fekvő)
· 576px (tablet álló)
· 320px (mobil)
A hosszúság nem számít, hiszen lefelé bármeddig görgethetünk, az nem vezet a weblap széteséséhez, bár nem árt megjegyezni, hogy a „végtelenbe futó” weboldaltól feltétlenül tartózkodj!
#2. Fókuszban a szem és az ujjak
Amikor egy felhasználó mobilon vagy tableten nézi a weboldaladat, értelemszerűen kisebb lesz a képernyőmérete, mintha monitoron böngészne rajta. Akár a pénztárcádat is vékonyabbá teheti, vagyis profittól esel el, ha nem figyelsz rá, hogy a látogató minél könnyebben találja meg azt, amit keres.
· A menü és a weboldalstruktúra minél egyszerűbb legyen mobilos nézetben.
· A gombok, beviteli mezők elég szélesek legyenek, hogy rá tudjunk bökni, ezért alaposan különüljenek el egymástól.
· A képek megfelelő méretűek legyenek.
· A betűméret legyen optimális.
· Legyen felkészítve a reszponzív weboldal arra, hogy esetleg elforgatjuk a mobilunkat.
#3. Egy adott aloldal egy adott célra összpontosítson
Legyen az hírlevél feliratkozás, ajánlatkérés, kapcsolatfelvétel vagy vásárlás, a reszponzív weboldal minden esetben egy célra fókuszáljon!
Szabadulj meg a felesleges elemektől! Még bizonyos popupok is annak számíthatnak, főleg, ha az egész képernyőt elfoglalják, és a látogató másodpercekig keresi, hol tudná őket bezárni. Ez eltántoríthatja attól, hogy tovább böngésszen a weboldaladon.
Ettől még ne száműzd az összes felugró ablakot, ugyanis egy exit popup ragyogóan szolgálhatja a marketing céljaidat, és a látogatónak sem rontja a felhasználói élményt.
Másik fontos elem a CTA (Call to Action) gomb, amelyre nagyon oda kell figyelni, hogy megfelelően különüljön el a tartalomtól, és arányosan nézzen ki az oldal egészét tekintve. Se túlságosan nagy, se kattinthatatlanul kicsi ne legyen. Egyértelmű üzenetet közvetítsen a felhasználónak, mit kell tennie, pl. Kattints, Vásárlás, Jelentkezés stb.
#4. Töröld a felesleges elemeket mobilos nézetben!
Ami lehet jól mutat monitoron, az zavaró mobilképernyőn. Ilyen lehet akár egy animáció, slider vagy akár egy teljes kijelzőt betöltő fotó is a főoldalon, vagy a már fent említett felugró ablak. A másik nyomós érv a plusz elemek mellőzésére, hogy csak lassítják a reszponzív weboldalt, ami ronthatja a pozíciódat a Google keresőben.
#5. Rövidítsd a szövegeket!
Egy remek weboldal fejlesztő megoldja, hogy más szöveg látszódjék a látogatódnak asztali gépen (vagy laptopon), és más mobilon. Nyilván nem arról van szó, hogy olyan részleteket hagyj ki a szövegből, amelyekkel lábon lövöd a konverziódat, de tekintettel kell lenned a felhasználói igényekre.
Mobilhasználat esetén az emberek hajlamosak a sietségre, és rendszerint még felületesebben olvasnak, mint általában. Ezért érdemes minél több figyelemfelkeltő címsorral operálnod, és ügyelned a megfelelő tagolásra is.
Mi az a reszponzív weboldal, és mik az előnyei?
Olyan weboldal, ami minden képernyőmérethez rugalmasan alkalmazkodik. Minden eszközön jól használható, nem kell ránagyítani mobilon, és a gombokat is könnyen meg lehet nyomni.
A legtöbb ember, ha mobilról nem reszponzív weboldalt nyit meg, azonnal bezárja, mert kőkorszaki hatást kelt, és kínszenvedés a kezelése.
Mik a reszponzív weboldal előnyei?
· Gyorsabbá válik a weboldal, mert nem irányítja át a felhasználót mobilon egy külön telefonra optimalizált honlapra.
· A Google algoritmusa is jobban szereti, ezért előrébb hozza a keresőben.
· Az új eszközméretekre előre fel van készítve, így nem szükséges minden új méretű mobil vagy tablet forgalomba kerülésekor szerkeszteni, amivel időt és pénzt is spórolhatsz.
Segítsünk neked is profi reszponzív weboldalt készíteni? Kattints ide!
