Om din butik har en mobilversion så ska du naturligtvis inte glömma bort den när du skapar nya innehållssidor eller uppdaterar dem. Mobilversionen av sidor editeras under fliken Mobilt innehåll.
Eftersom Google från och med början av 2017 i första hand tittar på mobilversionerna av sidorna är det nu därför extra viktigt att tänka på sökmotoroptimeringen för mobilsidorna, se nedan.
Om din butik inte har en mobilanpassad version och du är intresserad av att skaffa stöd för en sådan, kontakta oss på E37.
Mobilsidors uppbyggnad — Vilken layout används när?
Vid lansering av din mobila webbshop aktiverar vi på E37 en omdirigering till den mobila versionen för besökare på mobiltelefon. Din vanliga domän omdirigeras för dessa till underdomänen för din mobila sajt. Besökare på surfplattor dirigeras däremot inte om till mobilversionen.
Besökare som skriver in adressen till din mobila version kommer alltid få den mobila versionen, oavsett om de är på dator, telefon eller platta.
Om en sida saknar widgetar i fliken Mobilt innehåll så används istället widgetarna ifrån fliken Innehåll för mobilsidan. Notera att detta inte betyder att sidan ser likadan ut som den gör på desktop-versionen eftersom mobilsidan är responsiv. Widgetarna kommer därför hanteras annorlunda.
Systemsidor har under fliken Allmänt en kryssruta Dölj standardinnehåll i mobil version. Om denna ruta inte kryssas i så används eventuella widgetarna ifrån fliken Innehåll även på den mobila versionen.
Antal kolumner
För skärmar som har en bredd på upp till 568 pixlar hamnar widgetarna alltid i en enda kolumn. Detta betyder att om du i admin angett ett högre antal kolumner för det mobila innehållet så kan din sida komma att se ut på ett annat sätt än du tänkt dig för de flesta mobila besökarna. I vår demoshop har vi följande layout på det mobila innehållet:
Trots att vi har två kolumner visas innehållet i en enda kolumn på en iPhone 6 (375x667 pixlar). Bildwidgetarna för Laptopväskor och Mobiltillbehör hamnar därför under varandra. Detta då bredden på vår skärm inte är över 568 pixlar.
Om vi däremot vrider vår iPhone så att den får 667 pixlar på bredden så används vår inställda layout istället. Detta gäller för alla skärmbredder över 568 pixlar.
Bild-widgets och splash-widgets på mobilt innehåll förminskas om så behövs ned för att få plats på bredden för skärmen. De förstoras dock inte upp så att de blir större än antalet pixlar de laddats upp till i filarean, bilder som är mindre centreras då istället på sin widgets yta på skärmen.
För mobilt innehåll bör du därför typiskt använda en eller två kolumner. Fördelen med att använda en enda kolumn är att du slipper tänka på hur sidan kommer att se ut både i en och två kolumner beroende på mobilens bredd. Om du har för många kolumner och lägger in bilder eller texter som tar upp en kolumn var så kommer bilderna bli väldigt små och texter få väldigt lite utrymme på mobilskärmar med en bredd över 568 pixlar.
Kontrollera alltid hur widgetarna ser ut på mobilversionen |
Att skapa och editera mobilversionen av en sida
Gör så här i admin:
- Gå till Webbplats -> Sidor.
- Klicka på sidan du vill editera.
- Välj fliken Mobilt innehåll.
- Lägg in de widgetar du vill ha på mobilversionen av sidan. Detta görs på precis samma sätt som du lägger till en widget för desktop-versionen med enda skillnaden att du är på fliken Mobilt innehåll istället för Innehåll.
- Klicka knappen Spara.
- Öppna nu till din mobil-sida i Chrome eller Firefox. För de flesta av våra butiker ligger mobilversionen på m.dittdomännamn.se för butiker som ligger live. Var din mobilversion ligger på utvecklingsmiljön varierar. Du kan se din butiks adresser genom att gå till Kontrollpanelen -> Shop -> Domäner.
Om du tittar på en mobilsida på en dator så ser resultatet ofta lite konstigt ut, med väldigt inzoomade bilder och text som ligger konstigt centrerad på stora ytor. Detta ska inte oroa dig allt för mycket, besökare som har så hög upplösning kommer inte dirigeras till mobilsidan. Om någon besökare på dator ändå får en länk till mobilsidan så finns en länk "Byt till standardvy" längst ned på varje mobilsida. Men för test-syfte kan det ju vara bra att kunna titta på hur din mobilsida ser ut på mobila enheter även om du testar ifrån en dator. Beroende på vilken webbläsare du använder fungerar detta lite olika:
Testa sidan i Chrome:
Om du använder Chrome kan du högerklicka på sidan och välja Inspektera, (Ctrl+Shift+I).
Om du sedan klickar på knappen Toggle device toolbar, (Ctrl+Shift+M) så får du se hur sidan skulle visas av Chrome på en mobil enhet. Överst på sidan kan du välja vilken mobil som ska emuleras. Du kan här även ställa in egna skärmupplösningar, ställa om inzoomning och rotera enheten så att bredd och höjd byts med varandra.
Testa sidan i Firefox:
Använder du istället Firefox fungerar fortfarande samma snabbknappar som för Chrome för att göra (ungefär) samma sak. Här högerklickar du istället och väljer Inspektera element (Ctrl+Shift+I), sedan klickar du Huvudmenyn -> Utvecklare -> Följsamt designläge (Ctrl+Shift+M) för att se hur sidan visas i mobila enheter.
"Följsamt designläge" i Firefox (för en helt vit sida). - Om allt ser bra ut så är du klar, gå annars tillbaka till steg 4 och editera de widgetar som inte ser bra ut.
Glöm inte SEO-text på mobilstartsidan
Från och med början av 2017 så kommer Google att fokusera på mobilversioner i första hand när det gäller att bestämma sökrankningar. Detta då majoriteten av Google-sökningar numera görs på mobiler. Det är därför nu extra viktigt att ha en sökmotoroptimerad mobilversion av din startsida. Se därför till att ha en rubrik med rubrikmall 1 (H1), samt sökmotoroptimerad text även på din mobilstartsida. Detta kan med fördel läggas in med widgeten layoutat innehåll. Även om rubrikmall 1 betyder att det är en huvudrubrik så behöver den faktiskt inte ligga högst upp på sidan; eftersom de flesta besökarna på sidan förhoppningsvis är mer intresserade av dina produkter och kampanjer bör du troligen placera skyltfönster och kampanj-puffar ovanför beskrivningen av butiken så att man ser dem först.
Eftersom denna SEO-text ofta går igenom vilka varugrupper och varumärken din butik säljer, då detta ofta är bra sökord, överväg att även länka dessa ord i texten till respektive varugrupps- och varumärkessidor. På detta sätt blir texten lite mer användbar för besökarna på sidan, då den kan spara dem några klick för att hitta dit de vill.
Kommentarer
0 kommentarer
Artikeln är stängd för kommentarer.