Att tänka på när man designar en hemsida avsedd för mobiltelefoner

Hemsida för mobil

Skillnaden mellan mobiltelefoner och datorer blir bara färre och färre.

2019 planerar Apple faktiskt att lansera en banbrytande uppdatering för sin iPad som inte bara tillåter iPadens skärm att visas på en datorskärm och således kan man arbeta på sin iPad via datorn utan uppdateringen kommer även få Apple:s datorer att se lite mer ut som deras mobila apparater, samt få båda plattformarna bolla med varandra på ett smidigare sätt.

Apple rör sig mot en fullt integrerad lösning mobil och dator sinsemellan och de är inte ensamma om detta. Hela industrin rör sig idag mot enade plattformar där både mobila enheter som stationera enheter ska ha likadana plattformar och således göra det enklare för både utvecklare som konsumenter att använda respektive plattform.

Som utvecklare ska man inte behöva utveckla två versioner av sina program för var plattform utan man ska helt enkelt kunna utveckla en—därefter ska denna bara anpassas för respektive plattform.

Idag är detta möjligt på webben med hjälp av CSS och andra språk. På mobila enheter är detta fortfarande lite svårare.

I detta inlägg ska vi nämna några saker att tänka när det kommer till mobila enheter när man bygger sin hemsida.

Saker att ha i åtanke

En mobil enhet brukar oftast vara betydligt mindre i storlek än en stationär enhet. Detta betyder att stationära enheter kan se mycket mer än en mobil enhet kan se och eftersom skärmen är så pass mindre är det bra att ha detta i åtanke. Vad ska visas på sidan? Vad kan döljas? Hur kan man visa så mycket innehåll som möjligt utan att kompromissa på designen och göra det kontraintuitivt?

Dessa frågor har lett till lösningar som hamburgermenyn, interaktiv design och saker som inte syns förrän man scrollar/väntar ett tag.

Sådana saker är viktiga att tänka på när det kommer till mobila enheter.

En annan sak är om användaren har ett mobilskal på sin enhet eller inte. Bär användaren på ett sådant skal? Betyder det att de inte kan interagera med hemsidan lika effektivt som någon utan mobilskal? Har de möjligtvis ett skal som täcker en del av skärmen (de populära plånboksskalen)?

Saker man måste implementera

Som nämnts tidigare i inlägget så är hamburgermenyn något av ett måste.

En meny tar upp mycket utrymme på skärmen och detta är inte ett måste. Implementera hamburgermenyn som illustreras i bilden till höger och således sparar du oerhört mycket utrymme på skärmen. Till höger om knappen kan du möjligtvis visa upp hemsidans logga och höger om denna möjligtvis ett sökfält. Därmed har du hela menyn gjord och du har gjort det med maximalt utrymme sparat.

Ett annat måste är uppvisningen av innehåll på ett klart och tydligt sätt. Saker som på stationära enheter kan visas sida vid sida (ex. kolumner av innehåll eller en ”sidopanel”) kan möjligtvis designas så att de istället visas upp i rader. Dvs sidopanelen i helskärm längst ned och innehållet i helskärm högst upp, istället för två kolumner sida vid sida. På så vis visar du det viktigaste (innehållet) högst upp, och det mindre viktiga längre ned. Alternativt så kan sidopanelen designas om så att den tar mindre plats eller bakas in i hamburgermenyn och således effektiviseras hela hemsidan och fokus blir på det viktigaste i den lilla yta skärm användaren har att använda sig utav.

Fler tips och tricks går att hitta på nätet när det kommer till design av hemsidor för bruk via mobila enheter. Viktigt är det att tillämpa dessa på sin hemsida för att få ut det mesta av sin hemsida, då man annars riskerar att kompromissa eventuella kunder och värdet som man kan få av en väldesignad hemsida.