A legjobb mobil Céloldal-tervezési tippek, amelyeket máshol nem talál

rengeteg online forrás található, amelyek a kattintás utáni mobil céloldal-tervekkel foglalkoznak, de nincs sok konkrét tervezési utasítás, hogyan lehet ténylegesen felépíteni egy nagy konvertáló oldalt.

milyen szerkezeti elrendezés ajánlott a mobil megtekintéshez? Hány pixelnek kell lennie a gomboknak? Hány pixelnek kell elválasztania az elemeket? Használja a” hover ” hatást? A címkéknek belül vagy kívül kell lenniük?

a nevem Cosmin Serban, az Instapage tervezési szolgáltatások igazgatója. Lehet, hogy azt kérdezi, mi teszi a Cosmin képesítést arra, hogy írjon a mobil kattintás utáni céloldal tervezésére?

oktattam az ügyfeleket a legjobb gyakorlatokról a kattintás utáni céloldalak tervezésében és strukturálásában, hogy javítsák konverziós arányukat. Is, nekem van:

  • több mint 1000 kattintás utáni nyitóoldal áttekintése
  • partneri kapcsolat az ügyfelekkel, hogy biztosítsák az üzenetük átjutását, és a látogatóik jó tapasztalattal rendelkeznek, ami végül konverzióhoz vezet

továbbá tagja voltam annak a csapatnak, amely több mint 200 optimalizált sablont fejlesztett ki, amelyek több mint 200 000 kattintás utáni nyitóoldal létrehozására és elindítására szolgálnak, a sablonokat itt találja.

mobil kattintás utáni nyitóoldal tervezés: Mit kell tudni, mielőtt elkezdené

ebben a cikkben néhány fogalmat belsőleg fejlesztettek ki sablonkönyvtárunk létrehozásakor. Ez nem feltétlenül jelenti azt, hogy ezeknek a tippeknek minden egyes kattintás utáni céloldalra vonatkozniuk kell. Minden kattintás utáni céloldalnak megvan a maga egyedi kihívása, de ezeknek az alapvető fogalmaknak a megértése mindenképpen segít abban, hogy jobb élményt nyújtson mindenki számára, aki a mobil eszközéről látogat.

kezdjük az asztali és a mobil élmény közötti legfontosabb különbségekkel.

szerkezet

annak ellenére, hogy a projekt elején nem tűnik úgy, hogy a megfelelő elemcsoportot a megfelelő időben szállítja, kritikusabb, mint gondolná.

az első dolog, ami eszébe jut, az, hogy látogatóink teljesen más módon szkennelik a tartalmat a mobil oldalakon. Mindannyian hallottunk az F-mintáról vagy a Z-mintáról az asztali kattintás utáni céloldalakon,de mi a mobil mintája? Nem feltétlenül adunk neki nevet, de valószínűleg nagyon lineáris. A fel-le görgetés az egyetlen módja annak, hogy megértsük, mit kínál a kattintás utáni céloldal:

mivel ez az egyik legfontosabb korlátozás, hogy a látogatók hogyan lépnek kapcsolatba a kattintás utáni céloldallal, javasoljuk, hogy ragaszkodjon egy oszlopos elrendezéshez, ahelyett, hogy sok tartalmat próbálna vízszintesen összezsúfolni. (Senki sem szereti a nagyítást és a nagyítást.)

az asztali számítógépeken a digitális marketingszakemberek legtöbbször az egyes elemek elhelyezésére és annak hatására gondolnak. Mobilon jobb, ha váltást hajt végre, és átgondolja az elemek csoportjait, és hogyan rakja őket egymásra a maximális hatás érdekében.

ez a side-by-side Összehasonlítás azt mutatja, hogyan épül fel egy asztali oldal a mobil oldalhoz képest:

mobil kattintás utáni céloldal-összehasonlítás

javasoljuk, hogy balról jobbra haladjon, és minden elemcsoportot egymás alá helyezzen. Vegyük például a fejléc területét (a hajtás felett). A tetején lesz a logó, majd a fő címsorból és a támogató címsorból álló csoport, majd az egész űrlapmező csoport alatta.

az elemek csoportosításának képessége natív mobil érzékeny objektumkészletet hoz létre. Alternatív megoldásként a csoportok úgy is beállíthatók, hogy zárolják az összetett elrendezések képarányát, hogy megőrizzék pontos arányukat, amikor az oldal mobil verziójára konvertálják őket.

a mobil képarány-zárolás a réteges csoportosításokat együtt tartja, és rögzíti a képarányt, függetlenül attól, hogy asztali vagy mobil elrendezésről van-e szó.

