Detta inlägg kommer uppdateras kontinuerligt med mer detaljer.
En mobil webbsida är en helt vanlig webbsida som är optimerad för just mobila enheter som t.ex. telefoner och touchpads.
Det finns många sätt att optimera en webbsida för mobila enheter. Och när man kombinerar dessa så kan användaren få en riktigt trevlig upplevelse när den besöker en webbsida med sin mobila enhet.
Nedan ser ni exempel på webbsidor som är anpassade för mobila enheter bla. Twitter, Smartränta och Smartbudget.
![]() |
![]() |
![]() |
![]() |
Det som är viktigt att tänka på är ofta skärmupplösningen, enhetens prestanda, hastigheten på uppkoppling och hur användaren matar in information d.v.s. om det är touch eller tangentbord.
En annan mycket viktig aspekt är närvaron. D.v.s. när används den mobila webbsidan och vad vill användaren kunna genomföra. Om dessa skiljer sig mycket från den icke mobila webbsidan så kan det vara en idé att helt enkelt bygga en helt separat webbsida för ändamålet.
Här följer en lista med saker man kan göra för att optimera en webbsida för mobila enheter.
Anpassa utseendet på webbsidan med CSS
Med hjälp av “Media querys” så kan man anpassa utseendet på en webbsida utifrån enhetens specifikationer som t.ex. skärmens upplösning. Ett exempel skulle kunna vara att alla enheter med lägre upplösning än 480 pixlar på bredden ska använda CSS-filen lowresolution.css och alla med högre ska använda default.css.
Lite beroende på om sidan är helt anpassad för mobila enheter eller om man endast anpassat den med CSS för att fungera ”bättre” på mobila enheter. (se nästa punkt) så finns det lite olika saker man bör se över. Ofta handlar det om att skala upp texten, visa allt i en kolumn, öka kontrasten etc.
Skicka vidare användaren till en helt anpassad webbsida
Genom att se vilken webbläsare och/eller enhet användaren har så skickar man användaren vidare till en helt annan webbsida. Dessa mobila webbsidor brukar ligga under en subbdomän t.ex mobil.domänensnamn.se.
Frameworks
Med hjälp av framworks som t.ex jquerymobile.com så kan man efterlikna det mycket populära apparna som finns på t.ex Iphone, Androdi och Windows Mobile. Dessa ramverk är helt anpassade för mobiler. Implementerar man ett ramverk som detta innebär det dock att man måste bygga om sidan helt från grunden. Se punkten ovan.
Optimera bilder, CSS, Javascript och HTML
En ganska självklar punkt kan tyckas. Men man kan nästan alltid optimera mer. Numera kan man ofta återskapa saker man tidigare gjort med bilder med hjälp av CSS. Det gäller runda hörn, toningar, skuggor etc. Gå igenom alla dina CSS filer och rensa upp onödiga saker. Snygga till din HTML och rensa bort onödiga element. Bilderna på din mobila webbsida kan säkert komprimeras mer utan att det syns på en mobil enhet. Du kanske t.o.m. kan utesluta en del bilder.
Lyxa till det för iPhone-användare
Det finns en hel del roliga saker man kan göra för att upplevelsen ska bli ännu roligare för iPhone-användare. Här är en lista med de vanligaste sakerna.
- Snygg genvägsikon för skrivbordet
- Bilder för retinaskärm (iPhone4)
- Skala bort webbläsaren/Fullskärmsläge
- Skala sidan 1:1 och ta bort möjligheten att zooma
- En startup-skärm. När man laddar webbsidan via genvägsikonen så kan man visa en bild under tiden sidan laddas.
Läs mer…
Ni hittar mer om den mobila plattformen, strategier och mobil e-handel hos mirandasherman.se. Och ni som har Twitter bör självklart följa @ShermanMiranda.



























