Responsiv design för e-handel - är det bra eller dåligt?

Det har varit mycket prat om responsiv design ett tag nu och dom senaste veckorna har jag diskuterat fenomenet både internt och med olika kunder inom e-handel, men vad är egentligen responsiv design och är det bra eller dåligt för e-handel?

 

Jag tycker att det är lite roligt att responsiv design det senaste året seglat upp som en riktig snackis och en del personer hyllar det som svaret på alla problem med anpassning för olika medium, medan andra är mer försiktiga i sin bedömning.Det är roligt för att responsiva design är inget nytt egentligen, det är en naturlig utveckling av det som brukar kallas för fluid design, dvs att innehållet skalas procentuellt beroende på besökarens skärmupplösning.

 

Fluid blev också en stor snackis när den kom och idag är det ingen som egentligen pratar om det och jag gissar att responsiv design kommer att följa samma mönster.

 

Två varianter på Responsiv Design

Det är också intressant att det verkar vara två olika typer av designlösningar som båda kallas för responsiv, vilket kan göra saken lite komplicerad att förstå vad man pratar om.Den första varianten är en design som använderMedia Queries för att byta CSS när en viss regel aktiverat, dvs när storleken på skärmfönstret når ett visst värde så aktiveras en ny CSS. Jag kallar den varianten för en CSS Switch Design (CSD) eftersom innehållet inte aktivt skalar mellan dom olika stegen.

 

Andra kallar det Adaptive design. Ett exempel på det är POC Sports.Den andra varianten är det som egentligen är en responsiv design, dvs innehållet skalas aktivt baserat på skärmenfönstrets storlek. I en responsiv design så skalas allting, från fonter till grafik till video osv och sedan används Media Queries för att göra struktuella ändringar vid vissa skärmfönster storlekar. Ett exempel på det är QR Shop.

 

Vad är egentligen Responsiv Design?

Responsiv design är egentligen en fortsättning på fluid designen där man äntligen kan få bukt med de stora problemen som kom med fluid designen nämligen att det svar svårt att skala innehållet på ett bra sätt. Det blev också lite fel när fluid designen skulle in i mobilen eftersom även om du skalar bra så är det liten skillnad mot en helt vanlig design som mobilen zoomar.

 

Med de nya teknikerna i CSS3 och HTML5 så blev fluid intressant igen och det var egentligen med introduktionen av Media Queries som det blev riktigt intressant och termen responsiv design myntades.Idag går det bra att använda dessa tekniker för att skapa en skalbar lösning, både för text, grafik och video, även om de kanske inte är helt perfekta. Jag är rätt säker på att dessa tekniker kommer att förfinas och utvecklas rejält under 2012.

 

För och nackdelar med Responsiv design

Fördelar

• En markup som styr alla. Vi slipper krånglet med flera olika sajter och kan jobba utifrån en html markup.Alla tittar inte på sidor i fullskärm och då fungerar reponsive design bra genom att det ändrar storlek utifrån besökarens förutsättningar.
• Vi måste arbeta fram designen med mobilen i fokus, den måste alltså komma först vilket ger ett bättre mobilt tänk.
• Ingen länkförvirring där en länk leder till den mobila sajten och en annan till www sajten vilket kan bli fel om mottagaren öppnar på en annan typ av enhet.

Nackdelar

• Längre utvecklingstid vilket gör projekten dyrare. Flera CSS mallar måste tas fram och testas.
• Browser kompabilitet eftersom det krävs nyare tekniker som inte stöds i alla webbläsare (HTML5/CSS3 tex).
• Laddningstider, speciellt på mindre medium eftersom vi fortfarande jobbar med samma grafik som i högre upplösningar. Det blir flera anrop till servern vilket kan orsaka korvstoppning och ge längre laddningstider.
• Formatförvirring där vi måste ta saker som banners och liknande i beaktande eftersom de inte kan användas skalbart oftast.
• Vilka format ska vi jobba mot? Det finns mängder av olika upplösningar och om det saknas anpassad layout så förvrängs innehållet. Det kan ge stora utslag på till exempel TRUST.
• Det saknas kompatibla lösningar för skalbar video och vilket videostandard ska användas för att se till att sidan är framtidssäker som också fungerar reponsivt?
• Olika upplösningar har olika mål vilket är svårt att anpassa för när grundkoden ligger fast i en responsiv design. Neurowebdesign får sämre genomslagskraft vilket påverkar konverteringsgraden på affärskritiska webbsidor.
• Skiter det sig med den mobila delen så påverkas även webben och vice versa vilket gör att det går inte att jobba med en del separat.

Responsiv design för e-handel

I min roll så jobbar jag mest mot e-handel och det är också där jag ser minst fördelar med en responsive design. Anledningen är att responsiv design minskar möjligheten att styra innehållet och därmed besökaren på webbplatsen eftersom vi jobbar med samma HTML markup i såväl webb som mobil lösning.

 

Skillnaden mellan mobil och webb är avsevärd när det gäller hur vi jobbar med innehållsstyrning och i en e-handels lösning så behövs det en rejäl ändring i strukturen för att effektivt kunna erbjuda e-handel på ett bra sätt, dvs för att få så bra konvertering som möjligt.Till exempel kan vi ha call-to-action funktionen väldigt bra och fokuserad på en webbsida och när layouten anpassas för mobilen så hamnar call to action funktionen på skärm 5, vilket inte alls ger samma effekt.

 

Ska man använda Responsiv design då?

Responsiv design är inget dåligt alternativ när webbplatsen är rent informativ med få grafiska element och videofilmer. När det blir många grafiska element eller video som ska skalas, då blir det inte lika bra såvida man inte använder sig av CSD och olika fomat som CSS mallarna anropar.Responsiv design ÄR tyngre för mobilbrowsing än vad en renodlad mobilsajt är och den utopi som en del verkar tro finns med reponsive deign att man enbart behöver jobba med en sajt så fixar det sig med de andra också...den existerar inte.

 

Det behövs ofta mer handpåläggning än med separata sajter, speciellt för e-handels sajter.Precis som när fluiddesignen kom så blev det ett aktivt val mellan att ha en design där innehållet förändrades och en statisk layout där man behåller kontrollen över innehållet. Idag ser vi att den statiska designen dominerar och jag är övertygad om att även i framtiden kommer den statiska designen att vara dominerande över Responsiv design, speciellt för ehandels och affärskritiska webbplatser där säljnytta och konvertering är det primära.