Honlapkészítés mobilra – mutatjuk mi a legfontosabb!

Sok honlapkészítőnek még mindig nem egyértelmű, mit jelent a mobilra optimalizált weboldal. A Google már 2017-ben utalgatott rá, hogy eljön az az idő, amikor a mobilos webhelyek kerülnek előtérbe az asztali verziókkal szemben, és 2018 májusában – a mobil-első indexeléssel (erről itt írtam részletesen) – ez az idő el is érkezett.

Ennek ellenére sokan továbbra is foggal-körömmel kapaszkodnak régi designstratégiájukhoz, sőt a honlapkészítők többsége még most is első körben asztali számítógépekre készítik el webhelyeiket, és csak azután igyekeznek „megoldani”, hogy mobilkészülékeken is működjenek valahogy. Ennek így nem sok értelme van, hiszen sokkal logikusabb lenne a kezdetektől fogva egy olyan webhelyet kialakítani, amely tökéletesen működik mobilkészülékeken, és asztali számítógépeken is (az asztali számítógépek és laptopok sokkal rugalmasabbak).

Ideje haladni a korral, és a jövőbe tekinteni – a mobilhasználók száma (ami jelenleg durván ötmilliárd fő körül mozog) csak növekedni fog, és aki lemarad, az kimarad. Cikkünkben arról lesz szó, hogy mi a baj a jelenleg népszerű „reszponzív design” megközelítéssel, és hogy miért a mobil-első az egyetlen életképes stratégia 2019-ben!

Mi a baj a reszponzív designnal? A honlapkészítők még mindig ezt használják… 

A honlapkészítők hozzászoktak, az úgynevezett reszponzív kialakításhoz, mely „nyúlik és zsugorodik” ahogy a képernyőfelbontás változik. A reszponzív design problémája – mint ahogy említettük – az, hogy a legtöbb fejlesztő alapból egy asztali webhelyet készít, és azt próbálja meg életképessé tenni mobilkészülékeken is. Ez csak felesleges idő és erőfeszítés a honlapkészítő számára, hiszen a reszponzívvá alakítás folyamata teljesen áthidalható lenne, ha az első pillanattól kezdve mobilra készülne a webhely (innen a megnevezés: mobile first, azaz mobil-első).

Mi a lényeges különbség a reszponzív és a mobil-első design között?

Habár a végeredmény „lényegében” hasonló, két teljesen más megközelítésről van szó.

Reszponzív design esetében CSS kódok gondoskodnak arról, hogy a webhely illeszkedjen ahhoz a készülékhez, amin éppen megjelenik. Ez bonyolultabb programozást igényel, és még mindig első sorban asztali böngészőket vesz alapul a design során, másodlagosként kezelve a mobilhasználók speciális igényeit.

A mobil-első felfogás ezzel szemben egy teljesen más designstratégia. Habár szintén egy reszponzív keretrendszert használ, az asztali felhasználók helyett a mobilhasználók igényeit helyezi előtérbe. Ilyenkor a webhely közvetlenül mobilkészülékekre épül ahelyett, hogy egy asztali webhelyet kellene beletuszkolni egy apró mobilképernyőbe.

Az asztali számítógépek és laptopok sokkal könnyebben és elegánsabban képesek kezelni a mobil-első webhelyeket, mint a mobileszközök az „asztali-első” webhelyeket (habár ilyen kifejezés nincs, ebben a kontextusban értjük, hogy miről van szó).

Ha szeretnéd, hogy segítsünk a honlapkészítő céged kiválasztásában, keress meg minket most! Kattints IDE!

Mi kell egy jó mobil-first webhelyhez? Ezt kérd a honlapkészítő cégtől!

Mobil-első webhelyet alkotni manapság már nem nehéz, hiszen rengeteg eszköz és tudástár áll a rendelkezésedre és temérdek tehetséges szabadúszó is van az interneten, akik már ebben a generációban tanulták ki a szakmájukat.

De vajon a te honlapkészítőd ilyen? Nem tudom, ezért inkább megpróbálok segíteni neked abban. hogy a honlapkészítés folyamán miket kell figyelembe venned, mit kell kérned a webdesigner cégtől! 

1. Használj kevesebb tartalmat

Habár évekig mindenhonnan azt hallhattad, hogy a tartalom a király, a mobil-első design csavar egyet ezen az állításon…

