Paras mobiili Aloitussivun suunnittelu vinkkejä et löydä mistään muualta

on paljon resursseja verkossa, jotka osoite mobiili post-click Aloitussivun malleja, mutta ei ole paljon erityisiä suunnitteluohjeita, Miten todella rakentaa korkean muunnos sivu.

minkä rakenteen asettelua suositellaan mobiilikatseluun? Kuinka monta pikseliä painikkeiden pitäisi olla? Kuinka monta pikseliä pitäisi erottaa elementtejä? Pitäisikö sinun käyttää ”hover” – efektiä? Pitäisikö merkintöjen olla sisä-tai ulkopuolella?

Nimeni on Cosmin Serban, Instapagen suunnittelupalvelujen johtaja. Saatat kysyä, mikä tekee Cosmin Pätevä kirjoittaa mobile post-click Aloitussivun suunnittelu?

olen valistanut asiakkaitani parhaista käytännöistä, jotka koskevat klikkauksen jälkeisten aloitussivujen suunnittelua ja jäsentämistä muuntokurssien parantamiseksi. Minulla on myös:

  • arvosteltu yli 1000 klikkauksen jälkeistä aloitussivua
  • kumppaneina asiakkaiden kanssa varmistaakseen, että heidän viestinsä menee perille ja heidän kävijöillään on hyvä kokemus, joka johtaa lopulta muuntamiseen

lisäksi olin osa tiimiä, joka on kehittänyt yli 200 optimoitua mallia, joita käytetään luomaan ja käynnistämään yli 200 000 klikkauksen jälkeistä aloitussivua, löydät mallit täältä.

Mobile post-click Aloitussivun suunnittelu: Mitä tietää ennen kuin aloitat

Jotkut tämän artikkelin käsitteet kehitettiin sisäisesti mallikirjastomme luomisen yhteydessä. Tämä ei välttämättä tarkoita, että kaikki nämä vinkit olisi sovellettava joka ikinen post-click aloitussivu luot. Jokaisella post-click-aloitussivulla on omat ainutlaatuiset haasteensa, mutta näiden peruskäsitteiden ymmärtämisen pitäisi ehdottomasti auttaa tarjoamaan parempi kokemus kaikille, jotka vierailevat mobiililaitteella.

aloitetaan tärkeimmistä eroista pöytäkoneen ja mobiilikokemuksen välillä.

rakenne

vaikka se ei siltä vaikuttaisikaan projektin alussa, on kriittisempää kuin luuletkaan, että on olemassa rakenne, jossa tuotetaan oikea ryhmä elementtejä oikeaan aikaan.

ensimmäisenä tulee mieleen täysin erilainen tapa, jolla kävijämme skannaavat sisältöä mobiilisivuilta. Olemme kaikki kuulleet F-pattern tai Z-pattern työpöydällä post-click aloitussivut, mutta mikä on kuvio mobiili nimeltään? Emme välttämättä anna sille nimeä, mutta todennäköisesti se on hyvin lineaarinen. Vieritys ylös ja alas on ainoa tapa ymmärtää, mitä post-click aloitussivu tarjoaa:

koska tämä on yksi tärkeimmistä rajoituksista, miten kävijät ovat vuorovaikutuksessa napsautuksen jälkeisen Aloitussivun kanssa, suosittelemme pitäytymään yhden sarakkeen asettelussa sen sijaan, että yrittäisit ahtaa paljon sisältöä vaakasuoraan. (Kukaan ei tykkää nipistää ja zoomata.)

työpöydällä digitaalimarkkinoijat ajattelevat useimmiten kunkin yksittäisen elementin sijoittelua ja sen vaikutusta. Mobiilissa on parempi tehdä muutos ja miettiä elementtiryhmiä ja miten Pinot ne päällekkäin maksimaalisen vaikutuksen aikaansaamiseksi.

tämä side-by-side-vertailu osoittaa, miten työpöytäsivu rakentuu verrattuna mobiilisivuun:

mobile post-click Aloitussivun suunnitteluvertailu

suosittelemme kulkemaan vasemmalta oikealle ja sijoittamaan jokaisen elementtiryhmän toistensa alle. Otetaanpa otsikkoalue (yläpuolella-kertainen) esimerkiksi. Meillä on logo yläosassa, jonka jälkeen ryhmä on tehty pääotsikosta ja sitä tukevista otsikoista, sitten on koko lomakelaatikkoryhmä alla.

kyky ryhmitellä elementtejä luo natiivisti liikkuvan responsiivisen joukon olioita. Vaihtoehtoisesti ryhmät voidaan konfiguroida lukitsemaan monimutkaisten järjestelyjen kuvasuhde, jotta niiden tarkat mittasuhteet säilyvät, kun ne muunnetaan sivustosi mobiiliversioon.

Mobile Aspect Ratio Lock pitää kerrokselliset ryhmittelyt yhdessä ja lukitsee kuvasuhteen, olivatpa ne sitten työpöydällä tai mobiililaitteella.

