Responsiv design – för- och nackdelar
Publicerad 8 november 2012, senast uppdaterad 2024-02-28
Responsiv design är en av de hetare teknikerna inom webbutveckling just nu. Inte så konstigt med tanke på att internetanvändandet från mobiler och surfplattor ökar lavinartat. I denna artikel går vi igenom vilka för- och nackdelar som finns med responsiv design.
Trafiken från mobila enheter växer explosionsartat. En färsk undersökning vi gjort visar att andel besökare från mobiler och surfplattor är uppe i 19,0 % vilket är en fördubbling jämfört med året innan. Denna snabba utveckling gör att intresset att mobilanpassa webbsajter just nu är skyhögt.
Det finns mer än en lösning för att mobilanpassa en webbsajt. Tidigare har den vanligaste lösning varit att bygga en separat mobilsajt, ofta på en subdomän. Som t ex m.expressen.se. Sedan ett tag tillbaka är responsiv design ”det nya svarta” för många som jobbar med att mobilanpassa webbsajter. Helt med rätta tycker vi. Vi byggde själv nyligen om båda våra sajter med just responsiv design.
Google gick i somras (äntligen) ut och rekommenderade hur de tycker man ska mobilanpassa sin sajt. För alla vi som jobbar med sökmotoroptimering är Googles syn på saken såklart viktig i vårt val av lösning. Och Google rekommenderar bland annat just responsiv design. Vår vidare tolkning av Googles rekommendation är att de föredrar responsiv design framför de andra lösningar som de föreslår.
Vad innebär då responsiv design rent tekniskt? Jo, baserat på en besökares skärmstorlek anpassas sajtens grafik, struktur och innehåll automatiskt med hjälp av bland annat HTML5, CSS3 och Javascript.
Som med nästan allt finns det både för- och nackdelar med reponsiv design. I vår lista nedan tar vi avstamp i sökmotoroptimering men har även med mer allmänna för- och nackdelar.
Fördelar med responsiv design
- Det är samma URL:er oavsett var besökaren kommer från. Detta ger flera fördelar:
- Med mobilsajter på t ex subdomäner finns det risk för problem med duplicerat innehåll. Detta kan teoretiskt fixas med cannonical URLs. Men cannonicals är något som helst ska undvikas då det riskerar att både bli komplext och skapa problem. Med responsiv design slipper du helt att fundera på redirects av olika slag
- Externa och interna länkar pekar till ”rätt” URL. Genom att alltid använda en och samma URL per sida hamnar all länkkraft där den ska vara
- Det är enklare att kommunicera med sina användare då man alltid kan använda och skicka samma URL
- Genom att använda en uppsättning HTML istället för flera är det enklare för Google att spindla sajten
- Det är mer kostnadseffektivt att underhålla en webbsajt jämfört med flera. Att göra mobilspecifika sajter kan innebära många anpassningar för att det ska funka med alla olika typer av mobiler
Nackdelar med responsiv design
- Responsiv design är en kompromisslösning när det kommer till webbdesign. Det är svårt att göra både den optimala datorsajten och den optimala mobilsajten med responsiv design. Med responsiv får du något som funkar bra för alla skärmar men sannolikt inte 100 % optimalt för någon skärmstorlek. Ju bättre man är på responsiv design desto mindre av en kompromiss behöver det bli
- Nackdelen vi i dagsläget ser sökmotoroptimeringsmässigt är att det blir svårare att optimera för olika sökord för dator och mobilt. Men det är endast i få fall där detta kan tänkas vara relevant att vilja göra
Vår rekommendation på Pineberry är att använda responsiv design för att mobilanpassa sajter. Främst såklart på grund av att det ger flera fördelar från ett sökmotoroptimeringsperspektiv jämfört med alternativen.
Om du inte redan är övertygad om att responsiv design är rätta vägen så tänk på att Barack Obama valde responsiv design medan Mitt Romney förlitade sig på en separat mobilsajt. Och vi vet alla vem som vann valet 🙂
Har vi glömt någon för- och nackdel?
14 kommentarer på "Responsiv design – för- och nackdelar"
Kommentarsfältet är stängt.
En nackdel med responsivt, kanske framför allt när man bygger på ett cms, är att det kan bli svårt att strippa de mindre versionerna storleks- och kodmässigt så mycket som man kan göra på en ”platt” sida byggt för mobil. Laddtiden kan påverkas, mao.
Eventuellt kan det också finnas en fördel på extremt stora siter, eller siter med komplexa lösningar, att göra en helt mobilanpassad version. Ett exempel är tidningarna där det kan bli extremt många element och detaljer som kan skapa problem responsivt. Ett annat är tex sj.se med ganska komplexa databaskopplingar.
Dock tycker jag på det stora hela definitivt att responsivt på sikt är en bättre lösning i de allra flesta fall och rekommenderar det precis som ni.
Jonas,
Tack för din kommentar. Jag håller med dig. Responsiv design är sannolikt bästa lösningen för de flesta sajter, men inte alla. Det finns som du nämner sajter där det totalt sett är bättre med andra lösningar.
Nackdelarna är nog övergående. När man hållit på med webben ett tag blir man ganska hemmablind, åtminstone riskerar man att bli det. Jag har ganska sent insett att datorer och mobiler inom kort kommer växa ihop. Gränserna kommer helt enkelt att suddas ut. Minns när hemsidorna skulle anpassas för 640 pxl bredd, sen 800, sen 965..Jag tror att det vi nu får se är en typ av övergång som är att jämföra med övergången från att skapa webbplatser med tabeller till att använda CSS. Vissa kommer hänga kvar i det gamla tänket länge medan andra anammar det nya direkt. Teknikerna för att skapa det vi nu kallar responsiva webbplatser kommer säkert utvecklas så att vi i framtiden får se något helt nytt.
Mobilsajter brukar ju visa mindre varianter av både ”standardbilder” och miniatyrer medan media queries bara får normalstora bilder att visas i mindre format. Precis som Jonas säger, leder det till större datamängder och långsammare surfande – och det senare behövs inte direkt. Däremot kan det nog underlätta en hel del för sajtägare om de t.ex. ska utföra uppdateringar där bildformaten ska bytas ut. Och efter att jag själv pysslat med ett eget CMS under en längre tid, kan jag tänka mig att denna kompromisslösning kan vara till _stor_ fördel för dem som faktiskt utvecklar webben – vilket kanske kan leda den framåt lite fortare.
Man kan tillägga att det sociala värdet från likes och shares konsolideras till en och samma URL.
Dock är det största problemet med laddning av många sidor på mobilen inte storleken, utan antalet anrop. För webbläsare som kan handskas med det är inbakade SVG-bilder en bra idé, och överlag är det smart att använda base64-kodning av bilder som bara är till dekoration (tänk hörn, knappar som bakgrund, allt som inte har ett värde som bild i sig själv).
För oss e-handlare är det väldigt svårt att göra riktigt bra responsiva mobilbutiker så att de faktiskt fungerar rent praktiskt, där är nästan mobilbutik att föredra även om det har sökmotormässiga nackdelar
Katrin,
Tack för din kommentar. Jag håller med om att det är extra knivigt att mobilanpassa webbshoppar. Det gäller oavsett vilken teknik man väljer, även om såklart en helt separat mobilsajt ger något mer möjligheter.
Jag tror dock att man i många fall kan komma ganska långt med responsiv design även för webbshoppar. Det kräver bland annat att man skalar bort väldigt mycket jämfört webbversionen samt hittar en vettig lösning för ”trädstrukturen” som ofta finns i shoppar. Det svåraste är garanterat att få till köpprocessen.
Om man tycker responsiv design ger för tunga mobilsidor har man inte fattat tekniken. Man kan använda olika mallar men samma innehåll, man kan ladda innehåll och annonser med JS och därmed anpassa mängden innehåll till enheten som tittar. RESPONSIVE!
Tips: JS kan mäta laddningstiden för en eller flera bilder på sidan och därigenom avgöra hur mycket innehåll som användarens enhet/anslutning kan hantera.
Daniel: Jag gissar att sådana mätningar med JavaScript inte är det allra lättaste att knåpa ihop själv, utan att det handlar om ett relativt stort skript. Frågan blir då hur mycket man tjänar på att skippa sina medelstora bilder för att istället ladda hem extra mycket text, kanske tillräckligt mycket för att överskrida längden på innehållet i många fall (särskilt i webbutiker, kan jag tänka mig). Vill man sen inte inkludera skriptet i sidan själv, blir det ett extra anrop som slöar ner i alla fall. Dessutom har det hänt att jag själv stängt av JavaScript i mobilen för att jag inte ska behöva vänta på effekter, popups, med mera. Då fungerar inte skript särskilt bra. Inte alls, för att vara mer exakt.