Tény, hogy a hosszabb tartalmak jobban konvertálnak, de ne feledd, hogy a mobileszközök nem a legkényelmesebb, ha hosszú szövegek olvasgatásáról van szó. A mobilhasználók rövid, egyszerű, tömör válaszokra kíváncsiak, ezt kell tehát megadnod nekik.

Ha nem tudod megkerülni a hosszabb szövegeket (ez a cikk sem férne el néhány mondatban), akkor törekedj legalább arra, hogy oszd fel tartalmadat rövidebb, emészthetőbb bekezdésekre.

2. Tervezz egyszerűen

A minimális design nagyon népszerűvé vált az elmúlt években, ami nem meglepő. Korábban nagyon népszerűek voltak a minél látványosabb, effektekkel telepakolt webhelyek, de ezekre is hamar ráuntunk – a szimpla kialakítás letisztultabb, olvashatóbbá teszi a fő tartalmakat, és egyszerűen kifinomultabb, elegánsabb hatást kelt.

Ha nem vagy biztos benne, hogy egy designelemnek van-e keresnivalója webhelyeden, akkor tedd fel magadnak a kérdést: biztos szükséged van rá? Vagy: lehet egyszerűbben is meg lehetne oldani? Például jó eséllyel szükséged van egy űrlapra, amivel bekéred a látogató információit, de nem lenne elég csak egy név és egy telefonszám 10 különböző kitöltendő mező helyett?

Webhelyedet többféleképpen is egyszerűbbé teheted, íme néhány további tipp ehhez:

• Mobilon egyszerre csak egy, legfeljebb két oszlopot használj, amiben elrendezed elemeidet.
• Biztosíts keresési lehetőséget a felhasználóknak.
• Használj egyszerű, jól olvasható betűkészleteket.
• Használj letisztult éleket elemeid körül (ahol indokolt).
• Használj nagy térközöket a szellősség és átláthatóság érdekében, de ne vidd túlzásba, hogy ne kelljen túl sokat görgetniük a felhasználóknak.
• Igyekezz minél kevesebb aloldalra osztani webhelyedet.

3. Mobil-első felhívások

Egy lelkes látogató érkezik reszponzív webhelyedre, tetszik neki, amit lát, és boldogan rákoppint a CTA gombra landing oldaladon. A móka azonban itt véget is ér, ugyanis a CTA után egy olyan leadfogó űrlap kerül elé, ami egyáltalán nem mobilbarát kialakítású, és lehetetlen mobilról kitölteni.

Webhelyed összes oldalának mobil-első megközelítéssel kell készülnie, különben a felvezetett felhasználói élmény hamar romba dőlhet. Győződj meg róla, hogy webhelyeden többféle eszközön is kényelmesen lehet-e konvertálni.

Ha már itt tartunk, valójában az egész konverziós tölcséredet mobil-elsővé kell alakítanod, és kihasználni a mobiltechnológia által nyújtott lehetőségeket (rezgés gombnyomásra, teljes mobilképernyős böngészés, digitális aláírásgyűjtés, stb.)

4. Az egyszerű kommunikáció alapfeltétel

A mobileszközök drasztikusan megváltoztatták azt, ahogy az emberek egymással, és a márkákkal kommunikálnak a hétköznapok során. Annyira hozzászoktunk a szöveges üzenetek küldözgetéséhez, hogy bizonyos kutatások szerint az emberek egyre jobban tartanak a mobilhívásoktól.

De térjünk vissza a tárgyra. A mobilok gyorsabbá, kényelmesebbé tették a hétköznapi kommunikációt – az emberek válaszokat akarnak kérdéseikre, lehetőleg most, azonnal, és ha lehet, akkor nem telefonon, hanem szöveges üzenetek formájában szeretnék azokat.

Fontos, hogy kommunikációs lehetőségeidet kibővítsd, hogy megfelelj a mai modern ügyfelek igényeinek. Ha az emberek nem tudnak kapcsolatba lépni márkáddal az általuk preferált kommunikációs csatornákon, akkor sokan fel is adják majd a próbálkozást.

Ebben különféle szoftverek segíthetnek. Érdemes például valamilyen helpdesk-kezelőt alkalmazni, amely egy felületen jeleníti meg minden ügyfélkommunikációdat, megkönnyítve ezzel a válaszadást és a problémakezelést.

Egy másik, egyre népszerűbb lehetőség chatbotot indítani webhelyeden, amivel sokat javíthatsz az felhasználói élményen, ráadásul 24/7 ügyfélszolgálatot biztosíthatsz az év 365 napján. A chatbotok egyik nagy előnye, hogy nem kell miattuk teljesen átalakítanod webhelyedet, és nem csak mobilon, hanem asztali böngészőkben is működnek.