kahden tai useamman toisiinsa läheisesti liittyvän tai toisiaan täydentävän elementin tulee aina pysyä yhdessä. Tässä tilanteessa ei olisi järkevää olla lomakkeen laatikko aivan sivun yläreunassa, joten käsite ottaa lomakkeen edellä-kertainen alue ei ole ihanteellinen. Antaa kävijä yhteydessä, mitä he kirjautuvat ensin on tärkeämpää kuin vain antaa heille tapa toimia mahdollisimman nopeasti.

latausaika

riippumatta siitä, mitä laitetta vierailijasi käyttävät, sivun latausnopeus on erittäin tärkeä. Ota huomioon, että suurin osa kävijöistä käyttää mobiilidatan rajoituksia ja aiheuttaa kustannuksia nähdä sivu, joten ole varovainen, millaisia grafiikkaa tai elementtejä lisäät sivuille. Kuvittele, että pääset sivulle ja video toistetaan automaattisesti.

jos tarvitset paljon animaatioita sisällön tukemiseen, suosittelemme pitäytymään yksinkertaisissa kuvissa mobiililaitteille. Yksinkertaisesti, tarkoitan sinun täytyy luoda mukautettuja taustakuvia tietyn osan. Kuvankäsittelyohjelmalla säätää kokoa tai asettelua valokuvan vain voi olla arvoinen ylimääräistä aikaa tarvitaan, kun se tarkoittaa, voit nopeuttaa sivuja.

sama juttu taustakuvien kanssa, koska et tarvitse 2 000 pikselin levyistä kuvaa, joka on 300kB latautuaksesi osioosi, ehdotan, että hankit suunnittelijan luomaan räätälöidyn kuvan, jonka voit asettaa osiosi taustaksi:

mobile post-click Aloitussivun suunnittelukuvat

useimmiten mobiilisivun pitäminen mahdollisimman yksinkertaisena on aina hyvä idea. Esimerkiksi, jos sinulla on useita graafisia elementtejä, jotka välittävät saman viestin, vain näyttää yksi mobiili.

koska useimmat matkapuhelimet mukautuvat mobiilirakentajan tarjoaman sisältöalueen kokoon, hyvä nyrkkisääntö on, että kuva on vähintään 400 pikselin levyinen, jotta sivuilla ei ole tyhjiä tiloja.

Rakenna AMP post-click-aloitussivu

positiivisen post-click-Aloitussivun luominen mobiiliin on välttämätöntä, koska transformaatiot tapahtuvat post-click-aloitussivulla. Jos sivu latautuu liian hitaasti tai luo hajanaisen kokemuksen mainoksesta post-clickiin, kävijät pomppivat.

sitten, harkitse, että Google tarkastelee post-click Aloitussivun kokemus yhtenä tekijänä määrittää ad rank, joka viime kädessä vaikuttaa click – through rate. Kun tähän lisätään kaikki, brändeillä on suuri ongelma käsissään. Onneksi vahvistettua MARKKINAKÄYTÄNTÖÄ on olemassa.Erityisesti

AMP-sivut ovat mainostajille houkuttelevia, koska ne mahdollistavat vakuuttavammat mobiilikäyttäjäkokemukset lähes hetkellisten latausaikojen ja sujuvan vierityksen kautta, mutta tukevat silti tiettyä tyylittelyä ja brändäyksen muokattavuutta. Koska AMP rajoittaa HTML / CSS ja JavaScript, se mahdollistaa nopeamman post-click Aloitussivun renderöinti. Toisin kuin perinteiset mobiilisivut, VAHVISTINSIVUT tallennetaan automaattisesti välimuistiin Google AMP-välimuistilla nopeammiksi latausajoiksi Googlessa.

hyväksytyn markkinakäytännön hyödyt ylittävät sen rajoitukset:

  • nopeampi sivujen latausnopeus mobiililaitteilla
  • Parempi käyttökokemus mobiiliselailuun
  • AMP-sivujen käyttäminen voi auttaa parantamaan laatupisteitä
  • Google suosii sivuja, jotka käyttävät AMP: tä

kesäkuusta 2018 lähtien Instapage tarjoaa AMP: n post-click-aloitussivuja, joissa digitaaliset markkinoijat voivat rakentaa AMP: n yhteensopivia sivut sovelluksen sisällä ilman kehittäjää. Koska, loppujen lopuksi, jos sivun lataus ei ole välitön, se ei ole tarpeeksi nopea.

14-day trial Instapage Luo uusi sivu

Designing for touch

yksi suurimmista haasteistasi mobiilin post-click-Aloitussivun suunnittelussa on varmistaa, että kävijöiden on mahdollisimman helppo toimia. Tämä toimi voisi olla lomakkeen jättämistä tai yksinkertainen napin painallus. Luulisi, että useimmat ihmiset tekevät joitakin muutoksia, mutta niin ei aina ole.

