Republic / Artiklar /

Artikeln uppdaterad 2020-05-26.
Skriven av Christofer Sandin.

Des­igna för mobi­la enheter

De senaste åren har den mobi­la webben exploder­at om man räk­nar antalet per­son­er som använ­der webben från en mobil enhet. Tit­tar vi på Sverige så är det en myck­et stor pro­cent av befolknin­gen som idag äger en smart­phone. Vad behöver man tän­ka på när man des­ig­nar för dessa?

När man bör­jar fun­dera på att des­igna för mobi­la enheter och byg­ga en mobi­lan­pas­sad webb­si­da så ställs man inför gan­s­ka mån­ga speci­fi­ka frågeställningar.

Man pratar ofta om en respon­siv design. Anpas­sar man en webb­plats för oli­ka enheter genom en adap­tiv eller en respon­siv design så kan man lite fören­klat säga att man åtgår från sam­ma mate­r­i­al för alla enheter, men att man sedan via CSS och JavaScript väl­jer ut vad och hur webb­si­dan skall visas upp beroende på vilken enhet som besökaren har. 

Görs det­ta på fel sätt genom att exem­pelvis skräd­darsy en design genom att endast använ­da display: none i CSS:en innebär det att resursen lad­das hem men sedan döljs visuellt. Det­ta blir ett prob­lem om man exem­pelvis använ­der sto­ra bilder. Dessa skalas ner och kom­mer ser bra ut, men det är ändå orig­i­nalet som lad­das hem vilket kan göra att webb­si­dan upplevs myck­et seg på en mobil­tele­fon. Det är allt­så vik­tigt att skräd­darsy bild­stor­lekar och innehåll och endast lad­da det som behövs. 

Det vik­ti­gaste att ta hän­syn till när man bestäm­mer sig för hur man skall gå tillvä­ga när man des­ig­nar för mobi­la enheter är kon­tex­ten. Det vill säga, i vilken sit­u­a­tion besökaren befinner sig när han eller hon använ­der en mobil enhet i just det speci­fi­ka pro­jek­tet, och vad sedan det­ta sät­ter sedan förut­sät­tningar och förvänt­ningar på desig­nen och upplevelsen.

1. Hastighet

Mån­ga har säm­re upp­kop­pling mobilt än van­ligt, och även om vi i Sverige lig­ger väldigt långt fram när det gäller våra mobi­la datanät så är det ändå fort­farande gan­s­ka stor skill­nad. Speciellt när du kom­mer utan­för storstäder­na. Mån­ga mobi­la web­bläsare är fort­farande även långsam­mare än de ver­sion­er som används på en dator, vilket ock­så är en vik­tig dimen­sion av den upplev­da hastigheten.

2. Skärmy­ta

Så gott som alla mobi­la enheter har min­dre skärm än vad vi är vana vid från bär­bara och sta­tionära dator­er. Kan den befintli­ga desig­nen anpas­sas för en liten skärmy­ta eller mås­ta man tän­ka om helt?

3. Var befinner sig användaren?

Hit­tills har man näs­tan alltid antag­it att en besökare som använ­der en mobil enhet är på väg någon­stans. Att han eller hon redan är ute på stan, och behöver infor­ma­tion om något snabbt för att sedan fort­sät­ta med något annat.

Till viss del är det­ta fort­farande sant, men ande­len män­niskor som använ­der en mobil som förstaval för att kol­la upp något på webben ökar ständigt. Det blir även van­li­gare och van­li­gare att mobilen även används hem­ma i sof­fan, under reklam­pausen, vilket är lätt att glöm­ma bort…

Är man däre­mot ute på stan vill man näs­tan endast ha reda på frå­gor som:

  • var lig­ger butiken/​restaurangen?
  • hur ser kar­tan ut i förhål­lande till vart jag är just nu?
  • är butiken/​museet/​restaurangen öppen just nu?
  • vad har företaget/​butiken/​hotellet för telefonnummer?
  • serveras piz­za på menyn idag?

Skill­nad­er mot van­li­ga webbplatser

Generellt är en gan­s­ka platt infor­ma­tion­sstruk­tur önskvärd. Det blir snabbt krång­ligt att nav­ig­era sig i flera steg och ner i mån­ga hier­arki­er på en mobil, så se till att allt vik­tigt finns på ett eller två stegs avstånd.

På kapac­i­ti­va touch­screens (som iPhone, iPad och Android-enheter) så nav­ig­er­ar man med fin­gret och då måste det finns en till­räck­ligt stor träffyta. 

Oavsett om pen­na eller fin­ger används för att nav­ig­era på enheter­na så döl­jer använ­daren ock­så ofta sto­ra delar av skär­men när han eller hon inter­ager­ar med enheten. Ibland kan till och med det som använ­daren egentli­gen vill klic­ka på döl­jas av den egna han­den, så tyd­lighet är myck­et viktigt.

Exem­pel: Om du har en länk i en lista, så använd padding på a-ele­mentet istäl­let för mar­ginaler på li-ele­menten för att öka klick­y­tan på ett smart sätt.

Tänk även på att i takt med att mobil­tele­fon­er­na blir större och större, så blir det även svårare att nå till de övre delar­na på skär­men. Något att ha i tankar­na när man des­ig­nar en mobil nav­iger­ing idag.