👉 15 Mobile Landing Page Best Practices vist seg å få store resultater

Nybegynners Guide til Lead Generation

Visste du at 51% av kundene sier at de bruker mobile enheter til å finne nye merker og produkter? Siden Mobil og bærbare enheter kom på scenen, har de jevnlig tatt trafikk fra stasjonære datamaskiner.

Så hvorfor undergraver mobile konverteringer fortsatt desktopkonverteringer?

Vel, det er noen grunner. Noen av disse grunnene, som shopper bekymring for sikkerheten til deres informasjon, har du liten kontroll over. En av grunnene til at mobilkonverteringer fortsatt går etter skrivebordskonverteringer, har du full kontroll over: dine mobile destinasjonssider.

Hva er en destinasjonsside?

En destinasjonsside er en enkelt nettside som vises når du klikker på et søkeresultat eller en nettannonse. Disse sidene har vanligvis en enkelt oppfordring til handling eller formål og minimal design og navigering.

I denne artikkelen kommer vi til å gå deg gjennom 15 beste destinasjoner for beste destinasjon for landingssiden som vil øke mobilomregningene dine. Vi vil pakke opp med noen eksempler på eksempler på mobil destinasjonsside som vil inspirere deg til å lage din egen.

Mobile Landing Page Best Practices

De beste mobile landingssidene griper oppmerksomhet, krever en handling og får en konvertering. Ferdig og ferdig.

Når du befinner deg på en godt utformet mobil destinasjonsside, sukker noe inni deg sannsynligvis lykkelig fordi det bare er, og det er riktig og det er så lett å bruke.

Du kan lage dine egne destinasjonssider akkurat slik med disse 15 mobiliseringsside optimaliserings tipsene, så la oss komme inn på den.

1. Opprett en separat mobillandside

Det er ikke nok å være, Eumobile først, eller, Respondent, lenger. De mobile landingssidene dine må utformes spesielt for mobil bruk, eller de skal ikke konvertere måten du vil ha dem til.

Problemet med responsiv design er at alle elementene fortsatt var designet for desktop, ikke mobil. Selv strømmen av siden ble opprettet for desktop bruk. Siden mobilbrukere søker og blar nettsteder annerledes enn desktopbrukere, må destinasjonssidene dine tilpasses for hver enhet som skal brukes i hele kundens reise.

Det er viktig å kartlegge kundereisen og bygge nettstedet ditt optimert til enhetene som skal brukes underveis.

PayPal gjør en god jobb med å skape en helt annen opplevelse for brukere av mobil og skrivebord. Deres destinasjonsside, mens den fortsatt er minimalistisk, er visuelt engasjerende og tiltalende.

Mobillandsiden er veldig enkel. Det er et alternativ å logge inn og en meny hvis du vil se flere alternativer, men det primære fokuset er to knapper som tar deg til mer informasjon om bruk av PayPal til personlig bruk eller forretningsbruk. Dette eliminerer behovet for en mobil besøkende å bla gjennom nettstedet for å finne informasjonen de leter etter.

Som du kan se, er begge destinasjonssider visuelt tiltalende, og begge håndterer svært forskjellige besøksbehov. Den mobile landingssiden er bygget for å hjelpe besøkende med å finne informasjon eller fullføre oppgaver raskt, mens desktop destinasjonssiden er rettet mer mot besøkende med tid til å bruke.

2. Bruk klikk for å ringe

Hvis nøkkeldata som lager, arbeidstid og prising ikke kommer til å være lett tilgjengelig på nettstedet ditt, må dine kontaktinformasjon være. For et mobilt nettsted betyr dette at du bruker en klikk-for-ring-knapp som er lett å få øye på, og stor nok til å klikke.

Mobilbrukere er interessert i å få de dataene de leter etter akkurat nå. Hvis de ikke finner det raskt på nettstedet ditt, vil de se etter en enkel måte å kontakte deg for å få den informasjonen de trenger.

3. Implementer Click-to-Scroll

Mesteparten av tiden er en kortere destinasjonsside bedre. Det er imidlertid ganger at brukerne vil bla gjennom inventar eller lese noe på nettstedet ditt. I disse tilfellene kan du bruke klikk-til-bla.

Click-to-scroll betyr at du konfigurerer navigasjonsknapper som en bruker kan klikke for å ta dem til en lengre, rullende side. I stedet for å tvinge å rulle på sidens besøkende, tillater du at de skal ta avgjørelsene.

