De beste tips voor het ontwerpen van mobiele bestemmingspagina ‘ s U vindt nergens anders

er zijn veel online bronnen die mobiele bestemmingspagina-ontwerpen aanpakken, maar er zijn niet veel specifieke ontwerpinstructies hoe u een pagina met een hoge omzet kunt bouwen.

welke structuurindeling wordt aanbevolen voor mobiel bekijken? Hoeveel pixels moeten knoppen zijn? Hoeveel pixels moeten elementen scheiden? Moet je het “hover” – effect gebruiken? Moet het formulier etiketten binnen of buiten?

mijn naam is Cosmin Serban, directeur Design Services bij Instapage. Je vraagt je misschien af, wat maakt Cosmin gekwalificeerd om te schrijven op mobiele post-click landing page design?

ik heb klanten opgeleid over best practices bij het ontwerpen en structureren van hun post-click landingspagina ’s om hun conversieratio’ s te verbeteren. Ook heb ik:

  • beoordeeld meer dan 1.000 post-click landing pages
  • samen met klanten om ervoor te zorgen dat hun boodschap wordt doorgegeven en hun bezoekers hebben een goede ervaring die uiteindelijk leidt tot een conversie

verder maakte ik deel uit van het team dat meer dan 200 geoptimaliseerde sjablonen heeft ontwikkeld voor het maken en lanceren van meer dan 200.000 post-click landing pages, u kunt de sjablonen hier vinden.

ontwerp van mobiele Landingspagina na klikken: Wat u moet weten voordat u begint

sommige concepten in dit artikel zijn intern ontwikkeld bij het maken van onze sjabloonbibliotheek. Dat betekent niet noodzakelijkerwijs dat al deze tips moeten gelden voor elke post-click landing page die u maakt. Elke post-click landing page heeft zijn eigen unieke set van uitdagingen, maar het begrijpen van deze basisbegrippen moet zeker helpen u een betere ervaring voor iedereen die een bezoek vanaf hun mobiele apparaat.

laten we beginnen met de belangrijkste verschillen tussen de desktop-en mobiele ervaring.

structuur

hoewel het niet zo lijkt aan het begin van uw project, is het belangrijker om een structuur te hebben waar u de juiste groep elementen op het juiste moment levert dan u denkt.

het eerste wat in je opkomt is de totaal andere manier waarop onze bezoekers de inhoud op mobiele pagina ‘ s scannen. We hebben allemaal gehoord over de F-patroon of Z-patroon op desktop post-click landing pages, maar wat is het patroon voor mobiel genoemd? We zullen het niet per se een naam geven, maar waarschijnlijk is het erg lineair. Scrollen op en neer is de enige manier om te begrijpen wat die post-click landing page biedt:

aangezien dat is een van de belangrijkste beperkingen hoe bezoekers omgaan met een post-click landing page, raden we vasthouden aan een één-kolom lay-out in plaats van te proberen te proppen in een veel inhoud horizontaal. (Niemand houdt van knijpen en zoomen.)

op desktop denken digitale marketeers meestal na over de plaatsing van elk afzonderlijk element en de impact ervan. Op mobiel is het beter om een shift te maken en na te denken over groepen elementen en hoe je ze op elkaar stapelt voor maximale impact.

deze vergelijking laat zien hoe een desktoppagina gestructureerd is ten opzichte van een mobiele pagina:

mobile post-click landing page design comparison

we raden aan van links naar rechts te gaan en elke groep elementen onder elkaar te plaatsen. Laten we bijvoorbeeld de koptekst nemen (boven-de-vouw). We hebben het logo aan de bovenkant, gevolgd door de groep gemaakt van de belangrijkste kop en ondersteunende kop, dan hebben de hele formulier box groep eronder.

de mogelijkheid om elementen te groeperen creëert een oorspronkelijk mobiele responsieve verzameling objecten. Als alternatief kunnen groepen worden geconfigureerd om de beeldverhouding van complexe arrangementen te vergrendelen om hun exacte verhoudingen te behouden wanneer ze worden geconverteerd naar de mobiele versie van uw pagina.

Mobile Aspect Ratio Lock houdt uw gelaagde groepen bij elkaar en vergrendelt de aspect ratio, of ze nu op een desktop of mobiele lay-out staan.

twee of meer elementen die nauw met elkaar verband houden of elkaar aanvullen, moeten altijd aan elkaar blijven kleven. In deze situatie zou het niet zinvol zijn om de vorm doos rechts bovenaan de pagina, dus het concept van het hebben van de vorm in de boven-de-vouw gebied is niet ideaal. Het geven van de bezoeker de context van wat ze zich eerst aanmelden is belangrijker dan hen gewoon een manier om zo snel mogelijk te handelen.

