Digital design | Rekommenderad | Webbdesign | Webbyrå

Vad är responsiv design? En nybörjes guide till den anpassade hemsidan

Av Linda Axelsson | 21.10.16

Lästid: 5 minuter
‹ Tillbaka till listningen

Vad är responsiv design?

Responsiv design innebär att layouten ändras och anpassas efter skärmens storlek, vilket gör att hemsidan alltid ser bra ut -oavsett vilken enhet besökaren använder.

Tekniken har utvecklats och idag har vi ett enormt utbud av smartphones, surfplattor och datorer i all världens olika skärmstorlekar. För att hemsidor ska se bra ut i alla fönster måste strukturen ändras och bilder skalas om.


Det krävs lite arbete i utvecklingsfasen för att hemsidan ska bli responsiv men resultatet är helt magiskt. Hemsidans struktur, layout och innehåll anpassas automatiskt efter besökarens skärm och ser lika crisp ut i alla fönster.

Det är knappast användarvänligt att behöva scrolla i sidleds eller zooma in/ut för att kunna läsa text eller se hela bilder. Har ni endast anpassat er webbplats för desktop är detta vad era kunder möts av om de går in på er hemsida via sina smartphones eller surplattor. 

Går man in på en hemsida och ser att den inte är responsiv stänger man snabbt ner den igen.

 

Redan koll på responsiv design? Läs den här checklistan om vad du ska tänka på för att välja rätt webbyrå

 

Vad är responsiv design?

 

Varför ska hemsidan vara responsiv?

Idag har 91 procent av Sveriges befolkning tillgång till internet, 77 procent äger en smartphone och 59 procent har en surfplatta. 

Ungdomar 16-25 år är uppkopplade på internet i sina telefoner i genomsnitt 13.9 timmar i veckan och 26-35åringar surfar i genomsnitt 10.9 timmar.

Med dessa siffror i handen är det inte svårt att räkna ut varför det är så viktigt att hemsidan ser bra ut även i mobil/surfplatta.

Google har dessutom uppdaterat sina sökmotorer för att förbättra kvaliteten på sökträffar i surfplattor och smartphones, vilket betyder att webbplatser som inte är responsiva kommer att ranka sämre. 

Förutom att användarvänligheten blir sämre om du inte har en responsiv webbplats så rankar de alltså sämre på Google. Har du en responsiv hemsida kommer du med andra ord att ranka högre än de icke responsiva hemsidorna.

 

Är bilder också responsiva?

Javisst! Bilder är responsiva för att de ska se bra ut på alla enheter och skärmstorlekar. För att en stor bild ska se bra ut på små skärmar kommer den behöva beskäras. Behållaren som bilden ligger i kommer alltid att vara 100 procent bred men den kan komma att variera i höjd. Bilden är programmerad till att alltid vara 100 procent i höjd eller sidled beroende på hur stor skärm besökaren har.

Om skärmstorleken gör att bilden inte fyller ut i höjdled och bilden är 100 procent bred kommer den att skifta och istället lägga sig 100 procent i höjdled (och beskäras i sidled). Hur bilden beskärs bestäms av designern baserat på vilken typ av bilder som används och på vilken plats av sidan de är placerade.

Man kan välja att placera bilden i överkant, underkant eller centrerat (y-led), samt till vänster, höger, eller centrererat (x-led).

I exemplet nedan ser ni vår toppbild på startsidan. Här har vi valt att justera bilden så att den lägger sig överkant mot överkant och centrerat i x-led. Eftersom att bilden dessutom är tillräckligt bred för att passa in i behållaren kommer den att beskäras i höjdled. Justeringen (överkant och centrerat) bestämmer att det är den undre delen av bilden som beskärs.

Hade vår bild varit bredare och lägre hade den i x-led beskurits lika mycket på varje sida, eftersom att vi justerar centretat i x-led.

Hade vår bild varit annorlunda i förhållanden (bredare och lägre) hade den då i x-led beskurits lika mycket på varje sida (eftersom vi justerar centrerat i x-led). Lätt va?

Varför ska bilder vara responsiva på en hemsida?

  

 

Sugen på en responsiv hemsida?

Läs mer om andra smarta tips och tricks i vår samlade guide för dig som planerar att göra en redesign av din hemsida. Ladda ner den här eller tryck på knappen nedan:

 

Ladda ner guiden

Av Linda Axelsson

Project Coordinator

Purr, purr purr. She’s the crazy cat lady who loves structure and always strives for purrfection.
Projektkoordinator

Purr, purr, purr. Hon är den galna kattjejen som älskar struktur och drivs av purrfektion.

Kontakta oss.

Fyll i formuläret nedan för att komma i kontakt med oss!