String Automotive gjorde sin egen A / B-testing for deres mobile landingsside og fant det legge til klikk-til-rullefunksjonalitet redusert sprettfrekvensen med 37%.

4. Bruk klistrede hoder og bunntekster

Selv om skjermeiendom er verdifull på mobillandingssider, er det viktig å holde anropet til handling eller hvilken som helst navigasjon du bruker til mobillandsiden din, lett tilgjengelig. Sticky navigasjon lar besøkende finn det de leter etter om 22% raskere, som er en stor avtale for mobile landingssider.

Også, bokstavelig talt alle foretrekker nettsteder med klebrig navigasjon, selv når de ikke kan forklare hvorfor.

5. Bruk mobiloptimaliserte popups

Popups kan være nyttige og effektive for generering av bly på mobile landingssider hvis du sørger for at de er optimalisert for mobil. En stor del av den optimaliseringen betyr å holde dem så enkle som mulig, så begrens skjemaet til bare noen få felt eller til og med bare en e-postadresse. Du kan alltid nå ut til den besøkende på den oppgitte e-postadressen for mer informasjon senere.

Popupene som brukes til mobil, bør samsvare med den mobile målsidestørrelsen og ikke være en byrde for den besøkende å lukke eller velge bort.

Det er de som vil fortelle deg at mobilnettsteder aldri burde ha popups, men flere Jared Ritchey-kunder har sett stor suksess med deres:

  • ChinaImportal økte lederne med 18%
  • Rådgiveren så 3X over hele verden
  • Salt Strong konverterte 3,8% av mobil besøkende

Når det brukes riktig, er popups et fantastisk tillegg til optimaliseringsstrategien for konverteringsfrekvensen.

6. Håndverk Kortere Kopier

Den mobile målsiden din bør ikke inneholde all kopien fra skrivebordet ditt. Dette er et sted å bruke kortere, forkortet kopi.Du kan og bør fortsatt være smart og fargerik, men du vil raskt komme til rette, eller dine besøkende blir frustrert over deg og forlater.

Her er noen måter du kan redusere teksten på mobillandsiden din:

Klipp alt du kan, uten å ofre klarhet

Målet er å være kort og kortfattet, ikke å kutte ut viktige punkter som vil gjøre eller ødelegge meldingen. Hvis noe legger til verdi, la det være.

Bruk Bullet Points

Bullet poeng er flott for å få viktige poeng på tvers i mindre biter uten å måtte bruke støtte kopi rundt dem. De har også den ekstra fordelen av å tegne besøkendes øye, noe som gjør dem mindre sannsynlig å bli oversett.

Hold setninger og stykker kort

Setninger og avsnitt skal være korte og enkle å lese. Det bør ikke være noen vegger med tekst på siden din. Ved å bryte opp teksten holder den besøkende interessert og gjør det lettere å finne viktige punkter.

Ikke glem at du jobber med mindre plass på en mobil destinasjonsside enn et skrivebordsside. En 10-ord overskrift kan ende opp med å være 7 linjer med tekst som denne ufattelige mobile destinasjonssiden fra HubSpot:

7. Gå lett på visuelle og videoer

Bilder og videoer tar data. Ikke alle brukere som kommer til mobillandsiden din, kommer til å være på WiFi; noen vil bruke sine begrensede cellulære data. Hold bilder på et minimum, og sørg for å optimalisere bildene du bruker for å sikre at de komprimeres.

Hvis du skal bruke videoer, vil du definitivt ikke ha dem satt til auto-play. Dette betyr at de besøkende må klikke på dem for å spille dem, noe som kan distrahere dem fra din primære oppfordring til handling.

En destinasjonsside behøver ikke å legges ned med bilder og videoer for å være visuelt tiltalende. Bare se på denne vakre mobillandingssiden fra Evernote:

Det er enkelt, det er ingen tvil om handlingen, og det lastes veldig fort. Det er også veldig iøynefallende på grunn av mangel på tungt bilde. Sammenlign det med denne mobillandingssiden fra Amrit Yoga:

Visst, det er en veldig fin side, men den er fylt med bilder og er helt for ressursintensiv å laste. Amrit Yoga kunne ha formidlet freden og roen til yoga like bra med en minimalistisk design med begrensede bilder og endte opp med et nettsted som lastet mye raskere.

8. Gjør det raskt

Å være oppmerksom på belastningstider er super viktig, fordi sidelastningstider øker, øker hoppetallene også. Og når en besøkende forlater et nettsted på grunn av treg belastningstid, kommer nesten 50% av dem aldri tilbake.

