Delar av mobilvänlig e-handel

Mobile är den nya kungen av e-handel. Förra semestersäsongen gjordes nästan 30 % av köpen från mobila enheter.

Om du tittar på ditt Google Analytics-konto kommer du att kunna se hur många av dina webbplatsbesökare som kommer in på mobila enheter.

Genom att titta på data kan du se om din mobilsajt fungerar bra.

Ser du en hög avvisningsfrekvens och lägre siffror för sidvisningar, konverteringar och försäljningar från mobilanvändare? Om svaret är ja, är det dags att förbättra din webbplats för att göra dina besökare nöjda.

Följ dessa steg för att skapa en mobilvänlig e-handelswebbplats:

Design för mobila skärmar

Du kan inte skapa en bra mobilvänlig design för din e-handelsbutik om du inte är bekant med detaljerna för mobil display.

Här är några saker du behöver veta:

Olika smartphonestorlekar –

Olika smartphones har olika skärmstorlekar. Vanligtvis varierar de mellan 320 px till 400 px tvärsöver (även om gamla iPhone-modeller bara mäter 240 px).

Surfplattor är 480 px till 800 px i diameter när de hålls som en bok, och 1280 px i diameter när de hålls som en tv.

Det finns med andra ord ett antal skärmtyper, allt från 320 px till 1280 px. Så, hur skapar du en design som passar perfekt på alla dessa olika skärmar?

Sanningen är att du inte behöver. Du kan helt enkelt fokusera på de mest populära enheterna som dina besökare använder för att surfa på din webbplats.

Använd Google Analytics för att prioritera enheter –

Visste du att du kan använda Google Analytics för att ta reda på vilka enheter folk använder för att surfa på din webbplats?

För att göra detta, gå helt enkelt till Google Analytics och klicka på Målgrupp -> Mobil -> Enheter:

Sedan ser du en lista över de mest populära enheterna och trafiken som genereras från var och en.

I det här fallet är den mest populära enheten iPhone, följt av iPad.

Separat mobilsida

Att ha en mobilvänlig e-handelssida innebär också att du skapar en helt separat webbplats för dina mobilanvändare.

Så här gör du det:

Förse mobilanvändare med olika HTML –

En annan webbplats betyder att du måste ladda en helt ny HTML, inte bara en annan CSS som du skulle göra med en responsiv webbplats.

Värd på en underdomän eller undermapp –

Din mobilwebbplats måste finnas på en underdomän, som m.domain.com, eller en undermapp, som domain.com/mobile, för att kunna läsa in dess olika sidor.

Det finns också ett tredje alternativ – med samma URL, men med dynamisk visning så att den kommer att kunna ladda den nya HTML-koden.

Om du väljer att använda olika webbadresser, kom alltid ihåg att hålla dem parallella (www.domain.com/first-page och m.domain.com/first-page).

Utforska : Bästa progressiva webbappar

SiteSpeed

Laddningshastigheten är viktig för alla webbplatser, men den är ännu mer avgörande för mobila.

När människor surfar från sina smartphones använder de ofta sin 3G-anslutning, som laddar sidor långsammare än Wi-Fi.

Du måste också tänka på det faktum att processorkraften hos smartphones är långsammare än hos de flesta stationära datorer.

Därför bör du fokusera på att optimera din mobilsajt så att den laddas snabbare.

Så här gör du:

Använd PageSpeed ​​Insights för att hitta problem på din mobila webbplats –

Det bästa sättet att lära sig hur du ytterligare optimerar din mobila e-handelssida är att använda Googles verktyg PageSpeed ​​Insights.

Skriv bara in din URL och klicka på “Analysera”.

Här är ett exempel med Zalando.co.uk.

På fliken “Mobil” kommer du att se en lista över frågor på webbplatsen, rangordnade från viktigast till minst pressande.

PageSpeed ​​Insights visar till och med hur du åtgärdar varje problem; komma åt den här funktionen genom att klicka på “Visa hur man fixar.”

Ersätt bilder med CSS3 –

Bilder tar lång tid att ladda, och att ha för många av dem på sidan kommer att sakta ner din webbplats.

För att snabba upp din webbplats kan du helt enkelt ta bort några av bilderna och ersätta dem med CSS3-filer. Knappar och andra UI-element kan byggas helt på CSS3.

Titta på mobilknapparna på Amazon.com. Ren CSS; inga bilder.

För bilder som du inte kan ta bort, prova att kombinera dem med CSS Sprites.

Dela upp innehåll på flera sidor –

Behåll ditt kärninnehåll på din huvudsida och länka alla detaljer till separata sidor för att snabba upp din mobilsajt.

Om vi ​​går tillbaka till Amazon-exemplet har de placerat all ytterligare information om nya och begagnade erbjudanden, beskrivning och detaljer, och kundrecensioner finns på separata sidor.

Detta eliminerar HTTP-förfrågningar för 3 bilder och minskar HTML-filstorleken till 45 KB.

Läsvärd : Exempel på optimering av produktbild för e-handel för att öka omvandlingarna

Håll omdirigeringar till ett minimum –

Varje ytterligare omdirigering kommer att göra din webbplats långsammare, särskilt på mobila enheter.

Amazon har bara en omdirigering, vilket resulterar i 0,4 sekunders fördröjning.

Å andra sidan har Dells webbplats två omdirigeringar, vilket resulterar i en fördröjning på 1,2 sekunder.

Varje gång webbläsaren tar emot en omdirigering måste den bearbeta den lokalt och sedan skicka tillbaka den nya URL:en till servern igen. Allt detta sker över ett mobilnät med varierande hastigheter, vilket betyder att det kan sakta ner saker och ting. Mycket.

Var kongruent med din skrivbordswebbplats

I sin önskan att göra en webbsida mobilanpassad glömmer utvecklarna ofta bort att de ska få mobilversionen att kännas och se ut som skrivbordssidan.

Du vill inte att användarna ska undra om de surfar på samma sida eller göra dem arga för att de inte kan komma åt en del av ditt innehåll.

För att göra din mobilwebbplats kongruent med din datorwebbplats, se till att:

Använd samma varumärke –

Din mobilsajt ska ha din logotyp och den måste använda samma huvudfärger. Designen måste se ut som på skrivbordssidan, men med en mer minimalistisk känsla.

När användaren tittar på den mobila versionen bör de tänka: “Det känns och ser ut precis som skrivbordssidan, men allt innehåll får plats på skärmen.”

Behåll samma huvudfunktionalitet –

Gör inte dina mobilbesökare arga för att de inte kan komma åt viss funktionalitet eller sidor från din webbplats bara för att de surfar från en liten skärm.

Se till att du tillåter dem att:

• använd din webbplatss sökmotor
• bläddra igenom produktkategorier
• besöka kundvagnen
• läs information om frakt, leverans, returer
• komma åt din kontaktinformation

Använd analysverktyg som Google Analytics, CrazyEgg och KISSmetrics för att lära dig hur dina mobilanvändare använder din webbplats; detta låter dig lära dig vilka funktioner som är viktigast för dem.

Mobil navigering

Tyvärr fungerar inte skrivbordsnavigering riktigt för mobilen. De flesta menyer är för stora och passar inte på mindre skärmar.

Det är därför du alltid bör följa dessa tips:

Undvik stora menyer –

Detta tar för mycket tid och är mycket besvär för användaren. Istället bör du fokusera på att skapa en navigeringsmeny anpassad för mobilen.

Läsvärd : E-handel Traffic Woes? Tillgripa dessa tekniker

Använd 3-radsmetoden –

Detta är ett utmärkt alternativ för mobilvänlig navigering. Faktum är att det används av företag som Facebook, ModCloth & New York Times.

Om du tittar på ModClouts navigeringsmeny ser du att den faktiskt har 4 rader:

