Responsiv webbdesign

Vad är responsiv design?

Med responsiv design ("följsam design") förändras och anpassas webb­sidornas layout helt auto­matiskt till besökarens enhet, skärm­storlek och skärm­upp­lösning.

Antal kolumner och bilder (i bredd) kan med responsiv design auto­matiskt anpassas. Bilder och annat kan också skalas om i förhållande till fönsterbredden. Det innebär att besökare kan se samma webbplats från till exempel mobiltelefoner, surfplattor och persondatorer, utan att behöva scrolla i sidled samt zooma ut och in vilket hade behövts annars.

Varför responsiv design?

Responsiv design med mobil­anpassning är ett populärt alternativ till att designa olika versioner av webbplatsen där besökaren aktivt väljer om denne vill se sidan i "desktopversion" eller "mobilversion". Det är också kostnads­effektivt för ägaren att endast behöva skaffa samt underhålla en version av sajten. Google prioriterar dessutom mobilan­passade hemsidor i sina sökresultat.

• mobilsökningar utgör mer än hälften av alla sökningar
• för många annonsörer kommer den största delen av trafiken från mobilanvändare
• besökare är fem gånger mer benägna att lämna webbplatser som inte är mobil­anpassade.

I mobilläget får besökarna ibland lite mindre information för att lättare få en snabb överblick. De får större text och knappar, tydliga menyer som är enkla att klicka på, samt en layout där de slipper zooma in och ut och i stället kan scrolla upp och ned.

Responsiv design med mobil­an­passning är standard när jag gör hemsidor

Jag gör hemsidor med full responsiv design. Då fungerar webb­sidorna optimalt i alla enheter.

Webbsidorna jag gör har full responsivitet, med mobilanpassning. De ser därmed bra ut och blir lättlästa i alla sorters enheter. Jag gör dessutom alltid extra justeringar i koden och layouten för att ytterligare anpassa webbsidorna till de olika enheterna!

Jag använder företrädes­vis Bootstrap 5

B Bootstrap är det vanligaste systemet för att skapa avancerade, responsiva webbsidor. Jag använder företrädes­vis Bootstrap 5.x, den senaste utgåvan av Bootstrap. Första stabila versionen av Bootstrap 5 släpptes 5 maj 2021.

Bootstrap 5 har stöd för de nyare utgåvorna av dagens populära webbläsare och plattformar.

Om du behöver stöd för lite äldre webbläsare använder jag Bootstrap 4.x. Vilka webb­läsare du behöver stöd för beror på vilka dina mål­grupper är (och vad de använder för webb­läsare). Det klurar jag ut.

Bootstrap-versionernas bryt­punkter

Brytpunkter i en responsiv layout motsvarar olika webbläsar­bredder i pixlar (px). Exempel­vis är 768px brytpunkt vid övergång från surfplatta till mobiltelefon i Bootstrap.

I alla versionerna av Bootstrap ingår mobil­anpassning, men antalet bryt­punkter är i övrigt olika. Bootstrap 3 har till exempel responsivitet med fyra bryt­punkter (se bilden ovan). Bootstrap 4 har fem brytpunkter och Bootstrap 5 har sex brytpunkter. Den sjätte brytpunkten i Bootstrap 5 gör det möjligt att ännu bättre kunna utnyttja bredden i datorer med stora (breda) skärmar.

Bootstrap 5 vs Bootstrap 3 och 4

De största skillnaderna mellan Bootstrap 5 och Bootstrap 3 och 4 är att Bootstrap 5 är lite snabbare samt har mer responsivitet än de andra med sina sex brytpunkter. I Bootstrap 5 har man också bytt ut jQuery mot (vanilla/"rent") JavaScript. jQuery är ett JavaScript-bibliotek.

Vill du ha hjälp?

Hos mig får du en responsiv, mobilanpassad hemsida, med extra allt. Jag skräddarsyr den till dig. Till kontaktsidan