Her er data som Google avdekket i sin forskning i 2018:

Interessant, den gjennomsnittlige tiden det tar å fullføre en mobil destinasjonsside, er 15 sekunder. Når du vurderer at 53% av de besøkende på mobilen vil sprette hvis et nettsted tar lengre tid enn 3 sekunder å laste, tar det gjennomsnittlige nettstedet altfor lang tid å laste.

Hvis du tok oppmerksom på rådene i forrige tips, må nettstedet ditt allerede lastes raskere, siden bilder og videoer pleier å være nummer ett problem med sakte nettsteder. Du kan også oppgradere din hostingplan til en raskere, eller se på et Content Delivery Network (CDN) som MaxCDN.

9. Hold deg til enkle kolonnelayouts

Mobile enheter trenger ikke flere kolonner. De har ikke plass til dem og noe mer enn en enkelt kolonne gjør navigering og rulling føles veldig tungvint og klumpete.

Selvfølgelig er det også laget regler for noen ganger å bli ødelagt. Hvis du prøver å fange besøkendes oppmerksomhet, kan det være fordelaktig å av og til mislikere innholdet. For det meste er imidlertid enkelkolonne veien å gå.

La oss se på forskjellen i handling. Først opp, synes det offisielle regjeringsstedet for staten Alaska å egentlig ikke ha en mobil destinasjonsside, og bruker bare deres vanlige hjemmeside, men det fungerer for vårt eksempel:

De flere kolonnene som fungerer på en vanlig nettside, fungerer bare ikke på et mobilnettsted. Kan du forestille deg hvor vanskelig det ville være å navigere på dette nettstedet i et område på ca 3 x 5 tommer?

La oss nå se på Californias mobile destinasjonsside:

Ikke super spennende, men definitivt mye enklere å bruke.

10. Rethink Navigation

Visste du at noen markedsføringsdankeledere mener at vi bør gjøre totalt avstand fra navigasjon på mobile destinasjonssider og fokusere på å presse besøkende mot den primære handlingen som vi vil at de skal fullføre på siden?

Mange mobile landingssider bruker en "hamburger" for navigering for å spare plass på mindre skjermer. De fleste besøkende har blitt vant til å se dette symbolet og vet at å klikke på det vil gi opp navigasjonsalternativer.

Noen steder bruker de klissete toppene som vi snakket om i # 4, for å inkludere et par hovednavigasjonslenk som er relatert til det primære målet de har for den mobile landingssiden.

11. Optimaliser skjemaer for mobil

Det er så viktig at du optimaliserer skjemaene dine for mobile besøkende. Fyll ut skjemaer på en mobilenhet har faktisk en negativ netto moroverdi, så sørg for at du får den minste informasjonen du trenger for å nå målet ditt. Du kan alltid følge opp senere for mer informasjon.

Raskt tips: Hvis du har et WordPress-nettsted, kan du bruke et plugin som WPForms for å hjelpe deg raskt og enkelt å bygge skjemaer som skal fungere vakkert for de mobile besøkende.

Dette skjemaet fra Learn Jazz Standards er et godt eksempel på hva en mobil form skal være:

De setter deg opp med det de tilbyr. Det er litt wordy, men skjemaet gjør opp for det. Tre felt: fornavn, e-postadresse og en rullegardin for å velge instrumentet du spiller. Boom. Klikk på Abonner, og du er på vei til å lære jazzstandarder.

Likeable Local er en annen historie helt.

Vi er sikker på at de er nydelige, men vi er ikke sikre på at vi liker dem nok, men å tilbringe tiden det skal ta for å fylle ut 6 tekstfelter og en dropdown på en mobil enhet før vi kan laste ned ledemagneten.

Hvis du trenger hjelp med å lage akkurat det rette alternativet, sjekk ut dette innlegget alt om hvordan du lager mobiloptins som vinne mer virksomhet.

12. Bruk høy kontrast

Høy kontrastfarger har tosidige formål for optimal optimalisering av landingssiden.

For det første er de iøynefallende, og selv folk som ikke har designbuggen, kan noen ganger finne nydelig utformede knapper uimotståelig å klikke.

For det andre bruker folk sine mobile enheter overalt, og naturlig utendørs lys kan gjøre det vanskelig å se hva som er på skjermen hvis det er en lavkontrastdesign.

Apple gjør en utmerket jobb, og bruker høy kontrast med mørkere tekst og bilder på en lys hvit bakgrunn.