laadtijd

ongeacht het apparaat dat uw bezoekers gebruiken, de laadsnelheid van de pagina is erg belangrijk. Houd er rekening mee dat de meeste van uw bezoekers hun mobiele data beperkingen zullen gebruiken en kosten zullen maken om uw pagina te zien, dus wees voorzichtig met wat voor soort afbeeldingen of elementen u toevoegt aan pagina ‘ s. Stel je voor toegang tot een pagina en het hebben van een video automatisch af te spelen.

als u veel animaties nodig hebt voor ondersteunende content, raden we aan om eenvoudige images voor mobiel te gebruiken. Met eenvoudige, ik bedoel dat je nodig hebt om aangepaste achtergrondafbeeldingen voor een bepaalde sectie te maken. Met behulp van een fotobewerkingssoftware om de grootte of lay-out van de foto aan te passen, is de extra tijd die nodig is misschien wel de moeite waard wanneer het betekent dat u uw pagina ‘ s kunt versnellen.

hetzelfde geldt voor achtergrondafbeeldingen, aangezien u geen afbeelding met een breedte van 2000 pixels en een breedte van 300kb nodig hebt om in uw sectie te laden, stel ik voor dat een ontwerper een op maat gemaakte afbeelding maakt die u kunt instellen als achtergrond voor uw sectie:

mobile post-click landing page design images

meestal is het een goed idee om de mobiele pagina zo eenvoudig mogelijk te houden. Als u bijvoorbeeld meerdere grafische elementen hebt die dezelfde boodschap overbrengen, toont u er één op mobiel.

aangezien de meeste mobiele telefoons zich zullen aanpassen aan de grootte van het inhoudgebied in de mobile builder, is een goede vuistregel om een afbeelding te hebben die ten minste 400 pixels breed is om ervoor te zorgen dat er geen lege ruimtes aan de zijkanten zijn.

Maak een AMP post-click landing page

het creëren van een positieve post-click landing page op mobiel is essentieel omdat de post-click landing page is waar conversies plaatsvinden. Als uw pagina te langzaam laadt of een onsamenhangende ervaring creëert van advertentie tot post-click, zullen bezoekers stuiteren.

bedenk dan dat Google post-click landing page experience beschouwt als een factor om ad rank te bepalen, wat uiteindelijk bijdraagt aan uw click-through rate. Tel dat allemaal op en merken hebben een groot probleem op hun handen. Gelukkig bestaat het AMP framework.Met name AMP-pagina ‘ s zijn aantrekkelijk voor adverteerders omdat ze meer boeiende mobiele gebruikerservaringen mogelijk maken door middel van bijna onmiddellijke laadtijden en soepel scrollen, terwijl ze nog steeds enige aanpasbaarheid van styling en branding ondersteunen. Aangezien AMP HTML/CSS en JavaScript beperkt, zorgt het voor een snellere na-klik landing page rendering. In tegenstelling tot traditionele mobiele pagina ’s worden AMP-pagina’ s automatisch gecached door Google AMP Cache voor snellere laadtijden in Google.

de voordelen van het AMP-raamwerk wegen echt op tegen de beperkingen ervan:

  • snellere laadsnelheid van pagina ’s op mobiele apparaten
  • betere gebruikerservaring voor mobiel browsen
  • het gebruik van AMP pages kan helpen uw kwaliteitsscore
  • te verhogen Google zal pagina’ s bevoordelen die AMP

gebruiken vanaf juni 2018 biedt Instapage amp post-click landingspagina ’s waar digitale marketeers AMP-compatibele pagina’ s kunnen bouwen binnen de app zonder een ontwikkelaar. Omdat, op het einde, als pagina laden is niet direct, het is niet snel genoeg.

14-Instapage Maak een nieuwe pagina

ontwerpen voor touch

een van uw grootste uitdagingen met het ontwerpen van mobiele Landingspagina na klikken is ervoor zorgen dat het zo gemakkelijk mogelijk is voor bezoekers om actie te ondernemen. Die actie kan een formulier indiening of een eenvoudige tik op een knop. Je zou verwachten dat de meeste mensen gaan om een aantal aanpassingen te maken, maar dat is niet altijd het geval.

