Anpassa för användaren, inte tekniken.
Med ständigt ökande mobila besökare är responsiv webb ett givet val för ny design på företagets sida. Med målsättning att maximera konverteringen och allt fler köp sker via mobil samt surfplatta kan det bli oerhört kostsamt att inte ha en genomtänkt mobilanpassning. Men många gör misstaget att beställa en responsiv version utav sin nuvarande design. Problemet är just att du då får något anpassat för tekniken, inte för den som besöker sidan.
En enkel jämförelse är text på ett A4 papper som nu istället skall skrivas ut på en kvitto remsa. Med rätt principer löser man inte bara problemet utan skapar en bra användarupplevelse.
Styrkan med de mobila plattformarna är pekskärmen och hur man på så sätt interagerar med sidan. Så struktur skapas utifrån det. Texten delas i relevanta stycken. Varje stycke får en rubrik, texten visas enbart vid klick på rubriken. Överst på sidan skapas en dropdown meny med rubrikerna för snabbnavigering.
Med rätt verktyg kan man utan programmeringskunskap göra anpassningar för samtliga typer av skärmar så upplevelsen alltid är optimerad.
Låt oss se tillbaka för en kort stund,
Termen responsiv design kom redan 2010 när en känd webbdesigner och föreläsare skrev ett blogginlägg om webbtekniker för olika enheter – flytande layout, flexibla bilder och ”mediefrågor”. Ett bra sätt att anpassa innehåll och layout efter vilken skärmstorlek som besöken kommer ifrån. Men det fanns redan från start en omognad i sättet att se på responsiv design eller responsiv webb – det är först och främst en teknik – inte ett mål i sig. Under ett antal år var det dessutom en kamp mellan separata mobilanpassade sidor och att bygga allt helt responsivt. Det var så sent som hösten 2015 som det slutliga beskedet kom att responsiv webb var vinnaren.
Ställ rätt krav.
Kravet från beställaren ser ofta ut så här: ”E-handeln ska byggas med responsiv design och fungera på mobil, surfplatta och desktop”. Det är allt! Jag förstår vad beställaren är ute efter, men det blir så fel när kraven ställs på det sättet. Oftast lägger man inte tiden som behövs för att se över innehåll utifrån den mobila besökarens perspektiv. Vilka problem har vi då egentligen löst för den besökare som surfar mobilt? För handen på hjärtat – det är väl för användarna vi gör det – inte för tekniken?
Så vad bör man tänka på när man skall ställa sina krav?
–Vertikalt utrymme, hur ser innehållet på sidan ut när det “kläms ihop”?
Här hänvisar till exemplet med att skriva ut ett A4 med text på en kvitto remsa. Det finns mycket man kan göra för att få innehållet att bli mer komprimerat och lättillgängligt.
Man bör även överväga brytpunkter. Ett exempel är om man har fyra små bilder bredvid varandra på sidan men sätter brytpunkten till två bilder för visning på surfplatta och en bild för mobil. Då får man istället två små bilder bredvid varandra på två olika rader eller en bild på fyra rader beroende på vad man besöker sidan med.
–Hur görs innehållet lättnavigerat för surfplatta och mobil?
Se över Innehåll i menyer. Fler val eller extra meny för att snabbare hitta rätt? Funktioner som produktfiltrering kan behöva få ny position då den utgör större prioritet vid mobil navigering.
–Vad behövs för mobila besökare?
Minimera/ dölj överflödigt innehåll för ett mindre format.
–Maxbredd på sidan.
Att ha hela sidan i automatisk fullbredd är inte alltid optimalt i responsivt format. Tänk på att många även surfar på exempelvis en TV där fullbredd blir överdimensionerat. Även om bredden sätts till max 1000 pixlar blir formatet lika bra för små skärmar om tidigare principer följts.
-Testa E-handeln fullt ut.
Genom att använda ett program som ex BrowserStack kan man testa olika enheter, skärmstorlekar, laddningstider, situationer etc. Gör det även när du arbetar med nytt innehåll på sidan och inte bara vid beställning av ny design.
Slutsats
Mobilanpassa din responsiva E-handel från besökarens och målgruppens perspektiv. Optimera innehållet, funktioner och formgivning utifrån att E-handeln konsumeras från olika skärmstorlekar, olika webbläsare och enheter. Den skall fungera i olika situationer, med olika prestanda och uppkoppling. När du väljer verktyg till din responsiva E-handel är det viktigt att du själv (utan kunskap i kod) kan anpassa innehållet. Dvs. välja hur/ vad som ska visas för mobil, surfplatta och större format. Om du inte kan göra det så kan din investering bli kostsam och under processen tappar du kunder. Kontakta SiteSmart för konsultation eller demo av ett verktyg som klarar kraven.