De bästa mobila Målsidesdesigntips du inte hittar någon annanstans

det finns många resurser online som adresserar mobila målsidesdesigner efter klick, men det finns inte många specifika designinstruktioner hur man faktiskt bygger en högkonverterande sida.

vilken strukturlayout rekommenderas för mobil visning? Hur många pixlar ska knappar vara? Hur många pixlar ska separera element? Ska du använda” hover ” – effekten? Ska etiketter vara inuti eller utanför?

mitt namn är Cosmin Serban, chef för designtjänster på Instapage. Du kanske frågar, Vad gör Cosmin kvalificerad att skriva på mobil efter klick målsida design?

jag har utbildat kunder om bästa praxis för att utforma och strukturera sina målsidor efter klick för att förbättra deras omvandlingsfrekvenser. Jag har också:

  • granskat över 1,000 post-click målsidor
  • samarbetar med kunder för att säkerställa att deras budskap kommer över och deras besökare har en bra upplevelse som så småningom leder till en konvertering

dessutom var jag en del av teamet som har utvecklat över 200 optimerade mallar som används för att skapa och lansera över 200,000 post-click målsidor, du kan hitta mallarna här.

mobil efterklick målsidesdesign: Vad du ska veta innan du börjar

vissa begrepp i den här artikeln utvecklades internt när du skapade vårt mallbibliotek. Det betyder inte nödvändigtvis att alla dessa tips ska gälla för varje enskild målsida efter klick du skapar. Varje landningssida efter klick har sin egen unika uppsättning utmaningar, men att förstå dessa grundläggande begrepp bör definitivt hjälpa dig att ge en bättre upplevelse för alla som besöker från sin mobila enhet.

Låt oss börja med de viktigaste skillnaderna mellan skrivbordet och mobilupplevelsen.

struktur

även om det inte verkar som det i början av ditt projekt är det mer kritiskt att ha en struktur på plats där du levererar rätt grupp av element vid rätt tidpunkt än du tror.

det första som kommer att tänka på är det helt andra sättet våra besökare kommer att skanna innehållet på mobila sidor. Vi har alla hört talas om F-mönstret eller Z-mönstret på stationära landningssidor efter klick, men vad heter mönstret för Mobil? Vi kommer inte nödvändigtvis att ge det ett namn, men troligtvis är det väldigt linjärt. Att rulla upp och ner är det enda sättet att förstå vad den målsidan efter klick erbjuder:

eftersom det är en av de viktigaste begränsningarna hur besökare interagerar med en landningssida efter klick, föreslår vi att du håller dig till en kolumnlayout istället för att försöka klämma in mycket innehåll horisontellt. (Ingen gillar att nypa och zooma.)

på skrivbordet tänker digitala marknadsförare oftast på placeringen av varje enskilt element och den inverkan det har. På mobilen är det bättre att göra ett skifte och tänka på grupper av element och hur du staplar dem ovanpå varandra för maximal effekt.

denna jämförelse sida vid sida visar hur en stationär sida är strukturerad jämfört med en mobil sida:

mobile post-click landing page design jämförelse

vi rekommenderar att du går från vänster till höger och placerar varje grupp av element under varandra. Låt oss ta rubrikområdet (ovanför vikningen) till exempel. Vi har logotypen högst upp, följt av gruppen gjord av huvudrubriken och stödjande rubrik, sedan har hela formulärrutan gruppen under.

möjligheten att gruppera element skapar en inbyggd mobil responsiv uppsättning objekt. Alternativt kan grupper konfigureras för att låsa bildförhållandet för komplexa arrangemang för att behålla sina exakta proportioner när de konverteras till mobilversionen av din sida.

Mobile Aspect Ratio Lock håller dina lagrade grupperingar ihop och låser bildförhållandet, oavsett om de är på en stationär eller mobil layout.

