Mi kell a mobil-első designhoz 2022-ben?

Főoldal > A mobil-első webdesign elvei 2022-ben

Ha tetszett ez a cikk, oszd meg ismerőseiddel, kattints ide:

A mobil-első webdesign elvei 2022-ben
2022/02/25
MCs

A Google 6 évvel ezelőtt jelentette be, hogy az internetezők több, mint fele okostelefonokról éri el a világhálót. Ez az arány manapság már jóval magasabb a mobilhasználók javára (2020-ban kétharmadnál járt), és az évek során a Google is fontos változtatásokat vezetett be, hogy élvezetesebbé tegye az internetezés élményét felhasználói számára. Ilyen intézkedések voltak például a mobil-első indexelésre való átállás, illetve az alapvető webes vitals mutatók bevezetése.

Ha mindez nem lenne elég, az utóbbi év során az 5G is komolyabban terjedni kezdett, és megjelentek a kompatibilis mobileszközök is. Az új technológia sokkal komplexebb, nagyobb méretű mobilos webhelyek elkészítését teszi lehetővé a designerek és webprogramozók számára.

2022-ben minden korábbinál fontosabb, hogy egy webhely tökéletesen megfeleljen nem csupán a Google, hanem a modern internetezők elvárásainak is, akiknek túlnyomó többsége már szinte csak okostelefonokról kapcsolódik a világhálóra. Ha szeretnéd, hogy B2B webhelyed megfeleljen ezeknek az elvárásoknak, akkor íme néhány hasznos tanács ehhez!

 

1. Ellenőrizd, hogy honnan érkezik webhelyed forgalma

Mielőtt elkezdenéd mobilra optimalizálni webhelyedet, nézz utána, hogy milyen eszközökről böngészik azt a felhasználók. Ebben például a Google Analytics segíthet, ami remélhetőleg már rég óta aktív webhelyeden. Habár a mobileszközök nagyon népszerűek 2022-ben, látni fogod, hogy asztali számítógépekről és laptopokról is érkezik azért még forgalom webhelyedre, így ezeket a felhasználókat is figyelembe kell venned.

 

2. Győződj meg róla, hogy webhelyed reszponzív designnal készüljön el

A reszponzív webhelyek automatikusan igazodnak ahhoz a képernyőmérethez, amin megjelenítik őket. Egy megfelelően elkészített reszponzív webhely hibátlanul jelenik meg asztali számítógépeken és mobiltelefonokon is. Ez manapság alapvető elvárás a Google és a felhasználók részéről is! Ez a feladat minden bizonnyal webdesigneredre hárul majd.

 

3. Tedd mobilbaráttá webhelyedet

A mobilbarát jelleg többről szól, mint a reszponzív kialakítás. Nem elég, ha egy webhely helyesen jelenik meg minden képernyőméreten – fontos, hogy könnyedén használható legyen egérrel és ujjas koppintásokkal is. Íme a legfontosabb szempontok:

  • Győződj meg róla, hogy a gombok elég nagyok, hogy ujjal is könnyedén rájuk lehessen bökni a kisebb kijelzőkön is (legyenek legalább 48 x 48 képpont méretűek).
  • A felugró ablakok ne takarják el a képernyő nagy részét.
  • A legfontosabb elemek legyenek könnyedén elérhetők egy hüvelykujjal is, tehát legyen könnyű egy kézzel használni a webhelyet.
  • A görgetést ne szakítsák meg az interaktív elemek (például ha egy nagyméretű térkép jelenik meg, akkor lehessen attól függetlenül is görgetni az oldal tartalmát).

 

4. Először mindig mobilra tervezz

Mikor új webhelyet tervezel, vagy csak egy új oldalt szeretnél hozzáadni meglévő webhelyedhez, először mindig mobileszközökre készítsd el azt. Ezt utána könnyedén méretezheted át asztali számítógépekre is, illetve hozzáadhatsz olyan funkciókat, amiknek nincs értelme egy mobileszközön.

 

5. Kínálj keresést a webhelyen

A webhelyen történő keresés egy fontos navigációs funkció, ami nagyban hozzájárul a pozitív felhasználói élményhez. Tedd kereshetővé a webhelyeden lévő tartalmakat, beleértve a termékeket, a szolgáltatásokat és a cikkeket is.

 