bármely két vagy több, egymással szorosan összefüggő vagy egymást kiegészítő elemnek mindig össze kell tapadnia. Ebben a helyzetben nem lenne értelme az űrlapmezőt közvetlenül az oldal tetején elhelyezni, ezért az a koncepció, hogy az űrlap a hajtás feletti területen legyen, nem ideális. Sokkal fontosabb, hogy a látogatónak megadja azt a kontextust, amelyet először regisztrál, mint hogy csak a lehető leggyorsabban cselekedjen.

betöltési idő

függetlenül attól, hogy a látogatók milyen eszközt használnak, az oldal betöltési sebessége nagyon fontos. Kérjük, vegye figyelembe, hogy a legtöbb látogató a mobiladat-korlátozásait használja, és költséget jelent az oldal megtekintéséhez, ezért legyen óvatos, hogy milyen grafikákat vagy elemeket ad hozzá az oldalakhoz. Képzelje el, hogy belép egy oldalra, és automatikusan lejátszja a videót.

ha sok animációra van szüksége a tartalom támogatásához, javasoljuk, hogy ragaszkodjon az egyszerű képekhez a mobilhoz. Egyszerűen azt értem, hogy egyedi háttérképeket kell létrehoznia egy adott szakaszhoz. A fotószerkesztő szoftver segítségével beállíthatja a fénykép méretét vagy elrendezését, érdemes lehet a szükséges extra időt, ha ez azt jelenti, hogy felgyorsíthatja az oldalakat.

ugyanez a helyzet a háttérképekkel, mivel nem kell 2000 pixel széles, 300 KB-os kép betöltése a szakaszba, azt javaslom, hogy szerezzen be egy tervezőt, hogy hozzon létre egy személyre szabott képet, amelyet a szakasz háttereként állíthat be:

mobile post-click nyitóoldal tervezés képek

a legtöbb időt tartja a mobil oldal a lehető legegyszerűbb mindig egy jó ötlet. Például, ha több grafikus eleme van, amelyek ugyanazt az üzenetet közvetítik, csak mutasson egyet mobilon.

mivel a legtöbb mobiltelefon alkalmazkodik a mobilépítőben biztosított tartalomterület méretéhez, jó ökölszabály, hogy legalább 400 pixel széles kép Legyen, hogy az oldalakon ne legyenek üres helyek.

AMP létrehozása kattintás utáni céloldal

pozitív kattintás utáni céloldal létrehozása mobilon elengedhetetlen, mivel a kattintás utáni céloldal az, ahol konverziók történnek. Ha az oldal túl lassan töltődik be, vagy a hirdetéstől a kattintásig megosztott élményt hoz létre, a látogatók visszapattannak.

ezután vegye figyelembe, hogy a Google a kattintás utáni céloldal élményét tekinti a hirdetés rangsorának meghatározásának egyik tényezőjének, amely végső soron hozzájárul az átkattintási arányhoz. Ha mindezt összeadjuk, a márkáknak komoly problémájuk van a kezükben. Szerencsére az AMP keretrendszer létezik.

az AMP-oldalak különösen azért vonzóak a hirdetők számára, mert vonzóbb mobil felhasználói élményt tesznek lehetővé a szinte azonnali betöltési idő és a sima görgetés révén, miközben támogatják a stílus és a márkajelzés testreszabhatóságát. Mivel az AMP korlátozza a HTML/CSS-t és a JavaScript-et, lehetővé teszi a kattintás utáni céloldal gyorsabb megjelenítését. A hagyományos mobil oldalakkal ellentétben az AMP oldalakat a Google AMP gyorsítótár automatikusan gyorsítótárazza a gyorsabb betöltési idő érdekében a Google-ban.

az AMP keretrendszer előnyei valóban meghaladják korlátait:

  • gyorsabb oldalbetöltési sebesség a mobileszközökön
  • jobb felhasználói élmény a mobil böngészéshez
  • az AMP oldalak használata növelheti a minőségi pontszámot
  • a Google előnyben részesíti azokat az oldalakat, amelyek AMP

2018 júniusától az Instapage amp kattintást követő céloldalakat kínál, ahol a digitális marketingszakemberek AMP-kompatibilis oldalak az alkalmazáson belül Fejlesztő nélkül. Mert végül, ha az oldal betöltése nem azonnali, akkor nem elég gyors.

14-day trial Instapage új oldal létrehozása

tervezése touch

az egyik legnagyobb kihívás a mobil post-click nyitóoldal tervezés ügyelve arra, hogy a lehető legegyszerűbb a látogatók, hogy tegyen lépéseket. Ez a művelet lehet űrlap benyújtása vagy egy gomb egyszerű megérintése. Azt várná, hogy a legtöbb ember némi kiigazítást hajt végre, de ez nem mindig így van.