we hebben allemaal pagina ‘ s ervaren waar het erg moeilijk is om ergens op te tikken of waar de ervaring niet is afgestemd op mobiele gebruikers. Vooral tekstlinks-het aanpassen van de grootte van een tekstelement dat is hyperlinkt is zeer nuttig. Uw bezoeker hoeft niet in te zoomen om de gewenste actie te ondernemen.

knoppen

maar het grootste probleem dat we hebben opgemerkt is de grootte van de knoppen op landingspagina ‘ s na klikken. Ons team adviseert het ontwerpen van knoppen die minstens 70 pixels hoog zijn en wees niet bang om ze zo breed mogelijk te maken, maar rek ze nooit de volledige breedte (400 pixels) omdat ze kunnen worden verward met een klein gedeelte.

het hover effect is een leuke touch voor desktop pagina ‘ s, omdat het Signalen aan de bezoeker kunnen ze actie ondernemen op dat bepaalde element. Op mobiele, door, zweven effecten zijn redundant.

marges

voor marges raden we aan een veilige zone van ten minste 20 pixels verticaal vrij te houden aan elke zijde en visuele spanning te vermijden die kan optreden met elementen te dicht bij de zijkanten van het telefoonscherm.

witruimte is iets dat net zo belangrijk is voor mobiele pagina ’s als voor desktop pagina’ s. De basisbegrippen zijn nog steeds van toepassing, probeer gewoon alles uit de ruimte te halen en geen elementen echt dicht bij elkaar te hebben. Door dit te doen zal u helpen visuele spanning te voorkomen.

het hebben van consistente marges zal zeker leiden tot een betere gebruikerservaring. Ons team zorgt er meestal voor dat er minstens 20 tot 40 pixels tussen elk element zitten. Hoeveel je beslist is aan jou, aangezien elk blok een unieke structuur van elementen kan hebben.

het is vrij subjectief, maar als je eenmaal een regel hebt ingesteld, probeer het dan over de hele pagina te repliceren en dat geeft het een moderner uiterlijk.:

Readability

je zou denken dat het duidelijk lezen van de inhoud een gegeven is, maar te vaak hebben we post-click landing pages gezien waar de tekst te klein of te groot is. Het vinden van een goede balans is vrij eenvoudig, een goede vuistregel voor de lettergrootte gebruikt voor bepaalde elementen zijn:

  • hoofdkop: 28 pixels
  • Subheadline: 22 pixels
  • alinea ‘ s: 17 pixels
  • overige details: 15 pixels

natuurlijk kunt u deze maten aanpassen omdat er niet één grootte is die aan alle behoeften voldoet. Echter, het moet dienen als een goede basislijn vooruit te gaan met het ontwerpen van een mobiele post-click landing page.

een ander item dat het vermelden waard is, is de regelhoogte met tekstelementen.

in bepaalde situaties op het bureaublad is het zinvol om 1.0 of zelfs 1.2 te hebben, wanneer u uw mobiele post-click landing page bouwt, Zorg ervoor dat de regelhoogte voor tekstelementen ten minste 1,4 is.

Bottom line: hoe kleiner de lettergrootte, hoe groter de regelhoogte moet zijn.

formulieren

aangezien formulieren het belangrijkste onderdeel zijn van de meeste post-click landing pages, is het van cruciaal belang dat mensen hun informatie gemakkelijk kunnen indienen.

op onze mobiele pagina ‘ s rekken we meestal de formuliervelden zoveel mogelijk horizontaal en voorkomen situaties zoals het hebben van een formulierveld en de knop op dezelfde regel. Dat is gewoon een slechte ervaring.:

een ander ding dat heel vaak naar voren komt is het omgaan met vormen die veel velden hebben.

de beste praktijk die ons team ontdekte is dat wanneer een pagina meer dan 2 formuliervelden heeft om de labelpositie naar buiten in te stellen, waardoor het voor bezoekers gemakkelijker wordt om te weten welke informatie nodig is in plaats van te proberen te onthouden wat ze moeten invoeren:

Verhoog uw mobiele conversies vanaf vandaag

net als bij desktop pages draait het bij het ontwerpen van mobiele landingspagina ‘ s alleen om gebruikerservaring en wat mensen zal overtuigen om deel te nemen en te converteren. Zonder rekening te houden met de bovenstaande suggesties, uw mobiele conversieratio zal waarschijnlijk lijden en mensen zullen stuiteren.

overweeg de aanbevelingen te implementeren en zie hoe uw landingspagina ‘ s na het klikken worden omgezet in sterk geoptimaliseerde conversieactiva. Krijg een Instapage amp demo vandaag.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.