Det här är en äldre artikel, så vissa referenser och länkar kan vara föråldrade. Ha det i åtanke när du läser. Tack!
Designa för mobila enheter
De senaste åren har den mobila webben exploderat om man räknar antalet personer som använder webben från en mobil enhet. Tittar vi på Sverige så är det en mycket stor procent av befolkningen som idag äger en smartphone. Vad behöver man tänka på när man designar för dessa?
När man börjar fundera på att designa för mobila enheter och bygga en mobilanpassad webbsida så ställs man inför ganska många specifika frågeställningar.
Man pratar ofta om en responsiv design. Anpassar man en webbplats för olika enheter genom en adaptiv eller en responsiv design så kan man lite förenklat säga att man åtgår från samma material för alla enheter, men att man sedan via CSS och JavaScript väljer ut vad och hur webbsidan skall visas upp beroende på vilken enhet som besökaren har.
Görs detta på fel sätt genom att exempelvis skräddarsy en design genom att endast använda display: none i CSS:en innebär det att resursen laddas hem men sedan döljs visuellt. Detta blir ett problem om man exempelvis använder stora bilder. Dessa skalas ner och kommer ser bra ut, men det är ändå originalet som laddas hem vilket kan göra att webbsidan upplevs mycket seg på en mobiltelefon. Det är alltså viktigt att skräddarsy bildstorlekar och innehåll och endast ladda det som behövs.
Det viktigaste att ta hänsyn till när man bestämmer sig för hur man skall gå tillväga när man designar för mobila enheter är kontexten. Det vill säga, i vilken situation besökaren befinner sig när han eller hon använder en mobil enhet i just det specifika projektet, och vad sedan detta sätter sedan förutsättningar och förväntningar på designen och upplevelsen.
1. Hastighet
Många har sämre uppkoppling mobilt än vanligt, och även om vi i Sverige ligger väldigt långt fram när det gäller våra mobila datanät så är det ändå fortfarande ganska stor skillnad. Speciellt när du kommer utanför storstäderna. Många mobila webbläsare är fortfarande även långsammare än de versioner som används på en dator, vilket också är en viktig dimension av den upplevda hastigheten.
2. Skärmyta
Så gott som alla mobila enheter har mindre skärm än vad vi är vana vid från bärbara och stationära datorer. Kan den befintliga designen anpassas för en liten skärmyta eller måsta man tänka om helt?
3. Var befinner sig användaren?
Hittills har man nästan alltid antagit att en besökare som använder en mobil enhet är på väg någonstans. Att han eller hon redan är ute på stan, och behöver information om något snabbt för att sedan fortsätta med något annat.
Till viss del är detta fortfarande sant, men andelen människor som använder en mobil som förstaval för att kolla upp något på webben ökar ständigt. Det blir även vanligare och vanligare att mobilen även används hemma i soffan, under reklampausen, vilket är lätt att glömma bort…
Är man däremot ute på stan vill man nästan endast ha reda på frågor som:
- var ligger butiken/restaurangen?
- hur ser kartan ut i förhållande till vart jag är just nu?
- är butiken/museet/restaurangen öppen just nu?
- vad har företaget/butiken/hotellet för telefonnummer?
- serveras pizza på menyn idag?
Skillnader mot vanliga webbplatser
Generellt är en ganska platt informationsstruktur önskvärd. Det blir snabbt krångligt att navigera sig i flera steg och ner i många hierarkier på en mobil, så se till att allt viktigt finns på ett eller två stegs avstånd.
På kapacitiva touchscreens (som iPhone, iPad och Android-enheter) så navigerar man med fingret och då måste det finns en tillräckligt stor träffyta.
Oavsett om penna eller finger används för att navigera på enheterna så döljer användaren också ofta stora delar av skärmen när han eller hon interagerar med enheten. Ibland kan till och med det som användaren egentligen vill klicka på döljas av den egna handen, så tydlighet är mycket viktigt.
Exempel: Om du har en länk i en lista, så använd padding på a-elementet istället för marginaler på li-elementen för att öka klickytan på ett smart sätt.
Tänk även på att i takt med att mobiltelefonerna blir större och större, så blir det även svårare att nå till de övre delarna på skärmen. Något att ha i tankarna när man designar en mobil navigering idag.