Anpassa för mobilen

En mobil webbplats liknar oftast den traditionella webbplatsen som vi är vana att besöka via en pc eller mac, men det finns några viktiga skillnader som du som utvecklare bör känna till. Förutsättningarna för en mobiltelefons webbläsare ser annorlunda ut och det finns många sätt för att optimera och underlätta användandet av en webbplats för besökare via en mobiltelefon.

Skillnader

Gemensamt för alla mobila webbplatser är att förutsättningarna för visning ser annorlunda ut gentemot en pc eller mac. Displayen är mindre, måtten annorlunda och upplösningen kan variera. En annan sak som många mobila hemsidor har gemensamt är att de oftast inte använder filer, format och program som inte stöds av mobiltelefoner. Mjukvaran Flash t.ex. är inte kompatibel med smartphones av märket Iphone, vilket skulle innebära problem för besökare som använder den typen av mobilenhet.

En annan viktig skillnad är att en mobil webbplats bör fokusera på funktionaliteten för användarna. En mobiltelefons skärm är mindre och det är därför viktigt att webbsidorna är lättöverskådliga och att menyer och länkar är tydliga och lätta att navigera på.

Mobiltelefoner använder även en annan typ av internet anslutning, vanligtvis 3G eller 4G, det är därför viktigt att bilder, videos och övrig information är så komprimerad som möjligt för att minska laddningstiderna och underlätta för besökare.

Att tänka på vid skapandet av en mobil webbplats

Nedan följer en lista på saker som är viktiga att tänka på vid skapandet av en mobil webplats. Du kan även ladda ner punkterna som PDF.

Utseende och design

  • Startsidan. Startsidan är det första en besökare ser. Det är viktigt att startsidan är tilltalande och att det är lätt att hitta det man söker efter. Tänk på att inte fylla den med för mycket innehåll. Rent visuellt är det bättre att vara kortfattad och tydlig för att sedan länka vidare till undersidor för mer information.
  • Tänk på din traditionella webbplats. Det är bra om designen på din mobila webbplats inte skiljer sig för mycket ifrån din vanliga hemsida. Försök behålla en röd tråd så att det syns att de båda hör ihop.
  • Synlighet. En besökare på en mobil webbplats har begränsade möjligheter för navigering och kan endast använda sig av länkar och knappar som är synliga. En besökare bör inte känna behovet av att t.ex. zooma på en mobil webbplats.
  • Fingervänligt. Det är standard att använda fingrarna för att navigera på telefonens touchskärm. För att undvika oavsiktliga klick bör länkar och knappar vara tydliga och inte placeras för nära varandra.
  • Nedladdningshastigheter. För att optimerar laddningstiderna på din mobila webbplats bör du undvika onödigt stora webbsidor, filer och bilder.
  • Testa din webbplats. Det är viktigt att testa hur den mobila webbplatsen ser ut i olika smartphones. Ett användbart verktyg är Opera Mobile Emulator, som låter dig välja mellan olika mobila webbläsare för att förhandsgranska på datorskärmen hur det kommer se ut i telefonen. mobilenheter.

Innehåll

  • Formen. En mobil display är ofta avlång, vilket innebär att när en besökare scrollar ner på sidan så försvinner webbplatsens titel, rubrik eller toppmeny. Detta medför svårighet i att tolka innebörden av den synliga informationen. Det kan därför vara bra att skapa underrubriker och att arbeta med olika visuella fält för att bevara ett sammanhang.
  • Endast det nödvändigaste. Försök att hålla information i form av text så komprimerad som möjligt. Översikten på en mobil webbplats är sämre än på en dator så det kan vara idé att dela upp text i mindre stycken.
  • Mindre skärmar. De mindre skärmarna på mobiltelefoner resulterar i sämre överblick.  Detta tenderar att göra det svårare för användaren att få en överblick av sidan. Dela därför upp sidor och information i mindre delar som användaren kan hantera och förstå oberoende av varandra.

Menyer

  • Menyn. Gör din huvudmeny lättöverskådlig och använd så få knappar som möjligt, alternativt en rullista, för att minska ytan som menyn tar i anspråk.
  • Ikoner och knappar. Tänk på att göra ikoner och knappar anpassade för mobiltelefoner. En bra idé är att göra dem något större på den mobila webbplatsen för enklare navigering och för att minska risken för oavsiktliga klick.
  • Animationer och effekter. Försök att begränsa animationer i menyer och knappar. Mindre animationer innebär snabbare laddningstider.

Bilder

  • Tänk på storleken. Bilder behöver inte vara onödigt stora. En bild som är omskalad genom kod tar fortfarande upp lika mycket utrymme som originalbilden. Försök istället att skapa bilderna i rätt upplösning och storlek från början.
  • Anpassa efter skärmen. Göra dina bilder anpassade efter mobiltelefonens skärm. I vissa fall kan bilden omöjligt anpassas efter alla mobilmodeller, fokusera då på majoriteten – Iphone och/eller android.
  • Format. JPG är ett bra standardformat för fotografiska bilder. PNG är att föredra för t.ex. ikoner, knappar och logotyper.

Unikt för smartphones

  • Möjlighet att ringa. En smartphone känner automatiskt av telefonnummer i en text och användaren kan med ett enkelt klick välja att ringa direkt. Utnyttja möjligheten, men glöm inte att inleda varje telefonnummer med en landsnummer. T.ex. den första siffran i ett svenskt riktnummer ersätts med landsnummret +46.
  • GPS och karta. De flesta smartphones innehåller möjligheten att använda GPS-funktioner. Det innebär att användaren kan klicka på en adress för att enkelt visa den i mobilens GPS. Använd t.ex. Google Maps för att skriva in adresser och generera en HTML-kod för att bädda in på din webbplats. Koden resulterar i en visuell bild som även kan öppnas i en smartphones GPS.
  • Hemskärmsikon. I smartphones av märket Iphone går det att spara ner en direktlänk till webbsidor direkt till telefonens hemskärm.  Det skapas då en ikon, liknande en app, som vid klick öppnar din hemsida. Du har möjlighet att själv bestämma hur ikonen på hemskärmen ska se ut genom en enkel kod.  Du hittar en guide för hur du ska göra HÄR.

 

Ämnesområden