Close
Iphone och Ipad skiljer sig rejält i skärmstorlek

Mobilanpassa din webbplats för böfvelen!

Gartner spår att det 2013 kommer att finnas fler uppkopplade mobiltelefoner än datorer:

“By 2013, mobile phones will overtake PCs as the most common Web access device worldwide. According to Gartner’s PC installed base forecast, the total number of PCs in use will reach 1.78 billion units in 2013. By 2013, the combined installed base of smartphones and browser-equipped enhanced phones will exceed 1.82 billion units and will be greater than the installed base for PCs thereafter.”

Att det kommer påverka oss som producerar webbplatser verkar dock många ha missat. Istället för att jobba med mobilanpassning kan man uppleva att hajpen att bygga specialiserade mobilappar är total.
Appar har absolut sin plats i helheten, men:

  • De kräver en installation i telefonen innan man kan använda dem.
  • De finns att ladda hem på en marknadsplats som styrs av annan part.
  • De kräver ytterligare marknadsföring för att någon ska hitta dit.

Motståndet mot att slinka förbi en webbplats bör rimligen vara mindre krävande för en användare jämfört med en app i en appbutik.

Om jag utgår från statistik i Google Analytics jag har i mitt konto (med några miljoner årliga besökare) så kan man se att 19% gör ett besök via någon form av mobil enhet.

Så här beter sig mobila och vanliga besökare på webbplatser

Enhet Sidor per besök Tid på webbplats Avvisningsfrekvens
Dator  2,47 2 min 10 sekunder 66,94%
Ipad  2,11 1 min 43 sekunder 72,82%
Iphone  1,55 0 min 58 sekunder 82,23%

Enda sättet jag kan tolka dessa siffror är att besökarna med liten skärm tycker ej mobilanpassade webbplatser är kass och svåra att använda. Intressant nog så är avvisningsfrekvensen hos Android-användare lägre än för Iphone, men fortfarande avsevärt högre än för Ipad.

Lösningen är… responsive design?

Som du ser på bilden ovan så finns kolumner på sidan. Detta är ju ett vettigt förfarande att använda den bredd som finns. Fram till smartphones blev var mans egendom gällde att man anpassade sin sajt efter en bredd på lite mindre än 1024 bildpunkters bredd. Nu råkar många mobiltelefoner ha 320 bildpunkter på bredden och storleken på skärmen är vanligtvis lite mer än 3,5 tum.

Får man upp en webbplats gjord för 960 bildpunkters bredd i mobilen kommer det med andra ord bli väldigt litet och utzoomat.

Responsive design går ut på att tänka på webbplatsens delar som block istället för antal kolumner inom en viss bredd. Blocken kan visserligen fortfarande placeras i kolumner för de med större skärmar men om man går in med en mobil så blir det en enda lång kolumn.
Saker och ting får ta den plats som erbjuds, exempelvis ser man till att inte slösa plats med sidhuvudets storlek om utrymmet är begränsat.

Ett stilmallsramverk jag själv leker med just nu heter Foundation. Gå in på den webbplatsen och minska bredden på webbläsaren så ser du själv vad som händer med designen – bland annat försvinner menyn och bilder skalas ner i bredd.

Det bästa är att responsive design inte ens är särskilt komplicerat om man har att göra med en kompetent gränssnittsprogrammerare.

Så här ser min egen sajt ut på Iphone och Ipad efter några timmars pyssel:

Responsive version av Webbfunktion.com

Se så, sätt igång!

Leave a Reply

Your email address will not be published. Required fields are marked *

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.