Kanske har du hört att en hemsida ska vara byggd med en responsiv design? Att det förbättrar användarupplevelsen? Men vad innebär det och varför är det viktigt? Här går vi igenom vad responsiv design är, vad det innebär för ditt företag och hur det går till i praktiken.
Mobilanvändare står idag för en hög andel av den totala internettrafiken. Allt färre använder datorn till att surfa på internet för att istället använda sin telefon eller surfplatta. Detta ställer nya krav på hemsidors design då dom måste vara anpassade för flera skärmstorlekar. För att lösa detta är nya hemsidor idag ofta byggda (helt eller delvis) med något som kallas för responsiv design.
Vad är responsiv design?
Har du någonsin varit inne på en mobilsida där texten är så liten att den inte går att läsa, där delar av innehållet inte syns eller att andra funktioner inte verkar anpassade efter mobilen? Då har du besökt en sida utan responsiv design.
För att anpassa sidan för flera enheter kan man göra på två sätt:
Designa flera olika versioner av sidan, en för varje enhets format, varje version med sina egna fasta dimensioner (adaptiv design).
Designa en version som är flexibel och kan expandera eller krympa för att passa enhetens format (responsiv design).
En responsiv design gör att layouten förändras efter behov, t.ex. beroende på vilken storlek och upplösning som användarens skärm har. Designen behöver inte vara anpassad enbart för mobiltelefoner, utan även andra format som läsplattor och större skärmar. Att designen är responsiv innebär att sidan kan anpassas utan att en separat version av sidan behöver utvecklas för varje format. Genom att använda en mix av flytande rutnät, bilder och objekt kan hemsidan anpassas för att fungera efter aktuellt behov.
Hur fungerar responsiv design?
Det finns en rad tekniker som används för att göra designen responsiv. Låt oss översiktligt gå igenom några delar som är bra att känna till.
Flytande rutnät (fluid grids)
Sidor utan responsiv design använder sig av ett rutnät bestående av rutor med fixerad storlek. Varje område har en bestämd bredd oavsett vilken enhet som används, vilket fungerar dåligt om rutnätet har en bredd om 1024 pixlar och användarens mobiltelefon en bredd om bara 480 pixlar. Så här kan ett rutnät se ut:
För att göra sidan anpassningsbar kan man istället använda sig av ett flytande rutnät. I dessa finns ingen fixerad bredd eller höjd. De olika rutorna anpassar sig istället proportionerligt efter skärmens storlek. Så här kan ett flytande rutnät se ut (procenten är avrundade):
Med flytande rutnät är alltså inte storleken fixerad, utan anpassas proportionerligt i procent när det antingen expanderar eller krymper beroende på användarens enhet. I exemplet är sidhuvudet alltid lika stort som skärmens fulla bredd, dvs 100% av ytan. Huvudinnehållet och sidofältet är 70% respektive 30% av bredden.
Responsiva bilder (fluid images)
Även det sätt som bilderna visas på måste anpassas. En för stor bild på en liten skärm kan förstöra hela strukturen och dessutom bidra till att sidan tar enormt lång tid att ladda. Därför behövs det responsiva bilder som är flexibla. Beroende på faktorer som skärmstorlek, upplösning, nätverksanslutning, orientering och sidlayout sätts regler upp för hur bilden ska anpassas.
Mediaförfrågningar & brytpunkter (media queries & breakpoints)
När flytande rutnät och responsiva bilder är applicerade är det dags att knyta ihop säcken med användningen av mediaförfrågningar (media queries) och brytpunkter (breakpoints). Dessa upptäcker vilka dimensioner den enhet som används har och får designen att se bra ut oavsett skärmstorlek. För att underlätta mediefrågor finns brytpunkter, dessa är värdena vid vilka innehållet på din webbplats kommer att omorganiseras efter den nya skärmstorleken.
Förenklat så används alltså media queries och brytpunkter för att kunna anpassa innehåll efter den använda enhetens egenskaper (ofta webbläsarens bredd). Dessa gör att enhetsspecifika regler för att exempelvis dölja, visa eller flytta objekt kan sättas upp.
Att tillhandahålla en mobilanpassad hemsida är idag ett måste för företag oavsett innehåll, storlek eller bransch. Man kan argumentera för att det är den enskilt viktigaste faktorn för god användarupplevelse på alla olika enheter. Detta går att göra antingen med element som är responsiva eller en hel webbplats som är fullt responsiv. Nu när du vet vad konceptet innebär, så vet du också mer om hur ditt företag leverera en optimalt mobilanpassad upplevelse.