Lindsey Racing, det gjør det ikke.

Den svarte, grå og røde designen ser edgy ut som vi antar er hva de skulle for, men alt blir bare til mush under hardt lys.

Du vil sørge for at du bruker farger som konverterer godt, og som dukker opp under hvilken type belysning de besøkende bruker å bruke.

13. Bruk White Space

Som vi allerede har sett med Evernote og Apple, er bruken av hvit plass en fantastisk ting. Det skaper interesse og gjør de mobile landingssidene ser moderne ut. Det gir også øynene rom for å lese ordene som er på siden.

Hvit plass gjør også berøringsskjermens interaksjoner enklere for besøkende og holder utilsiktede klikk til et minimum.

For en kreativ ta på hvit plass, la oss ta en titt på SquareSpace.

Squarespace's hvite plass viser at hvit plass ikke betyr egentlig "hvitt" mellomrom. Vi ser etter hvite som i "fri for distraksjon". SquareSpace gjør dette vakkert.

14. Plasser anrop til handling øverst på siden

"Over the fold" gjelder fortsatt for mobile landingssider. Ja, mobilbrukere er betinget av å rulle, men 80% av en mobil besøkendes oppmerksomhet er fortsatt brukt øverst på siden, før den første, instinktuelle rullen. Det er her din primære oppfordring til handling må være.

Drift gjør en god jobb med å holde samtalen mot toppen av siden og trekker oppmerksomheten til den med en liten fargeskiftende handling. De har siden endret denne kule funksjonen, men vi ønsket å bruke den her for å vise deg hva som kan gjøres.

Når du ruller ned driftens side, får du det samme anropet til handling (uten farger) omtrent halvveis for å minne deg på hvorfor du er der.

Hvis du er usikker på hva som gjør en god oppfordring, kan vi hjelpe deg med å skape den perfekte handlingen.

15. A / B-test

Vi lagret den viktigste mobillandingssiden beste praksis for sist: A / B-testing. Du får så mye informasjon som du kan bruke til å gjøre nettstedet ditt bedre, øke konverteringer og øke inntektene dine bare ved å gjøre subtile endringer.

Her er det grunnleggende formatet for å kjøre en A / B-test:

  • Bestem hvilket problem du vil løse, for eksempel økende konverteringsfrekvenser.
  • Bestem hva du vil sammenligne; for eksempel, ville 10% rabatt konvertere bedre enn gratis frakt?
  • Utfør testen ved å opprette to versjoner av destinasjonssiden, den eneste forskjellen er elementet du vil sammenligne.
  • Finn ut vinneren ved å analysere dataene dine og se gjennom resultatene av A / B-testen din.
  • Gjenta og re-run dine eksperimenter.

Det er bokstavelig talt tusenvis av måter å kutte fra nettstedet ditt for å splitte testen. For noen ideer, ta en titt på dette innlegget av 11 beste praksis for A / B-testing.

Beste mobile landingssider som konverterer

Nå som du er ekspert på å designe og teste, la oss se på noen eksempler på eksemplarer på et mobilt land, skal vi? Du har allerede sett noen av våre favoritter i eksemplene ovenfor, men her er noen av de beste eksemplene vi har funnet.

Todoist

Hvorfor vi elsker det:

  • Høy kontrast
  • Ring til handling mot toppen av siden
  • hvit plass
  • minimal grafikk

Operatør

Hvorfor vi elsker det:

  • Morsom bruk av grafikk
  • Super enkel form
  • Høy kontrast
  • Ingen gigantisk mur av tekst

Zero Financial

Hvorfor vi elsker det:

  • Bruker video, men spiller ikke autoplay
  • Ring til handling er øverst på siden
  • Flott bilder
  • Utmerket bruk av hvit plass

Vivint

Hvorfor vi elsker det:

  • Emosjonell grafikk trekker seg i hjertet
  • Flott kontrast
  • Klikk for å ringe-knappen
  • Kopier er til punktet

Der har du det! 15 beste destinasjoner og optimaliseringsteknikker for landingssiden for å øke konverteringene og engasjementene på mobilen. Hvis du leter etter flere måter å øke mobil konverteringsfrekvensen, kan du sjekke ut disse 19 prøvde metodene.

Jared Ritchey kan være den ledende generasjonspartneren du har latt etter. Bli med oss ​​i dag. Hva venter du på?

Se videoen: Salsa dans for nybegynnere

Like this post? Please share to your friends:
Legg att eit svar

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: