Responsivt respektive adaptivt: Hur du väljer rätt designmetod

För bara några år sedan kunde designers skapa en enda statisk webbplatsversion och vara klara inom en dag. Så är inte längre fallet. Nu måste de ta hänsyn till otaliga smartphones, surfplattor och andra smarta enheter – och det måste du också göra.

Detta gäller särskilt för e-handelsföretag. De flesta varumärken har inte längre råd att fokusera på en enda enhet. Mer än 58 % av internettrafiken kommer från mobila enheter, medan stationära enheter står för 40 %. Nästan 60 % av e-handelsförsäljningen sker via mobilen.

Andelen mobiltrafik kommer bara att fortsätta att öka, vilket innebär att designers även måste tillgodose olika användares behov och webbläsarstilar. En mobilanvändare är mindre tålmodig – de vill att webbplatsens innehåll ska vara smått och enkelt att bearbeta. Å andra sidan är en datoranvändare vanligtvis beredd att ägna mer tid åt att studera ett specifikt erbjudande.

Frågan är hur du ser till att din design ser bra ut på alla skärmar och täcker olika användares behov? Är responsiv design den enda vägen att gå? Skulle inte adaptiv design vara ett bättre val i vissa fall? Och hur skiljer sig responsiv och adaptiv design egentligen åt?

Det ska vi ta reda på i den här artikeln.

Responsiv vs adaptiv design: Vad är skillnaden?

Innan vi går vidare bör vi definiera vad vi har att göra med.

Responsiv design gör att ditt innehåll reagerar på användarens skärmstorlek och anpassar sig därefter. Med responsiv design skapar du en enda layout och gör dess enskilda element flexibla för att se till att de visas korrekt på olika skärmar.

Tänk på responsiv design som en uppsättning regler som talar om för ditt innehåll hur det ska bete sig. Du kan använda CSS media queries för att ange målenhetstyper och ange brytpunkter, dvs. villkor som skärmens maximala eller minimala bredd. Brytpunkterna bestämmer när layouten ska ändras.

Adaptiv design innebär i sin tur att ditt innehåll anpassar sig till användarens enhetsparametrar men på ett förutbestämt sätt. Du har inte en utan flera färdiga layouter för att ta hänsyn till olika skärmstorlekar, orienteringar och så vidare. Du bestämmer hur ditt innehåll ska visas i användarens webbläsare baserat på deras enhetstyp.

Kort sagt, med responsiv design dikterar du hur ditt innehåll ska reagera, medan du med adaptiv design även bestämmer slutresultatet. Oavsett vad du väljer så kommer du att kunna skapa en smidig och sömlös upplevelse för både smartphone- och datoranvändare. Och det kommer i sin tur att förbättra din placering i sökmotorerna.

Den här jämförelsen sida vid sida hjälper dig att förstå de viktigaste skillnaderna mellan responsiv och adaptiv design:

Båda tillvägagångssätten är absolut gångbara; de hjälper dig att följa vanliga principer för webbdesign och skapa en kundvänlig webbplats. Den största skillnaden mellan responsiv respektive adaptiv design är hur de utförs.

För- och nackdelar med responsiv webbdesign

Låt oss börja med fördelarna med responsiv design:

• Du behöver inga avancerade kodningskunskaper. Om du använder en webbplatsbyggare som Squarespace, som du kan dra och släppa, så får du en responsiv webbplats som standard. Det är även enkelt att hitta lätta, helt anpassningsbara, responsiva WordPress-teman.
• Responsiv design är populärt. Det har blivit otroligt vanligt och nästan alla UX-designers är bekanta med det. Bootstrap, det mest populära CSS-ramverket, används oftast för att utforma responsiva, mobilanpassade webbplatser.
• Du kan få ut det mesta av den tillgängliga skärmytan. Responsiva layouter ger dig mer kontroll och gör att du kan hantera vitrymden mer effektivt. Som ett resultat kommer din design aldrig att se rörig eller tom ut.
• Det är mer prisvärt. Som redan nämnts så kan du skapa en grundläggande responsiv webbplats själv med hjälp av kodfria verktyg. Alternativt kan du anlita en frilansare eller en agentur, även om du har en begränsad budget. Kolla in vår betrodda lista över agenturskunder för att hitta en pålitlig partner.
• Responsiva sidor kräver mindre underhåll. Även om det finns en ny pryl på marknaden och alla plötsligt använder den, så gör en responsiv webbplats att du inte behöver oroa dig. Du kan behöva genomföra vissa ändringar, men du behöver inte göra om hela layouten.
• Responsiv design innebär snabb leverans. En layout tar helt enkelt mindre tid att utforma än sex stycken, vilket innebär att din nya webbplats kan vara igång på endast några dagar.

Nu till nackdelarna med responsiv design:

• Du skapar färre riktade upplevelser. Du förlorar oundvikligen en viss grad av personalisering när du försöker ta hänsyn till alla befintliga enheter.
• Responsiv design kräver mycket planering och experimenterande. Det är inte en helt simpel strategi – du måste fortfarande testa din design på olika visningsstorlekar innan den tas i drift. Avsätt lite tid för att åtgärda inkonsekvenser eftersom de oundvikligen kommer att dyka upp.

Responsiv design: Exempel och användningsområden

Användningsområdena för responsiv design är till synes oändliga eftersom responsiv design är så mångsidig och lättillgänglig. Alla personliga och kommersiella webbplatser kan dra nytta av att vara responsiva och flexibla, vilket du kommer att se i de exempel som beskrivs här.

Den här responsiva designen från Los Sundays, ett tequilamärke, ser lika fantastisk ut på dator och mobil. Designern prioriterade skickligt innehållet för olika visningsportar och såg till att typografin förblev djärv men inte överväldigande.

Den hypnotiska parallaxeffekten kan bara ses – och därmed uppskattas – på större skärmar. Här får användarna en estetiskt tilltalande men samtidigt snabb och lättviktig upplevelse när de öppnar sidan från en smartphone.

Samma sak kan sägas om nästa exempel från Slam Jam, en klädbutik på nätet. Webbplatsen förvandlas smidigt när du byter till en enhet med en mindre skärm. Produkterna visas i två kolumner i stället för fyra, och menyn flyttas till botten för att göra sökfältet mer lättillgängligt. Karusellen gör att användarna kan upptäcka nya produkter utan att behöva zooma in och ut.

Vårt nästa exempel från Here Design visar att responsiva sidor som är fulla med innehåll och specialeffekter även kan laddas med en rimlig hastighet och se bra ut på alla enheter. Även på små skärmar så känns den här sidan lika harmonisk, och animationerna visas utan några besvärliga fördröjningar, glapp eller inkonsekvenser.

För- och nackdelar med adaptiv webbdesign

Dra inga slutsatser ännu – det finns gott om framgångsrika företag som använder adaptiv design och trivs med detta.

Adaptiv design har flera fördelar:

• Anpassningsbara webbplatser är vanligtvis snabba. Laddningstiden är kritisk för SEO, användarupplevelse och konverteringsfrekvens, och det tar mindre tid att ta fram en snygg, dedikerad sidversion. Kombinera adaptiv design med snabb hanterad hosting så får du en blixtsnabb webbplats.
• Det är ett skräddarsytt tillvägagångssätt med hög precision. Du har full kontroll över layoutens utseende och känsla eftersom den är statisk. Det är du som bestämmer vilka enheter som ska vara målgrupp. Detta gör att du kan utforma mer personliga upplevelser för dina användare och ta hänsyn till deras preferenser.
• Det är enklare att integrera annonser. Det är lättare att konfigurera annonser när du känner till de exakta storlekarna och proportionerna för de element som omger dem.
• Adaptiv design är användbar för att eftermontera en befintlig webbplats. Du kan skapa separata versioner för mobiler och surfplattor och lämna din huvudversion av webbplatsen oförändrad.
• Du kan justera enskilda mallar i stället för att kodifiera om hela webbplatsen eller sidan. Det är mindre smärtsamt att göra ändringar i din design när den består av enskilda statiska layouter, särskilt när du behöver åtgärda ett mindre problem.

Du bör även vara medveten om nackdelarna med adaptiv design:

• Du kan inte garantera att din design kommer att visas som avsett. Vad händer om din besökare använder en enhet som du inte har tagit hänsyn till? I det fallet så blir resultatet mindre förutsägbart.
• Anpassningsbara webbplatser är dyrare. Du behöver ett team av utvecklare för att utforma och stödja din webbplats, vilket innebär högre etableringsavgifter och driftskostnader. Samtidigt ligger den genomsnittliga lönen för en webbdesigner på omkring 57 000 dollar, och deras lönesats kan vara så hög som 114 000 dollar.
• Det är mindre populärt. Du kommer att ha svårt att hitta intuitivt utbildningsmaterial och uppdaterade guider om adaptiv design. Eftersom responsiv design är helt i ropet så fokuserar de flesta kurser i webbdesign på detta.
• Att utforma separata upplevelser är besvärligt och arbetsintensivt. Varje layout måste vara pixelperfekt, så dina designers kommer självklart att lägga mer tid på att arbeta med och testa dem.
• Det är inte nybörjarvänligt. De flesta populära visuella webbplatsbyggare ger dig verktyg för att skapa en enhetlig responsiv design, men du hittar sällan en enkel tjänst som låter dig bygga separata versioner för mobiler, datorer och surfplattor. Detta beror på att adaptiv design kräver mer expertis och skicklighet.

