Blogg

54

Saker att tänka på när du ska lansera en e-handelssajt med responsiv design

Publisert 23 oktober 2013 av Göran Holm

När det är dags att lansera en e-handelssajt med responsiv design bjuder det på en del andra utmaningar än vid lansering av en mobil- eller desktopsajt. Baserat på vår erfarenhet av arbete med e-handelssajter med responsiv design har vi här sammanfattat några saker vi anser är viktiga att ha i åtanke för att ditt arbete ska gå smidigare och som gör att fällor undviks. Detta gäller både layoutmässiga utmaningar och små tekniska tips om hur sajten bör byggas.

 

Header och navigering i kategoristrukturer

En sticky header är viktigt på en responsiv e-handelssajt då sidan oftast blir väldigt lång. Med en sticky header försäkrar du dig om att kunden alltid har enkel tillgång till vidare navigering och varukorgen för en snabb checkout även i mobilen. Det är också viktigt att ge kunden tydlig feedback på att de adderat något till varukorgen. 

En e-handelssajt har oftast många kategorier för att strukturera produkterna på ett bra sätt. I mobilt läge bör man arbeta mer med underkategorier för att strukturera information på ett sätt så besökaren kan navigera smidigt men också intuitivt.

 

Produktsida

På en e-handelssajt får man väldigt många sidor på grund av varje unik produktsida. Detta ökar dock antal sidladdningar vilket inte är optimalt på en mobil enhet. För att minska mängden data som skickas till mobila enheter som kan ha en anslutning med låg bandbredd bör produktinnehåll visas utan att nya sidor måste laddas in. Till exempel kan en produktsida visas på en kategorisida med hjälp av JavaScript. Det gör att användaren kan gå fram och tillbaka mellan kategori och produkter med minimalt antal sidladdningar vilket förbättrar kundupplevelsen.

 

Checkout

Om en enkel checkout är viktigt på en desktop sajt så är den ännu viktigare på en responsiv sajt. Inmatningsfält och knappar måste vara stora, enkla och tydliga. Det absolut bästa är att använda en funktion som gör att kunden kan logga in och alla uppgifter är förutifyllda så att de inte behöver använda tid på att fylla i uppgifterna. Tänk på att betalväxelns sida också måste fungera på ett bra sätt i den responsiva layouten. Denna bör samspela med resten av sajten så inte värdefull konvertering går förlorad för att det plötsligt blev komplicerat för kunden.

 

Bilder

Bilderna är utmanande att behandla rätt på en responsiv sajt då det skiljer sig markant mellan vad en desktop med hög bandbredd klarar av bilder och en mobil med 3G uppkoppling. Här gäller det att prioritera bland bilderna för att optimera både prestanda och kundupplevelse. Bilder som är viktiga för konverteringen måste prioriteras först och alla bilder kanske inte ska visas i mobilvy.

Att använda ’lazy loading’ av bilder på din sajt kan vara ett sätt att förbättra upplevelsen av sajten för enheter som har låg bandbredd/kapacitet. Genom att hitta en bra balans mellan hur många bilder som laddas direkt och hur många bilder som laddas först när de syns på sidan så svarar sajten bra för alla enheter.

Användes hotspots på bilderna måste du också se till att klickytan blir stor nog i mobilt läge så att användaren faktiskt kan klicka på dem.

 

Under arbetets gång

Det är primärt två faser i projektplanen som påverkas extra mycket i utvecklingen av en responsiv sajt. Både designfasen och testfasen blir mer krävande än vanligt.

Designfasen

Något av det mest utmanande med responsiv design är att kunna skala upp och ner mellan olika skärmstorlekar samtidigt som innehållet fortfarande presenteras på ett logiskt sätt. Här gäller det att verkligen tänka igenom olika scenarion på hur innehåll ska stackas och göra designskisser för alla de upplösningar som anses vara viktiga, till exempel maxstorleken på sajten, stående/liggande pad:s, stående/liggande mobil. Bestäm hur layouten på varje sida ska förändras när browserns fönsterbredd minskar. Hur ska de olika delarna av sidan bete sig, till exempel ska bilder skalas ner, döljas eller stackas på höjden? Här är det viktigt att elementen stackas på ett sätt som gör att de budskapsmässigt också hamnar i rätt ordning på alla enheter för att öka konverteringen.

Testfasen

Tänk på att du nu måste testa sajten mot många fler enheter än tidigare. Detta gör att tiden för testning ökar då du tidigare endast haft behov av att testa olika browsers måste du nu också testa X antal skärmupplösningar i alla olika browsers.

Tiden för regressionstestning ökar också då delar av sajten man tidigare kunnat behandla isolerat nu får ett beroendeförhållande av andra delar.

Glöm heller inte att testa interaktionselementen på sajten. En ändring kan påverka hur olika actions fungerar eller responderar vilket gör att man måste vara uppmärksam även på detta och inte bara på layouten.

 

Att arbeta fram en e-handelsplats med responsiv design är en utmanande uppgift som kräver mycket eftertanke och förarbete. Dock är det väl värt i slutändan då du kommer erbjuda kunderna en mer helhetlig upplevelse samtidigt som du får en sajt som är mer effektiv att arbeta med. Vi hoppas detta är några tips du kan ha nytta av om du själv sitter i processen att arbeta fram en sajt med responsiv design.

 

Har du några egna tips dela dem gärna i kommentarsfältet nedan.

0