Idag är det viktigare än någonsin att alla webbplatser ser bra ut i alla lägen, oavsett om besöker dessa från en mobiltelefon, från en surfplatta, från en dator eller via TV:n. Att strunta i att anpassa sin webbplats efter alla dessa typer av enheter är mycket dumt. På så sätt riskerar man att tappa kunder, både befintliga och potentiella sådana. Människor av idag kräver att en webbplats ska fungera både på mobilen och på PC:n, särskilt då man i en allt större utsträckning använder sin mobiltelefon till alla typer av datatrafik. Är en sida svårläst eller krånglig att navigera på mobilen, blir människor ofta mycket irriterade.

En anpassning av webbplatserna måste alltså ske. Som de flesta vet är skärmen på en mobiltelefon och en datorskärm olika i storlek och har därmed en annorlunda visningsyta. Där datorskärmen kan använda sig av en mer “avlång” skärm i 16:9-format har mobiltelefonens skärm begränsad plats på sidorna. I och med att betraktningsvinkeln på en mobiltelefon baseras på att den är uppåtvänd, måste designen för en webbplats anpassas så att den optimalt kan visa den information som finns. Det ställer i sin tur krav på att designelementen på sidan är ganska stora och tydliga. Exempelvis visar man optimalt enbart de vanligaste menyvalen i förstaläget, eftersom det skulle bli alltför rörigt att visa allt innehåll.

Dock är det inte enbart den grafiska designen som ska stämma på alla enheter; funktionaliteten måste också hänga med på samma villkor. Driver man exempelvis en webbutik, måste kunden fortfarande kunna lägga sina varor i varukorgen om det utförs på en mobiltelefon. Dessutom måste betalfunktioner och liknande fungera utan problem. Det handlar om att bygga upp en tillit till din webbplats och är det något som inte fungerar som det ska riskerar kunden att bli avskräckt. Lägg därför mycket arbete på att få till din webbplats så att den fungerar på samtliga typer av enheter.

Responsiv design för mobila enheter

När man pratar om funktionalitet och design så brukar man använda odet responsiv design. Responsiv betyder att något svarar på något och kommer ifrån ordet respons. När man skapar en webbsida som även ska fungera på mobila enheter så är det viktigt att designen är responsiv. Det vill säga att alla de fönster och funktioner som presenteras på skärmen i datorn även ska kunna anpassas och fungera på en mindre skärm. Ett exempel vi kan ta upp är shoppingsajter. Loggar du in på din dator och ska shoppa online så ser du oftast ett flertal produkter ligga på rad bredvid varandra och så går det sedan att skrolla ner flera rader. Skulle det se exakt likadant ut om du öppnade webbshoppen i din mobiltelefon så hade produkterna och texten antingen varit pyttelitet så att man knappt kan urskilja vad det står och hur produkterna ser ut, eller så hade man fått skrolla från sida till sida på ett väldigt osmidigt sätt för att kunna få se hela sajten. Har man då istället en responsiv design så kommer hela sajten att anpassas för den lilla skärmen och produkterna antagligen bara att visas en och en per rad istället för flera. Detta gör att det blir väldigt mycket enklare för besökarna att ta del av alla produkter på ett enkelt sätt.

Du kan enkelt se om din eller någon annans hemsida är responsiv genom att justera webbläsarfönstret storlek och se vilka element på hemsidan som kommer att anpassa sig och ändras i och med att fönstret blir större och mindre. Vad som händer när en skärm blir mindre är att de olika kolumnerna som finns på din webbplats anpassas dynamiskt efter skärmens storlek och bredd. Man bestämmer vilka de olika ”brytpunkterna” ska vara vilket betyder att vissa objekt kommer att omplacera sig när skärmen blir mindre och det blir för många objekt som slåss om samma yta. Hemsidan kommer då exempelvis att visas som endast en kolumn bred istället för kanske tre kolumner som den visas i på en dator. De viktiga delarna kommer fortfarande att finnas med genom att läggas ovan eller under, irrelevanta bilder kommer att döljas helt och hållet och knappar kommer att bli större för att det ska bli lättare för användare att trycka på dessa med sina fingrar mot skärmen.

Att designa sin hemsida med hjälp av responsiv design är idag väldigt viktigt. Fler och fler väljer att gå över helt och hållet till sina mobiltelefoner när de är ute och surfar. Skulle de då besöka en hemsida där designen inte är responsiv så kommer de med stor sannolikhet att välja bort denna för att besöka en annan hemsida istället, och man vill väl inte förlora kunder på grund av att man inte lagt ner tillräckligt med tid på sin hemsida?

Läs här för tips om hur du skapar en tilltalande hemsida.