Adaptiv design: Exempel och användningsområden

En adaptiv webbplats kan vara ett bättre val för e-handelsföretag vars målgrupper föredrar att handla via en mobilapp. Dessa företag strävar efter att skapa mycket målinriktade upplevelser för sin målgrupp eftersom de har samlat in tillräckligt med data för att förstå deras shoppingvanor och preferenser, och de vill uppmuntra nedladdningar av appar.

Om du vill se världens mest besökta anpassningsbara webbplats så är det bara att gå till Amazon. Från en stationär dator får du en fantastisk upplevelse. Hemsidan är relativt fylld men inte överväldigande, och du kan omedelbart hitta det du söker.

Här är dock vad som händer om du försöker ändra storleken på webbläsarfönstret:

Du kan bara se en bråkdel av skrivbordsinnehållet eftersom den ovanliga webbläsarbredden inte har beaktats.

Skadar detta tillvägagångssätt Amazon? Inte alls. Försäljningen har fyrdubblats de senaste åren eftersom både den mobila versionen av webbplatsen och appen erbjuder en mycket enkel, snabb och bekväm shoppingupplevelse.

Ett så stort företag som Amazon har råd att överge ”one size fits all”-metoden och vara lite konservativ med sin webbplatsdesign för att hålla den välbekant och omedelbart tillgänglig för miljontals kunder världen över, inklusive äldre personer och användare med synproblem.

Om du tittar noga är Amazons webbplats dessutom delvis responsiv – ytterligare och befintliga element läggs till eller tas bort beroende på visningsfönster.

Ryanair, ett populärt europeiskt lågprisflygbolag, har också en anpassningsbar webbplats som gör det enkelt att boka billiga flygresor. Gränssnittet har ett något konservativt men inte föråldrat utseende, och den får 82/100 poäng på Pingdom Speed Test Tool, vilket är ett bra resultat.

Att ha en något stel webbplats hindrar inte flygbolaget från att slå trafikrekord gång på gång eftersom de flesta resenärer föredrar att boka sina flygresor från en stationär enhet eller med Ryanairs mobilapp.

Att göra för många ändringar på webbplatsen skulle innebära att man förvirrar användare som redan är vana vid det nuvarande utseendet. I stället för att byta till en mer trendig och responsiv version så väljer Ryanair medvetet att lämna sin webbplatsdesign intakt och i stället fokusera på att hålla biljettpriserna så låga som möjligt.

Hur man väljer mellan responsiv och adaptiv design

Bara för att ett tillvägagångssätt är mer utbrett än det andra betyder det inte att du måste anta det. Tappa inte bort det större perspektivet – ditt huvudmål är att göra din webbplats intuitiv, tillgänglig, inbjudande och visuellt sammanhängande. För att göra detta måste du ta ett helhetsgrepp och vända dig till de bästa metoderna för webbdesign.

Följ de här stegen för att avgöra vilken designstrategi som skulle fungera bäst för dig:

1. Tänk först och främst på din målgrupp och deras behov. Tänk på att en användares avsikt inte är baserad på vilken enhet som de använder. Gör användarundersökningar för att ta reda på hur verkliga användare interagerar med ditt gränssnitt. Är det meningsfullt för dig att optimera designen för specifika enheter?
2. Fokusera på ditt specifika användningsområde. Om du exempelvis säljer moderna konstutskrifter så bör du fokusera på att skapa oklanderliga skrivbordsupplevelser för dina användare eftersom de kommer att vilja titta på utskrifterna på en storbildsskärm innan de köper något.
3. Överdriv inte designen för mobilresponsivitet. Det är lätt att förenkla mobillayouter för mycket i ett försök att ta bort alla möjliga friktioner från din användares resa och tillämpa samma logik på en skrivbordsversion. En simpel, enkelspaltig design med en hamburgermeny kommer dock sannolikt att se för tråkig ut på en datorskärm.
4. Bedöm dina resurser och begränsningar. Innan du ens överväger att investera i adaptiva layouter så ska du ta reda på din budget, dina nuvarande behov och långsiktiga mål. Är det avgörande för ditt varumärke att ha en toppmodern webbplats som ser fantastisk ut även på en ultrastor smart-tv? Eller behöver du bara en pålitlig arbetshäst för att sälja produkter till din befintliga målgrupp – en målgrupp som kommer att köpa från dig oavsett vad som händer?
5. Gör laddningshastigheten till en prioritet. Kommersiella webbplatser kan ha eller sakna utsmyckningar, men de måste laddas snabbt för att undvika en ökning av avvisningsfrekvensen. Mer än hälften av användarna överger en webbplats om den tar mer än sex sekunder att ladda.
6. Gör en konkurrentanalys. Chansen är stor att dina främsta konkurrenter redan har genomfört användarstudier och har koll på allt. Kopiera inte bara deras tillvägagångssätt, utan försök i stället att analysera vilka användarsegment som de riktar sig till och varför.

