”Att basera framtiden på tidigare erfarenheter är problematiskt då det begränsar utvecklingen av nya idéer och media”.
Detta citat nämns I boken ”Implementing Responsive Design” skriven av Tim Kadlec 2012 och han menar att designers under en lång tid har försökt att återskapa den kontroll som vi har över en utskrift även på webben. Det vill säga att webbsidor har riktats för specifika webbläsare och optimerats för specifika bredder – allting för att upplevelsen ska bli identisk och oberoende av plattform och webbläsare. Men är detta verkligen det bästa sättet?
Som vi nämnde i föregående avsnitt är webben ett hela tiden expanderande medium och marknaden av enheter likaså. Detta gör att den nya trenden responsiv webbdesign kommer rätt in i tiden och är ett oerhört vasst verktyg inom webbranschen. Istället för att sträva efter pixelperfektion för en specifik webbläsare som det gamla tankesättet fokuserade på vill vi nu istället öka användarvänligheten och nå så stor skara användare och enheter som möjligt.
Därför ska du välja en responsiv webbplats för ditt projekt
Responsiv webbdesign är en kraftfull teknik som har många fördelar. Här har vi listat upp ett flertal anledningar till varför just ditt projekt bör använda responsiv webbdesign:
- Tid och kostnader sparas för utveckling och design av ett flertal separata webbsidor anpassade till olika enheter. Det är till exempel vanligt med en separat webbplats för datorer, tablets och smartphones.
- Endast en webbplats behöver testas, uppdateras och underhållas istället för en rad olika webbplatser.
- Optimerad och samma användarupplevelse för alla användare baserat på den enhet som används. Ökad åtkomlighet för mobiltelefoner och tablets. Användaren slipper en svårnavigerad och oanpassad webbplats vilket kan öka er försäljning.
- Förbättrad sökoptimering (SEO) genom att endast en URL används för alla versioner av webbplatsen. Analysverktyg såsom Google Analytics är idag optimerat för att hantera flera enheter och responsiv rapportering
- Analyser av er webbplats blir enklare via en helhetsbild av alla trafik.
Som du ser finns det en rad olika fördelar med att välja just responsivt. Självklart erbjuder vi denna tjänst som du kan läsa mer om här.
Några funderingar
För att få ut det bästa av din responsiva webbplats bör en noggrann planering av nedanstående punkter göras:
- Prestanda – hur ska webbplatsen kodas så att användarupplevelsen blir maximal? Ett tänk kan fungera för en typ av uppkoppling och enhet men inte för en annan. Exempelvis är prestandan olika för mobil wifi vs trådbunden uppkoppling.
- Kontext – vilka enheter använder dina besökare och hur kan dessa användas för som en fördel för din webbplats? Ett exempel är geolocation som kan interagera på olika sätt beroende på enhet.
- Innehållshantering – behövs innehållet omorganiseras för att få en bra struktur? Hierarkin på en webbplats kan gå förlorad om innehållet inte omstruktureras.
- Tidsinvesteringar – en responsiv webbsida tar längre tid att utveckla än en webbplats som inte är det. Som kompensation jämnar dock tiden oftast ut sig under det långa loppet då det bara krävs underhållning av en sida istället för flera.
- Webbläsarstöd – för att din webbplats ska nå så många webbläsare som möjligt, både nya och gamla, och slippa bortfall på grund av olika stöd för media queries bör den kodas utefter så kallade progressive enhancement. Denna strategi bygger på att utveckla för de minst kapabla webbläsarna först för att sedan gradvis förbättra användarupplevelsen, från den minsta skärmen och uppåt.
- Annonsering – är din webbplats i behov av detta? Det kan förekomma problem med att annonsera på responsiva webbplatser. Dels vad gäller den tekniska delen men även då byråer måste skapa ett flertal olika annonser för olika enheter och skärmstorlekar.
Hur påverkas min webbplats design av att vara responsiv?
Vid responsiv webbdesign kommer innehåll att anpassas efter användarens enhet. Detta betyder att layouten kommer att skalas om, flyttas och ändras beroende på vilken skärmupplösning som dina besökare har. Men trots att det krävs en del justeringar i hur innehåll presenteras är det viktigt att webbplatsen fortfarande har samma känsla så att besökarna känner igen sig vare sig hen använder en dator eller en smartphone.
De vanligaste förändringarna som sker när du drar i webbläsarfönstret för att förminska webbplatsen eller när den visas på en smartphone exempelvis är att ”luften” på sidorna av innehållet försvinner och lämnar mindre marginaler. Innehåll såsom texter och bilder dras ihop och kanske till och med förminskas eller förstoras beroende på enhet och dess läsbarhet. Skalas webbplatsen ner till så liten som på en smartphone förflyttas oftast innehållet ner under varandra i viktighetsordning så att endast en bild eller text syns på rad vertikalt. Detta beror självklart på om smartphonen hålls upprätt eller på sidan. Vid en mobilversion av sidan är det även vanligt att endast det viktigaste innehållet syns på denna version och att annat inte lika viktigt innehåll då döljs för att framhäva det mest intressanta för besökaren. Navigationen på webbsidan är även viktig för att göra det enkelt för besökaren att hitta på webbplatsen.
Något som kan vara klurigt att få till på ett snyggt och effektivt sätt är just navigationen. Kanske är din webbplats i behov av väldigt många menyval? Hur ska då dessa presenteras på ett bra sätt i en liten smartphone?
Det finns en rad olika lösningar på detta inklusive alltifrån toggle navigation, footer ankare, top länkar till multi-toggle och vänster navigation som glider över skärmen.
För att se exempel på hur navigering kan lösas kan du gå in på Brad Frosts Responsive Patterns. Här finns en mängd olika exempel på hur responsiv webbdesign kan användas i olika sammanhang. Scrolla ner till ”Navigation” för att välja typ av navigation och förminska sedan ditt webbläsarfönster för att se resultat.
I nästa avsnitt
I kommande avsnitt går vi igenom framtidsutsikter vad gäller responsiv webbdesign. Är denna trend här för att stanna? Det är något som vi bland annat kommer att diskutera.
Får du inte nog av responsiv webbdesign tills dess kan du kika på Media Queries som erbjuder en mängd olika exempel på responsiva webbplatser.
