Under de senaste åren har det skett en explosionsartad utveckling av teknologin kring telefoner och surfplattor. I dag har nästan alla i västvärlden en smartphone eller surfplatta, vilket innebär att fler surfar nätet och hemsidor med mindre skärmar än de traditionella desktopstorleken.
Hur skall man då göra innehållet på sin hemsida åtkomligt och interaktiv för alla skärmstorlekar? Det är ett pussel som vi utvecklare brottas med genom varje nytt projekt, men som tur är finns det såklart lösningar på problemet. Svaret är responsiv och/eller adaptiv design, vad skillnaden är tänker jag försöka bena ut i den här artikeln.
För användaren spelar de naturligtvis ingen roll vilken teknik eller metod som ligger bakom men för dig som kund kan det vara fint att veta vad skillnaden är och vad som ligger bakom respektive metod.
Responsiv design
En webbplats som är responsivt uppbyggd är primärt strukturerad på en flytande design layout som man åstadkommer genom CSS termen ‘media queries’. Man jobbar alltså med flytande rutsystem och procentuella mått istället för fasta pixelmått, vilket ger flexibla layouter, bilder och videoklipp som anpassar sig till användarens skärmstorlek.
Den responsiva sidan anpassar sig flytande och flexibelt till användarens skärm med samma innehåll som tidigare, vissa delar av designen kan man dölja bort, man kan dock inte tillföra något.
Adaptiv design
En adaptiv webbplats är uppbyggd med specifika designer som är optimerad för olika de olika skärmmåtten. Istället för en flytande design skapar man en specifik layout som läses in när du laddar ned hemsidan. Den adaptiva metoden använder en lager på lager struktur istället för flexibel anpassning. Att skapa ett layout lager specifikt för en skärmstorlek ger en ökad kontroll av interaktiviteten på de olika storlekarna. Den adaptiva designen följer konceptet ‘progressiv optimering’ vilket fokuserar på tillgängligheten, alltså optimering av basfunktioner och funktionalitet i hemsidan oberoende av webbläsaren och storleken på skärmen.
Den adaptiva design läser in en special layout för din storlek på skärmen, vilket ger olika versioner av hemsidan och dess interaktivitet men med bibehållen användarvänlighet.
Vad är bäst?
Det finns ingen metod som är bättre än det andra, båda metoderna tillåter användaren att få tillgång till din webbplats oberoende av skärmstorleken, det som skiljer dem åt är teknologin bakom inläsningen av webbplatsen.
Vad som är rätt för din webbplats bör baseras på dina behov och hur dina kunder/användare läser in och använder sig av din webbplats. Har du mycket mobiltrafik bör du kanske avväga att fokusera på en mobilversion av din hemsida där du i större mån kan kontrollera layout, användarvänligheten, interaktivitet och innehåll. Säg att du har en tjänst som 90% av dina kunder använder så bör du ha den lätt tillgänglig och ge den ett stort utrymme vilket kan kan vara svårt i en responsiv miljö, det är här som den adaptiva designen har fördelar.
Den responsiva designen är mer eller mindre en ‘one size fits all’ lösning, layouten fungerar procentuellt vilket gör att layouten ökar eller minskar beroende på skärm. Designen krymper på en mindre skärm vilket kan medför att viss interaktivitet och användarvänlighet som är självklar på en desktop inte alltid kommer till sin rätta på en mindre skärm. Den responsiva strukturen fungerar bäst på enkla webbplatser där man inte har specifika tjänster som behövs optimeras.
Vill du veta mer om responsiv eller adaptiv design och hur du kan optimera din webbplats på bästa sätt, ta ett snack med oss över en kopp!
