A legkézenfekvőbb ok, amiért érdemes aggódni a mobilbarát jelleg miatt, az az, hogy a Google keresési forgalmának több mint fele mobileszközökön lévő felhasználóktól származik. Ez a forgalom potenciálisan az Ön webhelyére fog érkezni. A mobileszközökön nagyszerű élményt nyújtani kihívást jelenthet, mivel az asztali számítógépekhez és laptopokhoz képest korlátozott a fizikai képernyő területe. De képzelje, mi a helyzet? Az egyszerű mobil weboldaltervek gyakran nagyobb képernyőkön is jól teljesítenek. Az egyszerűbb oldalak segíthetnek a vásárlóknak, hogy kevesebb zavaró tényezővel a vásárlási útjukra koncentrálhassanak. A mobilbarátság egyértelműen fontos a felhasználók számára, és a Google a felhasználókat az igényeiknek leginkább megfelelő oldalakra szeretné irányítani. Ezért a Google számos cikket tett közzé arról, hogyan lehet a legjobban mobilbarát webhelyeket létrehozni. Nézze meg a Google Search Central és különösen a Web.dev oldalakat, ahol nagyszerű, mélyreható cikkeket talál. Vágjunk tehát bele, kezdve néhány technikai tippel, majd térjünk át a felhasználói élményre vonatkozó tippekre.
Tipp 1
Egyes webhelyek inkább külön domainnevet használnak a mobilforgalom számára, hogy egyszerűsített felhasználói élményt nyújthassanak a mobilfelhasználóknak. Ha egy felhasználó a rossz domainnévre érkezik, akkor átirányítják a másik webhelyre. Az első tipp ilyen esetekben az, hogy tartsa szinkronban a két webhelyet, nincs semmi eleve rossz a két webhely fenntartásában, de ez a tartalom, a funkcionalitás vagy a teljesítmény elmaradását eredményezheti a két webhely egyikén, a tartalmi és funkcionalitásbeli különbségek különösen zavaróak lehetnek a vásárlók számára, amikor különböző eszközökről látogatnak el. Ha úgy dönt, hogy két webhelyet tart fenn, hasznosnak találhat olyan automatizált eszközöket, mint például a Puppeteer, amelyekkel ellenőrizheti, hogy a két webhely hasonlóan viselkedik-e. A Puppeteer API-t biztosít a Chrome fej nélküli példányának vezérléséhez, így kiválóan alkalmas a tesztek automatizálására az építési folyamat részeként. Fegyelemmel szinkronban tarthatja a két webhelyet. Csak győződjön meg róla, hogy mindig elegendő költségvetést különít el a két oldal munkájának fedezésére. Jobb megoldás lehet azonban a két webhely összevonása reszponzív webdesign segítségével. A reszponzív webdesign olyan technikákat használ, mint a CSS médiakérdések, hogy a megjelenítési terület szélessége alapján változtassa meg az oldal rétegét. Ez megkönnyítheti a konzisztens élmény biztosítását minden eszközön, és potenciálisan csökkentheti a teljes fejlesztési költségeket.
Tipp 2
A második tipp, hogy a mobiloldalt úgy tervezze meg, hogy a Google indexelje. Mivel a legtöbb felhasználó a kereséseket mobileszközök körül adja ki, a Google a HTTP fejlécekben szereplő mobileszköz-felhasználói ügynök segítségével kúszik át az indexelendő tartalmat kereső webhelyeken. Ha még nem ismeri a webhelyek keresőmotoros feltérképezését és indexelését, tekintse meg a Google Search Central oldalon a keresés működése. A mobiloldalak indexelése során felmerülő problémákra példák: a mobiloldalak az oldal méretének csökkentése érdekében elhagyhatják az indexelés szempontjából fontos információkat az oldalakról, ez ugyan csökkentheti a letöltendő bájtok számát, javítva a betöltési teljesítményt, de kis mértékben azt eredményezheti, hogy az oldalai nem jelennek meg olyan gyakran a keresési eredményekben, ami nem jó mellékhatás. Az olyan felhasználói élmények, mint a végtelen görgetés és a load more gombok gyakran népszerűek a mobileszközökön, ezek azonban lánctalálási problémákat okozhatnak, mivel a teljes oldal tartalma alapértelmezés szerint nem töltődik be. Ez ahhoz vezethet, hogy a Google nem találja meg az összes indexelendő tartalmat. A mobil webhelyének Google általi indexelésével kapcsolatos problémák észleléséhez tekintse meg a Google Search Console-t. A Google Search Console gazdag betekintést nyújt abba, hogy a Google mit indexelt az Ön webhelyén, beleértve a talált problémákról szóló jelentéseket is, további információkért tekintse meg Daniel csodálatos videósorozatát a Google Search Console maximális kihasználásáról. Ahhoz, hogy a Google könnyebben megtalálja az összes oldalát, fontolja meg egy sitemap fájl használatát, vagy adjon a Google Merchant Center számára egy feedet az összes termékoldaláról. Ezek alternatív útvonalakat biztosítanak a Google számára a webhelye oldalainak felfedezéséhez, ahelyett, hogy csak a lánctalpas keresésre hagyatkozna.
Tipp 3
A harmadik tipp az, hogy optimalizálja webhelyét a webhely sebességére. A webhely sebessége általában nagyobb aggodalomra ad okot a mobileszközök esetében, mivel ezek gyakran alacsonyabb teljesítményűek, és a hálózat teljesítménye is gyengébb.
A korábbi epizódokban már foglalkoztam a képek és a Javascript teljesítményének javításával. A leírásban egy linket is mellékeltem, hogy további információkért megnézhesse ezeket az epizódokat, de más problémák is előfordulhatnak, például webes betűtípusok használata esetén. Ha egy webes betűtípus letöltése eltart egy ideig, előfordulhat, hogy a tartalom először egy alapértelmezett betűtípussal jelenik meg, amelyet aztán a webes betűtípusra cserélnek, amikor az elérhető. A lemez a tartalom elrendezésének eltolódását okozhatja, mivel az oldal a betűtípus változása miatt újra átfut. Ami még rosszabb lehet, hogy a renderelés teljesen leállhat, amíg a betűtípus be nem töltődik. A Page speed insights hasznos eszköz a weboldalak elemzéséhez. Számos teljesítményhez kapcsolódó jelentést biztosít. Az Oldalsebesség insights különösen hasznos, mivel tartalmazza mind a webhelyén végzett mesterséges tesztekből származó laboratóriumi adatokat, mind pedig a webhelyen szerzett valós felhasználói tapasztalatokon alapuló érzésadatokat. A Paid Speed Insights jelentés által azonosított problémák többsége tanácsokat tartalmaz a problémák megoldására vonatkozóan. A webes betűtípusok esetében vizsgálja felül webhelyét, hogy csökkentheti-e a használt betűtípusok számát. Próbáljon meg a legfontosabb betűtípusokra az oldal elején hivatkozni, hogy azok azonnal betöltődjenek. Katy web.dev cikke a webes betűtípusokról részletesebb tanácsokat tartalmaz. Az utolsó tanács a webhely sebességével kapcsolatban: ha nem tudod gyorsan elkészíteni, tedd értelmessé. Ha például néhány binning és rendelés befejezése eltart egy ideig, és ez ellen nem tehetsz semmit, mutass a vásárlónak különleges ajánlatokat vagy közelgő eseményeket, amíg várakozik.
Tipp 4
A 4. számú tipp kevésbé technikai kérdés, inkább a használhatóság szempontjait veszi figyelembe. Arról szól, hogy webhelye oldalai olvashatóak legyenek a kisebb mobilkészülékek képernyőin. Ez magában foglalja annak biztosítását, hogy a tartalom ne lógjon ki a képernyő oldaláról, hogy a szöveg elég nagy legyen ahhoz, hogy kényelmesen olvasható legyen, hogy a felhasználók rá tudjanak nagyítani a tartalomra, amelyet közelebbről meg akarnak nézni, és hogy a gombok ikonjai elég nagyok legyenek ahhoz, hogy könnyen felismerhetőek legyenek. E problémák teszteléséhez természetesen kipróbálhatja weboldalát saját telefonján, valamint megkérhet néhány különböző márkájú telefonnal rendelkező barátját, hogy ők is próbálják ki, de a fejlesztés során olyan eszközöket is használhat, mint a Chrome fejlesztői eszközei, hogy kiválasszon egy mobil eszközt, amelyet az asztali böngészővel emulálhat. Ez megkönnyítheti annak tesztelését, hogy webhelye hogyan fog megjelenni különböző eszközökön. Ha szereted automatizálni a teszteket, ismét hasznos lehet a puppeteer. A webhely javítása, miután azonosította a problémákat, általában a webhely HTML- és CSS-jelölésének átdolgozásából áll.
Tipp 5
Az olvashatóság mellett győződjön meg arról is, hogy webhelye nem szenved a gyakori mobil használhatósági problémáktól. Ilyen például a navigációs struktúra, például a kis eszközön túl nehezen használható menük, a gombok túl kicsik ahhoz, hogy könnyen megérintsék őket, a gombok elhelyezése nem megfelelő az egykezes használathoz, és a webhelyen való navigálás túlságosan a billentyűzetre támaszkodik. Sok használhatósági problémát a webhely használhatósági elemzésével lehet a legkönnyebben megtalálni. Szemnyitogató lehet megfigyelni, ahogy egy új felhasználó megpróbál megtalálni egy terméket és befejezni egy vásárlást az Ön webhelyén, ami az Ön számára nyilvánvaló, az nem mindig nyilvánvaló egy első alkalommal látogató számára, és ne felejtse el ellenőrizni a helyszíni keresési eredmények finomításának tapasztalatait. A szöveg beírása általában nehezebb egy mobileszközön, ezért győződjön meg róla, hogy nem kell újra beírni a szöveget a keresés finomításához. A kézi ellenőrzés mellett egyes problémák megtalálására eszközök is felhasználhatók. Az eszközök előnye, hogy integrálhatja őket a webhelyek építési és kiadási folyamatába. Nézze meg például a mobilbarát teszt eszközt. Egyszerűen adja meg a webhelye egy oldalának URL-címét, és a program elemzi az olyan gyakori problémákat, mint például, hogy a webhely elavult plugint használ, például flash-t, a viewport tulajdonság nincs meghatározva egy meta tagben, és a betűméret túl kicsi a kényelmes olvasáshoz. A Google Search Console egy mobilhasználhatósági jelentést is tartalmaz a Google által az Ön webhelyén indexelt oldalakról. Keresse a mobil használhatóságot az oldalsáv menüpontban.
A használhatósági problémák általában ismét a webhely HTML-jének és CSS-ének átdolgozásával oldhatók meg, majd teszteléssel ellenőrizheti, hogy a probléma megoldódott-e.
Tipp 6
A 6. számú tipp az, hogy megértse és egyszerűsítse a felhasználói élményeket a webhelyén. Példa a javításra szoruló gyakori területek közül a fizetési és szállítási adatok gyűjtésére szolgáló űrlapok a pénztárfolyamatban, valamint a kerozinok, mint népszerű módja annak, hogy több információt pakoljon a korlátozott képernyőfelületre. Az olyan technikák használata, mint a progresszív webes alkalmazások vagy röviden PWA, szintén gazdagabb alkalmazásszerű élményt nyújthat a felhasználóknak a weboldalán. A felhasználói folyamatok problémáinak felderítése általában manuális használhatósági elemzést igényel. Az eszközök segíthetnek a jól ismert problémák kiszűrésében, de nem lehet rájuk támaszkodni az összes használhatósági probléma megtalálásában. Ha űrlapokat használ, győződjön meg róla, hogy webhelye megfelelően támogatja a fizetési és szállítási adatok automatikus kitöltését, ha többet szeretne megtudni, nézze meg a Sam.dun nagyszerű tartalmát az űrlapokról a Web.dev oldalon. Ha egy webhely jelszavakat tartalmazó ügyféladatbázist tart fenn, győződjön meg arról, hogy az űrlapmezők helyesen vannak jelölve, így a böngészők gyakran megjegyzik a felhasználók jelszavait, a jelszavakat a szabványos megrendelés kitöltéséhez képest és az automatikus mezőmezőket különös gonddal kell kezelni a biztonságuk érdekében. Betty még, fontolja meg egy harmadik féltől származó személyazonossági szolgáltató, például a Google használatát, így a vásárlóknak nem kell megjegyezniük egy újabb jelszót. Minden olyan webhely, amely saját jelszó-adatbázist kezel, növeli a jelszólopás kockázatát, ami viszont más webhelyeket is sebezhetővé tehet, mivel sok felhasználó újrafelhasználja a jelszavakat az egyes webhelyeken. Ha kerozolokat használsz webhelyeden, nézd meg Katy remek tanácsait a Web.dev oldalon. Az olyan gyakorlatok, mint az automatikus előretöltő körhinták mutatósnak tűnhetnek, de gyakran rossz felhasználói élményt eredményeznek. A progresszív webes alkalmazások és a potenciálisan kapcsolódó egyoldalas alkalmazások vagy Spas egy nagy terület, és túlmutat ennek a videónak a keretein. A web.dev oldalon nagyszerű cikkeket talál a Pwas-ról.
Tipp 7
A 7. számú tipp: a személyre szabás számít a mobileszközökön. A mobileszközök felhasználói általában nagyobb elvárásokat támasztanak a személyre szabással szemben. Ezt több tényező is befolyásolja, többek között az, hogy a mobileszközökön jellemzően nem osztják meg a felhasználóval, így eredendően személyesek, és a kisebb képernyők miatt fontosabb, hogy a megjelenített tartalmak relevánsak legyenek a felhasználó számára. Hatékony módja annak megállapítására, hogy webhelye profitálhat-e a személyre szabásból, ha webhelyrendet végez. A vásárlói interjúk például nagyszerű módja annak, hogy mélyebb betekintést nyerjen a felhasználók elvárásaiba. A személyre szabásnak számos formája van; lehet olyan egyszerű, mint a kezdőlapon olyan termékek megjelenítése, amelyeket a felhasználó a legutóbbi látogatásakor megtekintett, vagy a felhasználó profilja alapján kézzel összeállított ajánlatok megjelenítése. A személyre szabás fejleszthető mesterséges intelligencia által vezérelt ajánlómotorok segítségével is, amelyek a felhasználó webhelyen végzett műveletein alapulnak. Ma már számos nagyszerű személyre szabási és ajánlási termék van a piacon, többek között a Google-től.
A személyre szabás gyakran részesül az emlékező felhasználásokból. A sütik használata gyakori módja annak, hogy a felhasználó ízlését egy korábbi látogatásból megjegyezzük anélkül, hogy teljes személyazonosságát ismernénk. Alternatívaként egy webhely személyre szabottabb látogatást kínálhat, ha a felhasználó fiókot hoz létre és bejelentkezik, elfogadva minden olyan feltételt, amely a vásárlóra vonatkozó adatok gyűjtésére és tárolására vonatkozik.
Tipp 8
Az utolsó tipp az, hogy vizsgálja meg, hogy a webhelye ki tudja-e használni a mobileszközök által biztosított fejlettebb beviteli módszereket, például az érintőképernyőket, a kamerákat, a földrajzi helymeghatározó helymeghatározó szolgáltatásokat és a hangbevitelt, ezek új és vonzó módokat kínálhatnak az ügyfelek számára a webhelyével való interakcióra. A fejlett interakciók példái közé tartozik a pinch és swipe gesztusok használata a termékoldalon található termékképek nagyításához és böngészéséhez, a helymeghatározó szolgáltatások használata a legközelebbi fizikai üzletben található termékek használatának első megjelenítéséhez, a hangbevitel támogatása a mobilbillentyűzeten való gépelés szükségességének csökkentése érdekében, a felhasználó számára inkrementált valóságélmény biztosítása, hogy vásárlás előtt jobban láthassa, hogyan néz ki egy bútordarab a saját otthonában, valamint a termékek képi keresése a kamerával rögzített anyagminta alapján, olyan felületek használatával, mint a Google Vision API. Számos, de nem minden natív alkalmazásfunkciót támogatnak már a mobil webböngészők. Nézze meg a Google Fugu projektjét az ilyen fejlett képességek listájáért, hogy lássa, mi minden lehetséges. Az olyan oldalakon, mint a caniuse.com, azt is megnézheti, hogy egy adott funkció mennyire széles körben támogatott a böngészőkben, mielőtt a saját webhelyén használná a funkciót. Ne feledje, hogy ha egy funkció nem minden böngészőben érhető el, a Javascript általában képes felismerni, hogy a funkció elérhető-e vagy sem, és megfelelően reagálni. Ez azt jelenti, hogy nem szükséges, hogy minden böngésző támogasson egy funkciót ahhoz, hogy azt a saját webhelyén kihasználhassa.