Responsiv design är inte längre en trend – den håller gradvis på att bli en gyllene standard för webbdesign, och dess få nackdelar kommer snart att vara ett minne blott.

Webflow, en visuell webbplatsbyggare, gör exempelvs responsiva sidor upp till 10 gånger snabbare genom att automatiskt optimera uppladdade bilder, vilket löser ett av de största problemen med responsiva webbplatser: deras laddningshastighet.

Det är möjligt att använda det bästa av två världar – kombinera responsiva och adaptiva strategier för att hantera olika sökbeteenden. På så sätt kan adaptiva layouter ha mediefrågor, medan responsiva webbplatser kan innehålla adaptiva element. Man kan lugnt säga att dilemmat responsiv vs adaptiv inte längre är lika relevant – en idealisk webbplatsdesign är en skicklig blandning av dessa två stilar.

Hur man ser om en webbplats är responsiv eller adaptiv

Kontrollera först vad som händer när du ändrar storleken på webbläsarfönstret från en stationär dator. En responsiv webbplats anpassar sig sömlöst till din visningsfönsterstorlek – du märker genast hur flexibel den är.

En adaptiv webbplats ändras inte förrän du når en viss brytpunkt eller byter till en annan enhet. Fram tills dess så kommer en del av innehållet att döljas i stället för att ändras i storlek, och du måste dra i det horisontella scrollningsfältet för att se detta.

Alternativt kan du leta efter mediefrågor i källkoden för hemsidan genom att klicka på CTRL + U i Windows eller Option + Command + U på Mac. Du kan även högerklicka på sidan och välja ”Visa sidans källkod” i rullgardinsmenyn.

Ett enkelt sätt att se hur en webbplats beter sig på olika skärmar är att simulera mobila enheter med Google Chrome Enhetsläge. Öppna webbplatsen som du vill testa och tryck på CTRL + Shift + I i Windows eller Command + Option + I på Mac för att öppna utvecklarverktygen.

Sammanfattning

Du kanske har hört att sökmotorer prioriterar responsiva webbplatser bara för att de ärresponsiva. Det är inte helt sant. En adaptiv webbplats kan vara lika SEO-vänlig som en responsiv webbplats. Google säger visserligen att de föredrar mobilvänliga webbplatser som ger en positiv användarupplevelse, men de begränsar dig inte till endast ett sätt att uppnå detta.

Det finns många metoder för att få din webbplats att fungera felfritt i mobilen. Du kan exempelvis prova WordPress mobilplugins – du behöver inte ens vara kodare för att använda vissa av dem. Om du har utvecklarkunskaper så ska du nyttja våra WordPress-iscensättningsmiljöer för att testa dina ändringar av webbplatsen på ett stressfritt sätt innan de omvandlas till live.

Det finns mobilplugins som kan förvandla din WordPress-webbplats till en app, vilket är ett fantastiskt sätt att leverera en skräddarsydd upplevelse utan att spendera en förmögenhet på en helt ny anpassningsbar webbplats. Om du redan har mobila webbplatser så kan du drastiskt förbättra deras utseende och användbarhet med plugins som WP Mobile Menu.

Oavsett vilket tillvägagångssätt som du väljer, kom ihåg att en plattformsoberoende design kräver att du skapar blixtsnabba upplevelser för dina användare, oavsett när eller hur de får tillgång till din resurs. Att välja rätt hosting-leverantör är halva slaget – det kan göra din webbplats snabbare och säkrare som standard, och du behöver inte oroa dig för oplanerade driftstopp eller låg bandbredd.

Jeremy Holcombe Kinsta

Innehålls- och marknadsföringsredaktör på Kinsta, WordPress webbutvecklare och innehållsskribent. Utöver WordPress tycker jag om stranden, golf och filmer. Jag har även problem med långa människor ;).

• LinkedIn