mindannyian tapasztaltunk olyan oldalakat, ahol nagyon nehéz megérinteni valamit, vagy az élmény nem a mobil felhasználók számára készült. Különösen szöveges linkek-a hiperhivatkozással ellátott szövegelemek méretének beállítása nagyon hasznos. A látogatónak nem kell nagyítania a kívánt művelet végrehajtásához.

gombok

de a legnagyobb probléma, amit észrevettünk, a kattintást követő nyitóoldalakon található gombok mérete. Csapatunk azt javasolja, hogy legalább 70 Pixel magasságú gombokat tervezzenek, és ne féljenek a lehető legszélesebbé tenni őket, de soha ne nyújtsák őket teljes szélességben (400 pixel), mivel összetéveszthetők egy kis résszel.

a hover effektus jó húzás az asztali oldalak számára, mert jelzi a látogatónak, hogy cselekedhetnek az adott elemen. Mobilon keresztül a lebegő effektusok feleslegesek.

margók

margók esetén javasoljuk, hogy mindkét oldalon legalább 20 képpontos biztonsági zónát tartson szabadon, és kerülje az esetleges vizuális feszültséget, amely a telefon képernyőjének oldalához túl közel lévő elemekkel jelenhet meg.

a fehér szóköz ugyanolyan fontos a mobil oldalak számára, mint az asztali oldalak számára. Az alapfogalmak továbbra is érvényesek, csak próbálj meg mindent elhelyezni, és ne legyenek olyan elemek, amelyek nagyon közel állnak egymáshoz. Ez segít elkerülni a vizuális feszültséget.

a következetes margók mindenképpen jobb felhasználói élményt eredményeznek. Csapatunk általában gondoskodik arról, hogy legalább 20-40 Pixel legyen az egyes elemek között. Az, hogy mennyit dönt, rajtad múlik, mivel minden blokk egyedi elemszerkezettel rendelkezik.

ez elég szubjektív, de ha egyszer létrehoz egy szabályt, próbálja megismételni az egész oldalon, és ez ad ez egy modern megjelenés:

olvashatóság

azt gondolnánk, hogy a tartalom egyértelmű elolvasása adott, de túl sokszor láttunk kattintás utáni céloldalakat, ahol a szöveg túl kicsi vagy túl nagy. A jó egyensúly megtalálása nagyon egyszerű, az egyes elemekhez használt betűméret jó ökölszabálya:

  • főcím: 28 Pixel
  • alfejezet: 22 Pixel
  • bekezdések: 17 Pixel
  • egyéb részletek: 15 Pixel

természetesen beállíthatja ezeket a méreteket, mivel nincs Egy méret, amely minden igényt kielégít. Ennek azonban jó kiindulási pontként kell szolgálnia a mobil kattintás utáni céloldal tervezésével.

egy másik említésre méltó elem a sor magassága szöveges elemekkel.

bizonyos helyzetekben az asztalon van értelme, hogy 1.0 vagy akár 1.2, amikor építeni a mobil post-click céloldal győződjön meg arról, hogy a sor magassága szöveges elemek legalább 1.4.

alsó sor: minél kisebb a betűméret, annál nagyobb a vonal magassága.

űrlapok

mivel az űrlapok a legtöbb kattintás utáni céloldal legfontosabb részét képezik, kritikus fontosságú az emberek számára az információk benyújtásának megkönnyítése.

mobil oldalainkon általában vízszintesen nyújtjuk az űrlapmezőket, amennyire csak lehetséges, és elkerüljük az olyan helyzeteket, mint az űrlapmező és a gomb ugyanazon a vonalon. Ez csak egy rossz tapasztalat:

egy másik dolog, ami nagyon gyakran jön ki, olyan formákkal foglalkozik, amelyeknek sok mezője van.

a csapatunk által feltárt legjobb gyakorlat az, hogy ha egy oldal több mint 2 űrlapmezővel rendelkezik, akkor a címke helyzetét kívülre kell állítani, így a látogatók könnyebben megismerhetik, hogy milyen információkra van szükség, ahelyett, hogy megpróbálnák megjegyezni, mit kell bevinni:

növelje mobil konverzióit a mai naptól

csakúgy, mint az asztali oldalak, a mobil kattintás utáni céloldal kialakítása először a felhasználói élményről szól, és arról, hogy mi fogja meggyőzni az embereket, hogy vegyenek részt és konvertáljanak. A fenti javaslatok figyelembevétele nélkül a mobil konverziós arány valószínűleg szenvedni fog, és az emberek ugrálnak.

fontolja meg az ajánlások végrehajtását, és nézze meg, hogyan alakulnak át a kattintás utáni céloldalak magasan optimalizált konverziós eszközökké. Kap egy Instapage AMP demo ma.

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.