Skip to content


Skapa mobil hemsida för iPhone & Andriod

När jag började göra mobila hemsidor, eller egentligen mobilanpassa sidorna till mina projekt så fanns det väldigt många mobiler som man skulle ta hänsyn till och olika storlekar på skärmen och olika html-språk. Min första mobila hemsida gjorde jag t.ex. i wml och wmlscript för att alla telefoner inte klarade xhtml då. Men idag så klarar alla moderna mobiltelefoner i Sverige xhtml (samtidigt som de inte klarar wml), så den tekniken är lite förlegad.

Idag iom iPhone och Android så är det mycket enklare att utveckla en mobil hemsida, eftersom webbläsarna är bättre på att själva anpassa innehållet än tidigare. Dock så medan många tycker att man inte behöver mobilsidor när smartphones finns, så anser jag att upplevelsen för användarna blir mycket bättre om man skapar ett specifikt gränssnitt för dem. Samtidigt som du lättare kan optimera dina annonsintäkter på de sidorna också (mer om det i kommande inlägg). Jag har ingen exakt statistik på hur fördelningen mellan iPhone och andra telefoner ser ut i Sverige och världen, men jag kan säga hur det ser ut på t.ex. Sverigelokalt.se.

  • iPhone 60%
  • Android 17,8%
  • iPad 16,6%
  • Symbian 2,2%
  • Sony 1,7%
  • iPod 1,2%
  • Övriga 0,5%

Dvs iOS står för 77,8% och har en slående dominans. Det intressanta är att för någon månad sedan så var förhållandet iPhone 70%, Android 15% och iPad 10%, så det måste verkligen sålts många iPad som gett 50% ökning i trafik. Samt att många som troligen surfade hemma i soffan med sin iPhone, nu soffsurfar med sin nya iPad istället. Det skulle vara intressant om det fanns några undersökningar som berättade hur många av de som har en iPad som även har en iPhone.

Men nog om statistik. Hur kommer jag då igång snabbt med min mobilanpassning. Kort och gott handlar det om följande punkter:

  • Mobilidentifiering
  • Anpassa layout
  • Specifik html för mobilerna

Det första man behöver bestämma är hur man ska identifiera de mobila besökarna. Antingen så använder man en specifik subdomän (m.domän.se & mobil.domän.se) eller så kollar man på besökarens useragent och bestämmer om det är mobil eller inte. För att göra det så enkelt som möjligt för användarna så brukar jag rekommendera alt2. Dock är det bra om du sätter upp subdomänerna också och ställer in ditt identifieringsscript så att den alltid vidar mobilt om man besöker mobil.domän.se. Det finns många sådana script på nätet (som t.ex. på php mobile detection) och ett som jag hittade och testat är:

http://code.google.com/p/php-mobile-detect

Behöver man också veta skärmstorlek för att ännu bättre anpassa skärmen så rekommenderas Wurfl eller DeviceAtlas.

När det gäller layouten, så är det enkelhet som vinner här. Dvs gör om sidan till att bara visa allt innehåll i en kolumn och bädda in ev annonser i den kolumnen. Om du använder Wurfln så kan du anpassa layouten efter skärmens storlek, men om du nöjer dig med att anpassa dig efter iPhone och Android, så kan du helt enkelt sätta bredden till 320px.

Slutligen för att upplevelsen ska bli så bra som möjligt och att du inte ska behöva zooma in eller ut på sidan, så finns det en html tagg som du måste ha med (gör t.ex. att iPhone och Android telefoner anpassar bra till 320px fast skärmen är större eller mindre än det). Vilket är:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

Sedan är det även bra att lägga till lite meta taggar som säger att det är en mobil sida som t.ex.:

<meta name=”HandheldFriendly” content=”True” />

Ni kan se skillnaderna på mobilsidan för javautvecklare och den vanliga webbsidan för jobb javautvecklare.

Så nu är det bara att sätta igång och mobilanpassa webben. Skriv gärna i kommentarerna eller länka till detta inlägg och ni har egna tips eller erfarenheter kring att skapa en mobil hemsida för iPhone och Android.

Posted in Android, iPhone, Utveckling.