olemme kaikki kokeneet sivut, joissa on hyvin vaikea napauttaa jotain tai kokemusta ei ole räätälöity mobiilikäyttäjille. Erityisesti tekstilinkit-minkä tahansa tekstielementin koon säätäminen, joka on hyperlinkki, on erittäin hyödyllistä. Vierailijasi ei pitäisi joutua zoomaamaan haluamaasi toimintaan.

painikkeet

mutta suurin ongelma, jonka olemme huomanneet, on painikkeiden koko klikkauksen jälkeisillä aloitussivuilla. Tiimimme suosittelee suunnittelemaan painikkeita, joiden korkeus on vähintään 70 pikseliä ja älä pelkää tehdä niistä mahdollisimman leveitä, mutta älä koskaan venytä niitä koko leveydelle (400 pikseliä), koska ne saatetaan sekoittaa pieneen osaan.

hover-efekti on mukava kosketus työpöytäsivuille, koska se viestii kävijälle, että he voivat ryhtyä toimiin kyseisen elementin suhteen. Mobile, kautta, hover vaikutukset ovat tarpeettomia.

marginaalit

marginaalien osalta suosittelemme pitämään vähintään 20 pikselin turva-alueen pystysuunnassa vapaana kummallakin puolella ja välttämään visuaalista jännitettä, joka saattaa esiintyä liian lähellä puhelimen näytön sivuja olevien elementtien kanssa.

valkoinen tila on jotain, joka on aivan yhtä tärkeä mobiilisivuille kuin työpöytäsivuille. Peruskäsitteet pätevät edelleen, yritetään vain avartaa kaikki ulos eikä ole elementtejä todella lähellä toisiaan. Näin voit välttää visuaalista jännitystä.

yhdenmukaiset katteet johtavat varmasti parempaan käyttökokemukseen. Tiimimme varmistaa yleensä, että jokaisen elementin välissä on vähintään 20-40 pikseliä. Kuinka paljon päätät on sinun, koska jokainen lohko voi olla ainutlaatuinen rakenne elementtejä.

se on melko subjektiivinen, mutta kun olet luonut säännön, yritä toistaa se koko sivulla ja se antaa sille modernimman ilmeen.:

luettavuus

voisi luulla, että sisällön selkeä lukeminen on itsestäänselvyys, mutta liian monta kertaa olemme nähneet klikkauksen jälkeisiä aloitussivuja, joissa teksti on joko liian pieni tai liian iso. Löytää hyvä tasapaino on melko helppoa, hyvä nyrkkisääntö kirjasinkoon käytetään tiettyjä elementtejä ovat:

  • pääotsikko: 28 pikseliä
  • alaotsikko: 22 pikseliä
  • kohdat: 17 pikseliä
  • Muut tiedot: 15 pikseliä

tietenkin voit säätää näitä kokoja, koska ei ole yhtä kokoa kaikkiin tarpeisiin. Kuitenkin, sen pitäisi toimia hyvä perustaso menossa eteenpäin suunnittelussa mobiili post-click aloitussivu.

toinen mainitsemisen arvoinen asia on viivan korkeus tekstielementteineen.

tietyissä tilanteissa työpöydällä on järkevää olla 1.0 tai jopa 1.2, kun rakennat mobiilin post-click-Aloitussivun varmista, että tekstielementtien rivin korkeus on vähintään 1.4.

Alarivi: mitä pienempi kirjasinkoko, sitä suurempi viivakorkeuden tulisi olla.

lomakkeet

koska lomakkeet ovat tärkein osa useimpia klikkauksen jälkeisiä aloitussivuja, on tärkeää, että ihmisten on helppo lähettää tietonsa.

koko mobiilisivuillamme yleensä venytämme lomakekenttiä mahdollisimman paljon vaakasuoraan ja vältämme tilanteita, kuten lomakekentän ja painikkeen pitämistä samalla rivillä. Se on vain huono kokemus.:

toinen asia, joka tulee ulos hyvin usein käsitellään muotoja, joissa on paljon kenttiä.

paras käytäntö, jonka tiimimme löysi, on se, että aina kun sivulla on enemmän kuin 2 lomakekenttää, joiden avulla etiketin sijainti voidaan asettaa ulkopuolelle, kävijöiden on helpompi tietää, mitä tietoja tarvitaan sen sijaan, että he yrittäisivät muistaa, mitä syöttää.:

lisää mobiilimuunnoksia Alkaen tänään

aivan kuten työpöytäsivuja, mobile post-click Aloitussivun suunnittelussa on kyse käyttäjäkokemuksesta ensin ja siitä, mikä saa ihmiset sitoutumaan ja muuntamaan. Ottamatta huomioon ehdotuksia edellä, mobiili muuntokurssi todennäköisesti kärsivät ja ihmiset pomppia.

harkitse suositusten toteuttamista ja katso, miten napsautuksen jälkeiset aloitussivusi muuttuvat erittäin optimoiduiksi muunnosvaroiksi. Hanki Instapage AMP demo tänään.

Vastaa

Sähköpostiosoitettasi ei julkaista.