När du trycker på 1 öppnar du huvudnavigeringsmenyn, designad speciellt för mobila och vertikala skärmar.

När du trycker på 2 går du tillbaka till startsidan.

När du trycker på 3 öppnar du sökfältet.

Och när du trycker på 4 går du till din varukorg

Design för beröring, inte klick

När människor surfar från en smartphone har de ingen mus. Det betyder att de inte kan använda alternativ som vänster- och högerklick.

Faktum är att folk inte klickar alls. Istället sveper och knackar de med fingrarna, vilket totalt förändrar spelet.

För att skapa en mobilvänlig design bör du designa den för beröring, inte klick.

Så här gör du det:

Ge tillräckligt med utrymme för fingrar –

Fingrar är inte lika exakta som muspekare. De tar mer plats på skärmen. Det är därför mobilanvändare vanligtvis behöver mer utrymme för att surfa.

Se till att du alltid har ett utrymme som mäter 28 x 28 px runt länkarna för att se till att andra kan trycka på dessa länkar.

Även om du ständigt kan spåra rörelsen av en muspekare, med pekskärmar, vet du inte vad dina användare gör förrän de trycker på skärmen.

Ge feedback när skärmen berörs –

Har någon signal som visar dina användare när en knapp har tryckts. Ofta är användare inte medvetna om om de faktiskt har aktiverat en knapp på grund av en långsam anslutning.

Detta gör att de klickar en andra gång när sidan redan laddas.

Lös det här problemet genom att visa en knappindragning eller markera en länkad ruta.

Använd knappar –

Besökare måste förstå var de behöver klicka för att gå till nästa steg. Från mobila enheter finns det inga “svävbara” områden för att indikera vilka områden som är klickbara, så du måste göra detta tydligt.

Det bästa sättet att göra det är helt enkelt att använda knappar för att definiera var användare kan trycka och svepa för att aktivera en länk eller åtgärd.

Omdesigna rullgardinsmenyer –

De fungerar fortfarande på mobilen, men du måste designa om dem lite. På stationära versioner sker aktiveringen av en rullgardinsmeny vanligtvis när användaren håller muspekaren över den, men eftersom du inte kan göra det på mobilen måste du ändra den till pekaktiverad.

Menyn ska också visa en tydlig separation mellan alternativen.

Minimera textinmatning –

Att skriva är långsammare och svårare på mobilen. För att göra din webbplats mobilanpassad, minimera texten som folk behöver fylla i. Se till att komma ihåg deras leveransadress och kreditkortsuppgifter.

Du måste också komma ihåg att deras virtuella tangentbord kommer att ta upp halva skärmen. Du kommer att hjälpa dina besökare mycket genom att dela upp dina formulär mellan flera sidor som bara tar upp den övre halvan av skärmen.

Använd mobilspecifika funktioner –

Din mobilsajt ger dig ytterligare möjligheter som du bör dra nytta av genom att lägga till extra funktioner. Till exempel: du kan lägga till klicka för att ringa på ditt mobilnummer och ange din adress i kartlänken.

Förenkla produktsidor

När folk når en produkt de är intresserade av är de bara ett steg bort från ett köp. En bra produktsida kommer att uppmuntra användaren att köpa nu, medan en dålig kommer att stöta bort dem.

Det är därför produktsidor är en av de viktigaste sidorna för alla e-handelssidor.

De är ännu viktigare när det kommer till mobilversioner, där det finns fler möjligheter att skruva på och knuffa bort kunden.

Så här skapar du en mobilvänlig produktsida för e-handel:

Använd en tunn rubrik –

Rubriken är den övre delen av sidan som ansvarar för varumärkesidentitet och navigering. Om du gör den för bred kommer den att ta för mycket plats på skärmen (vilket inte är nödvändigt).

Jämför rubrikerna för dessa två webbplatser.

Lägg märke till hur webbplatsen till höger har minimerat rubriken genom att använda ikoner istället för en textmeny.

Prioritera din uppmaning –