5. Grafikák a mobil-első designban

A mobilra tervezett webhelyeknél sem szabad elhanyagolni a grafikus design kérdését. A Design Council tanulmányából  kiderül, hogy azok a cégek, amelyek több erőt fektetnek a grafikus designba, jobban teljesítenek, mint azok, amelyek nem igazán foglalkoznak ezzel a területtel. Hogy mennyivel jobban? 200%-kal!

Egy mutatós webhely ezen felül sokkal megbízhatóbb is, hiszen professzionális hangulatot áraszt magából.

Szóval mire van szüksége egy modern mobil-első webhelynek grafikus design terén?

• Fontos, hogy valódi fényképeket használj cégedről, termékeidről, stb.
• Használj élénk, világos színeket, illetve ízlés szerint színátmeneteket és kéttónusú színvilágot.
• Képek híján saját, kézzel (vagy digitálisan) rajzolt illusztrációkat érdemes hasnzálni.
• Az igazán minimális design alapvető elemei a geometriai alakzatok és a mutatós, de nem figyelemelterelő minták.
• Ügyelj rá, hogy a designban használt betűkészletek passzoljanak egymáshoz, és kiegészítsék a designt, ne üssenek el tőle.

 
6. 2019: A szélsebes webhelyek éve

2018 nyara óta tudjuk, hogy a Google mobileszközökön is rangsorolási szempontként kezeli a webhelysebességet, de még ha nem is így lenne, szívesen kockáztatnád meg, hogy emiatt veszíts el lehetséges ügyfeleket, akik egyébként imádnák kínálatodat (ha egyáltalán betöltene nekik webhelyed)?

Az emberek 40%-a gondolkodás nélkül sarkon fordul, ha egy webhely nem töltődik be 3 másodperc alatt, és 10-ből 8 vásárló nem szívesen vásárol egy rossz teljesítményű webhelyről.

Szóval mit tehetsz annak érdekében, hogy mobil-első webhelyeid megfeleljenek a Google és a felhasználók elvárásainak?

• Először is ellenőrizd webhelyedet a Google Test My Site (kattint IDE) és PageSpeed Insights (ezt ITT éred el) eszközével. Ezek az eszközök értékelik webhelyed teljesítményét, és javítási javaslatokat is tesznek, amikkel gyorsabbá teheted azt.
• Tömörítsd képeidet, hogy kevesebb adatforgalmat emésszenek fel az oldalak betöltésekor, és gyorsabban is jelenjenek meg.
• Használj „lusta betöltést”, ami lehetővé teszi, hogy az oldal különböző elemei ne egyszerre, hanem egymás után jelenjenek meg. Így a felhasználó már láthatja az oldal tetejét (vagy legalább legfontosabb elemeit), mielőtt az alja teljesen betöltődne.
• Használj olyan tartalomelosztó hálózatot (CDN), ami gyorsabb kiszolgálást biztosít egy gyorsítótár segítségével.
• Használj SSL tanúsítványt (erről itt írtam), ami nem csak gyorsabbá, de biztonságosabbá is teszi webhelyedet a felhasználók számára (ráadásul rangsorolási szempont a Google szemében).

7. Tesztelj mindent!

A mobil-első gondolkodásmód rengeteg változással jár, és minden apró változás hatását nyomon kell követni, hogy kiderítsd mi működik, és mi nem. Még a legprecízebben kialakított webhelyek teljesítményét is folyamatosan mérni kell, méghozzá több eszközön is (nem csak mobilokon).

Fontos azt is észben tartani, hogy habár a felhasználók többsége Android, vagy iOS rendszert futtató készülékeket használ, összesen legalább 10 mobilos operációs rendszer van forgalomban (több verzióval), és évente több tucatnyi új telefon jelenik meg.

Habár egy valamirevaló modern telefonnak elvileg nem kellene, hogy problémát okozzon egy gondosan elkészített mobil-első webhely megjelenítése, érdemes rendszeresen tesztelni online tartalmaidat minden népszerűbb eszközön.

Persze nem tesztelheted a világ összes okostelefonját, de nem is muszáj – a Google Analytics eszközjelentésében (Közönség > Mobil) megtekintheted, hogy milyen eszközökről érik el a látogatók webhelyedet. Erről több információt ebben az útmutatóban (https://www.matebalazs.hu/google-analytics-utmutato-peldakkal.html), a 6. pontban találsz!