alla två eller flera element som är nära besläktade eller kompletterar varandra bör alltid hålla ihop. I den här situationen skulle det inte vara meningsfullt att ha formulärrutan högst upp på sidan, så konceptet att ha formen i området ovanför vikningen är inte idealiskt. Att ge besökaren sammanhanget för vad de registrerar sig först är viktigare än att bara ge dem ett sätt att agera så snabbt som möjligt.

Laddningstid

oavsett vilken enhet dina besökare använder är sidladdningshastigheten mycket viktig. Tänk på att de flesta av dina besökare kommer att använda sina mobildatabegränsningar och medföra kostnader för att se din sida, så var försiktig med vilken typ av grafik eller element du lägger till på sidor. Tänk dig att komma åt en sida och spela upp en video automatiskt.

om du behöver många animationer för att stödja innehåll, föreslår vi att du håller fast vid enkla bilder för Mobil. Med enkla menar jag att du måste skapa anpassade bakgrundsbilder för ett visst avsnitt. Att använda ett fotoredigeringsprogram för att justera storleken eller layouten på fotot kan bara vara värt den extra tid som krävs när det betyder att du kan påskynda dina sidor.

samma sak med bakgrundsbilder, eftersom du inte behöver en bild som är 2000 pixlar bred som är 300 kB för att ladda upp i din sektion, föreslår jag att du får en designer för att skapa en skräddarsydd bild som du kan ställa in som din sektionsbakgrund:

mobile post-click landing page design images

för det mesta att hålla mobilsidan så enkel som möjligt är alltid en bra ide. Om du till exempel har flera grafiska element som förmedlar samma meddelande, Visa bara ett på mobilen.

eftersom de flesta mobiltelefoner kommer att anpassa sig till storleken på innehållsområdet i mobilbyggaren är en bra tumregel att ha en bild som är minst 400 pixlar bred för att säkerställa att det inte finns några tomma utrymmen på sidorna.

Bygg en AMP-målsida efter klick

att skapa en positiv målsida efter klick på mobilen är viktigt eftersom målsidan efter klick är där konverteringar händer. Om din sida laddas för långsamt eller skapar en ojämn upplevelse från annons till efterklick, kommer besökarna att studsa.

tänk sedan på att Google tittar på målsidesupplevelse efter klick som en faktor för att bestämma annonsrankning, vilket i slutändan bidrar till din klickfrekvens. Lägg allt detta upp och varumärken har en stor fråga på sina händer. Lyckligtvis finns AMP-ramverket.

AMP-sidor är särskilt attraktiva för annonsörer eftersom de möjliggör mer övertygande mobila användarupplevelser genom nästan ögonblickliga laddningstider och smidig rullning, samtidigt som de stöder viss styling och anpassning av varumärke. Eftersom AMP begränsar HTML / CSS och JavaScript, möjliggör det snabbare efter klick målsida rendering. Till skillnad från traditionella mobila sidor cachas AMP-sidor automatiskt av Google AMP-Cache för snabbare laddningstider i Google.

AMP-ramverkets fördelar uppväger verkligen dess begränsningar:

  • snabbare sidladdningshastighet på mobila enheter
  • bättre användarupplevelse för mobil surfning
  • använda AMP-sidor kan hjälpa till att öka ditt kvalitetsresultat
  • Google kommer att gynna sidor som använder AMP

från och med juni 2018 erbjuder Instapage AMP-målsidor efter klick där digitala marknadsförare kan bygga AMP-kompatibla sidor i appen utan utvecklare. För i slutändan, om sidbelastningen inte är omedelbar, är den inte tillräckligt snabb.

14-day trial Instapage skapa ny sida

Designing for touch

en av dina största utmaningar med mobile post-click målsida design är att se till att det är så enkelt som möjligt för besökare att vidta åtgärder. Den åtgärden kan vara en formulärinsändning eller ett enkelt tryck på en knapp. Du förväntar dig att de flesta kommer att göra några justeringar, men det är inte alltid fallet.

