Tag Archives: responsiv design

Går inte längre blunda för mobila enheter

 

 

Andelen mobila surfare ökar hela tiden och det är dags för oss som jobbar med de sajter som man besöker att bemöta besökarna med något som är anpassat för dem. mobila-besokare

Blå kurva=antal besökare, röd kurva=varav mobila besökare. Från pålyset.se.

Grafen visar med den blå kurvan det totala antalet besökare och den röda linjen är de besökarna som är mobila besökare. Det talar sitt tydliga språk att andelen mobila surfare nu är uppe i närmare 30% av besökarna trots att min e-handel inte på något vis har anpassats för att bjuda dem på en bättre upplevelse.

Våra mobila besökare kommer från olika typer av enheter. Allt fler kommer från iPad och Android-baserade surfplattor. Dessa har alltså rätt stora bildskärmar, men är ändå inte riktigt i samma läge som en som sitter framför en stor bildskärm vid en dator.

Jag skulle nog säga att man många gånger har en rätt bra bredd på surfplattorna, men höjden gör att man på väldigt många sidor, inklusive min egen, inte kommer åt nästan några produkter alls utan att scrolla nedåt på skärmen.

Vad kan man säga om mobila surfare?

En mobil surfare som måste sitta och zooma och scrolla väldigt mycket för att tillgodogöra sig innehållet på sidan kommer mest troligt inte orka besöka särskilt många sidor. De letar möjligtvis efter vad de kom till och lämnar sedan.

En mobil surfare har oftast tillgång till en dator vid ett senare tillfälle. Det är fortfarande jobbigt att handla via mobila enheter i formulär och genom klickande. Vi kan inte se skillnad på en besökare som surfar in med sin enhet för att reka och sedan väljer att handla via sin dator.

De e-handelsplatser som mobilanpassat sina butiker gör också affärer den vägen. Jag ska erkänna att andelen mobila besökare som handlar hos oss är väldigt lågt. Närmare 95% av alla köp sker via en dator medan nästan 30% av alla besöken kommer från mobila enheter.

Vad ska man göra åt det?

För det första är det inget problem att man har mobila besökare. Se det som en tillgång att mobila besökare ändå hittar in.

Nu gäller det att göra upplevelsen så angenäm som möjligt för mobila besökare. Dra inte alla mobila användare över en kam och tvinga in dem i någon väldigt avskalad mobilversion om de sitter på en fullstor surfplatta. Se till att lära känna dina besökare och ge dem framför allt valet att själv välja om de vill surfa i den fullstora sidan eller en mobilanpassad variant.

Tekniken man använder kallas för Media Query och gör det möjligt att definiera om ett utseende beroende på egenskaperna hos besökarens webbläsare. Man kan t.ex. bestämma att visa navigering som en dropdownlista om användaren sitter på en enhet som har färre än 500 pixlar bred skärm genom att då gäller nya presentationsregler.

Vad gör pålyset.se?

Vi arbetar på att skapa en helt ny design där vi lättare kan ta emot våra mobila besökare och visa dem ett mer anpassat innehåll. Det handlar om några viktiga huvudpunkter:

  • Skapa en guide där man får välja hur man vill hitta produkter utan att behöva skriva någon text. Bara välja bland symboler och använda standardreglage.
  • Städa upp presentationen av produtkterna så mest relevant information hamnar i fokus.
  • Mobilanpassa bloggtexter och presentation då väldigt många mobila besökare landar i vår blogg. Bilderna på höjden i stället för till vänster i texten.
  • Göra det enkelt att betala i kassan.

För att åstadkomma det tittar vi på några olika tekniker. Det HTML-ramverk vi jobbar med att införa är Twitter Bootstrap. Just nu tittar vi också på att växla upp butiken i e-handelssystemet Magento i stället för det vi använder idag. Det skulle tillåta oss fortsätta växa och där finns det redan en god tanke kring hanteringen av mobila besökare.

Vad kan du göra?

 Har du ingen mobil enhet, skaffa dig då en eller en par olika. Surfa runt lite och förfäras och ta tag i din sida före dina konkurrenter.

Det finns tillägg till webbläsaren för att presentera sidor i samma storlek som olika enheter, men jag tycker personligen inte att de tillför tillräckligt. När man sitter på en smartphone eller läsplatta har man ett annat beteende och syfte med vad man gör där. Som datoranvändare med ett litet webbläsarfönster är det svårt att känna hur din besökare känner sig. En viktig skillnad är att de inte har någon datormus – bara fingrar.

Tipsa gärna om sajter som lyckats bra med sin mobilanpassning, jag letar förebilder!