Etikettarkiv: mobil

Mobilanpassning – hur och varför

Fler och fler använder smarta mobiltelefoner, surfplattor och andra enheter med små skärmar (jämfört med datorer) för att surfa. Tyvärr fungerar många webbplatser fortfarande rätt dåligt när de besöks från den här typen av enheter. Upplevelsen är viktig. Risken är stor att besökarna söker sig vidare om inte din webbplats inte kan besökas från en modern mobiltelefon.

Viktigt med mobilanpassning

För många verksamheter är varje besökare en potentiell kund och att driva en webbshop där kunderna inte kan handla från mobil eller surfplatta innebär en stor risk att förlora många av dessa kunder till konkurrenter som anpassat sin webbplats.

Google har kommunicerat att mobilvänligheten vägs in i rankningsalgoritmen. När sökmotorn väljer vilken webbplats som ska visas först i sökresultat är det många kriterier som viktas och sammanställs. Hur mobilanpassad och mobilvänlig din webbplats är påverkar den bedömningen.

Snabbtest

 

Om du inte redan gjort det är det hög tid att du tar reda på hur väl din webbplats fungerar i mobilen.  Du kan snabbt och enkelt testa och få en känsla för om din webbplats är mobilanpassad och mobilvänlig med Googles testtjänst.

Googles mobilvänlighetstest
Googles mobilvänlighetstest

Gratis verktyg för provkörning

Även om snabbtestet godkände din webbplats skadar det inte att se över det hela i mer detalj. Ett enkelt sätt att testa mer utförligt är att använda utvecklingsverktygen som ingår i Googles webbläsare Chrome.

Googles webbläsare Chrome har som standard bra verktyg för utvecklare. Öppna aktuell sida och tryck F12 för att aktivera utvecklingsverktygen.

Google Chrome med aktiverade utvecklingsverktyg
Google Chrome med aktiverade utvecklingsverktyg

Förutom trevliga verktyg för att se hur webbläsaren tolkat CSS och vad som applicerats på vilka element i webbsidan finns också ett ”device mode”. Du kan enkelt aktivera ”device mode” genom att klicka på den  lilla ikonen som ser ut som en mobiltelefon.

Toggle device mode
Toggle device mode

När ”device mode” aktiverats kan Chrome emulera ett antal andra enheter och ge dig en uppfattning om ungefär hur webbsidan skulle se ut i en sådan enhet.

Exempelvis kan Chrome emulera hur sidan skulle se ut i Apples iPhone 4:

Chrome emulerar Iphone 4
Chrome emulerar Iphone 4

Tips på mobilanpassning

Det finns många olika lösningar och varianter på mobilanpassning. Vissa bygger helt separata webbplatser för mobila användare. De försöker sedan avgöra om besökarens enhet ska skickas över dit mer eller mindre automatiskt.

För att Google ska anse att din sida är mobilanpassad förväntas du lägga till en meta-tagg för ”viewport” i webbsidans header. Exempelvis:

      <meta name="viewport" content="width=device-width"/>

Du kan läsa mer om bland annat viewport hos W3C: CSS Device Adaptation.

Med hjälp av CSS ges rätt stora möjligheter att bygga en sida som fungerar på såväl datorer som mobiltelefoner. Så långt det är möjligt bör storlekar anges procentuellt istället för i exempelvis pixlar. En responsiv design, där placeringen och storleken av element på webbsidan anpassar sig efter fönstrets storlek, är att föredra.

De mindre mobila enheterna har ofta en bredd på ungefär 300 pixlar. Det kan vara bra att ha i åtanke när storlek anges till olika objekt på webbsidan. Det går att, med min-width, ange den minsta bredd som ett objekt ska ha när det renderas, likväl som max-width kan ange största bredd. Det går också att styra höjden med min-height och max-height.

På exempelvis Sajthotellet.com har vi använt CSS för att visa en lite mindre logga när bredden är 399 pixlar eller mindre:

/* Mobile devices */
@media (max-width: 399px) 
{
   #topHeader 
   {
      background: transparent url(/images/logo-small.jpg) no-repeat bottom left;
   }
}

Givetvis finns många fler tips och trix i diverse forum och liknande, men bara genom att använda ovanstående kommer du långt i arbetet med att mobilanpassa din webbplats.