6. Optimalizáld webhelyed sebességét

A webhelyek sebessége (különösen mobileszközökön) már évek óta rangsorolási szempont a Google szemében, ami azt jelenti, hogy a gyorsabb webhelyek nagyobb eséllyel jelennek meg a legelső keresőtalálatok között.

A Google manapság már az alapvető webes vitals-mutatókat is figyelembe veszi a webhelyek rangsorolásakor, amelyek kifejezetten a felhasználói élményt befolyásoló szempontok. Ezeket a Google Search Console felületén ellenőrizheted, illetve használhatod a Google PageSpeed Insights eszközt is egy-egy oldal ellenőrzésére webhelyeden.

Íme néhány jó tanács a mutatók optimalizálására:

  • Ne használj nagy fájlméretű elemeket (például videós háttereket) mobileszközökön.
  • Helyezd a nagyobb méretű képeket a hajtás alá, hogy a weboldal elsődleges megjelenítése gyorsabb legyen.
  • Ügyelj rá, hogy az oldalon megjelenő elemek ne tologassák el egymást, miközben betöltődnek.
  • Ne a JavaScripttel állítsd be az oldal elrendezését, mert ezeket a szkripteket sokáig tarthat betölteni, és ez rontja az alapvető webes vitals-mutatókat.
  • A betűkészleteket helyileg töltsd be
  • Minden szkriptet csak akkor futtass, ha van is értelmük.

 

7. Kínálj mobilra optimalizált tartalmakat

A hosszú cikkek, letölthető PDF dokumentumok és más méretesebb tartalmak marketingstratégiád fontos eszközei lehetnek, azonban ezeket sokkal kényelmetlenebb megtekinteni egy kisméretű mobileszközről. Fontos tehát, hogy e tartalmak mellett olyan alternatívákat is kínálj, amiket a mobilhasználók is könnyedén megtekinthetnek és hasznosíthatnak.

Tartalomnaptárad megtervezése során ne felejts el rendszeresen előjegyezni ilyen mobilra optimalizált tartalmakat is, úgymint:

  • Felsorolásokat tartalmazó és más, könnyedén átfutható blogbejegyzések.
  • Rövid és hosszabb videók.
  • Olvashatóságra optimalizált e-könyvek
  • podcastek
  • mobilra optimalizált diabemutatók
  • mobilon is könnyedén átlátható infografikák

 

Kép forrása: Pixabay/Foundry

Keresőoptimalizálás, SEO Online marketing



Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales faucibus erat. Vestibulum imperdiet ex varius convallis pulvinar. Nullam sed augue ullamcorper, convallis quam id, dignissim enim. Vestibulum hendrerit tortor erat, vel maximus velit placerat eu. Fusce aliquam libero dolor, nec scelerisque turpis bibendum eu. Suspendisse hendrerit lectus ac magna tincidunt mollis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fusce sodales faucibus erat. Vestibulum imperdiet ex varius convallis pulvinar. Nullam sed augue ullamcorper, convallis quam id, dignissim enim. Vestibulum hendrerit tortor erat, vel maximus velit placerat eu. Fusce aliquam libero dolor, nec scelerisque turpis bibendum eu. Suspendisse hendrerit lectus ac magna tincidunt mollis. 

Donec egestas pharetra lacus

Fusce faucibus ornare molestie. In viverra purus eget odio sollicitudin ullamcorper. Ut aliquam ante dolor, nec ornare nunc scelerisque ac. Aliquam eget tortor pharetra, tempor libero nec, aliquet orci. Donec egestas pharetra lacus, vel venenatis est porttitor ac. Vestibulum dui ante, lacinia quis eros eu, iaculis ultrices erat. Sed faucibus in nibh eu consectetur. Sed eu tempor magna. In hac habitasse platea dictumst. 

Aenean mollis scelerisque justo nec congue.

Phasellus ultrices feugiat eros, ac hendrerit felis finibus ac. Nam consectetur magna eu eros pellentesque, at vehicula tortor malesuada. Quisque porta lacinia commodo. Morbi mollis egestas est, sed porttitor nisl tempor placerat. Aenean mollis scelerisque justo nec congue.