vi har alla upplevt sidor där det är mycket svårt att knacka på något eller upplevelsen inte är skräddarsydd för mobila användare. Speciellt textlänkar-att justera storleken på alla textelement som är hyperlänkade är till stor hjälp. Din besökare ska inte behöva zooma in för att vidta önskad åtgärd.

knappar

men det största problemet vi har märkt är storleken på knapparna på landningssidor efter klick. Vårt team rekommenderar att du utformar knappar som är minst 70 pixlar höga och inte är rädda för att göra dem så breda som möjligt, men sträck dem aldrig hela bredden (400 pixlar) eftersom de kan förväxlas med en liten sektion.

hover-effekten är en fin touch för skrivbordssidor eftersom den signalerar till besökaren att de kan vidta åtgärder på det specifika elementet. På mobilen, genom, svävar effekter är överflödiga.

marginaler

för marginaler rekommenderar vi att du håller en säker zon på minst 20 pixlar vertikalt fri på varje sida och undviker visuell spänning som kan uppstå med element för nära sidorna på telefonskärmen.

blanksteg är något som är lika viktigt för mobila sidor som det är för stationära sidor. De grundläggande begreppen gäller fortfarande, Försök bara att rymma allt och inte ha element riktigt nära varandra. Att göra detta hjälper dig att undvika visuell spänning.

att ha konsekventa marginaler kommer definitivt att leda till en bättre användarupplevelse. Vårt team ser vanligtvis till att ha minst 20 till 40 pixlar mellan varje element. Hur mycket du bestämmer är upp till dig eftersom varje block kan ha en unik struktur av element.

det är ganska subjektivt, men när du har upprättat en regel försöker du replikera den genom hela sidan och det ger det ett mer modernt utseende:

läsbarhet

man skulle kunna tro att det är en självklarhet att kunna läsa innehållet, men för många gånger har vi sett målsidor efter klick där texten antingen är för liten eller för stor. Att hitta en bra balans är ganska lätt, en bra tumregel för teckenstorleken som används för vissa element är:

  • Huvudrubrik: 28 pixlar
  • underrubrik: 22 pixlar
  • stycken: 17 pixlar
  • övriga detaljer: 15 pixlar

Naturligtvis kan du justera dessa storlekar eftersom det inte finns en storlek som passar alla behov. Det bör dock fungera som en bra baslinje framåt med att utforma en mobil målsida efter klick.

ett annat objekt som är värt att nämna är linjehöjden med textelement.

i vissa situationer på skrivbordet är det vettigt att ha 1.0 eller till och med 1.2, när du bygger din mobila målsida efter klick, se till att linjehöjden för textelement är minst 1.4.

Bottom line: ju mindre teckenstorlek, desto större bör linjehöjden vara.

formulär

eftersom formulär är den viktigaste delen av de flesta målsidor efter klick är det viktigt att göra det enkelt för människor att skicka in sin information.

på våra mobilsidor sträcker vi vanligtvis formulärfälten så mycket som möjligt horisontellt och undviker situationer som att ha ett formulärfält och knappen på samma rad. Det är bara en dålig upplevelse:

en annan sak som kommer ut mycket ofta handlar om former som har många fält.

den bästa praxis som vårt team upptäckte är att när en sida har mer än 2 formulärfält för att ställa in etikettpositionen till utsidan, vilket gör det lättare för besökare att veta vilken information som behövs istället för att försöka komma ihåg vad man ska mata in:

öka dina mobilkonverteringar från och med idag

precis som skrivbordssidor handlar mobil design efter klick om användarupplevelse först och vad som kommer att övertyga människor att engagera sig och konvertera. Utan att ta hänsyn till förslagen ovan kommer din mobila omvandlingsfrekvens sannolikt att drabbas och människor kommer att studsa.

överväg att implementera rekommendationerna och se hur dina målsidor efter klick förvandlas till mycket optimerade konverteringstillgångar. Få en Instapage AMP demo idag.

Lämna ett svar

Din e-postadress kommer inte publiceras.