Responsiv webbdesign

Vad är responsiv (webb-)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. Webb­sidorna ser då bra ut på både datorer, surfplattor och mobil­telefoner.

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 mobil­tele­foner, surfplattor och datorer, utan att behöva skrolla i sidled samt zooma in och ut 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 måste välja 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 för övrigt 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 skrolla 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 sorters enheter.

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

Bootstrap är ett populärt system för responsivitet

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.

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 klurar jag ut.