Internet nyttjas alltmer av mobila enheter, och det räcker inte längre att ha en statisk webbplats-design som endast ser bra ut på en datorskärm.
Webbplatsens design måste även se bra ut på surfplattor, 2-i-1 bärbara datorer, och olika smartphone-modeller med olika skärm-mått.
Så att forma ditt innehåll till en statisk massa kommer inte att räcka i den tid vi lever i.
Med en responsiv webbdesign, kan du se till att din webbplats ser så bra ut som möjligt på mobiltelefoner, surfplattor, bärbara datorer, och stationära skärmar.
En förbättring av användarupplevelsen innebär dessutom högre konverteringsfrekvens och tillväxt i verksamheten.
Den här guiden går igenom allt du behöver veta om responsiv webbplatsdesign. Detta inkluderar definitioner, en stegvis genomgång, exempel, och mycket mer.
Kolla in vår videoguide om responsiv webbdesign:
Vad är responsiv Webbdesign?
Responsiv design är en metod som gör att ditt webbinnehåll anpassas efter de olika skärm- och fönsterstorlekarna på en mängd olika enheter.
Ditt innehåll kan exempelvis delas upp i olika kolumner på skrivbordsskärmar, eftersom de är tillräckligt breda för att rymma den designen.
Om du separerar ditt innehåll i flera kolumner på en mobil enhet blir det svårt för användarna att läsa och interagera.
Responsiv design gör det möjligt att leverera flera, separata layouter av ditt innehåll och din design till olika enheter beroende på skärmstorlek.
Responsiv webbdesign vs adaptiv design
Skillnaden mellan responsiv design och adaptiv design är att responsiv design anpassar återgivningen av en enda sida. Adaptiv design levererar istället flera helt olika versioner av samma sida.
Båda dessa sätt är avgörande webbdesign-trender som hjälper webmasters att kontrollera hur deras webbplats ser ut på olika skärmar. Tillvägagångssättet är dock annorlunda.
Med responsiv design kommer användarna att komma åt samma grundläggande fil via sin webbläsare, oavsett enhet. CSS-koden kommer däremot att styra layouten och återge den annorlunda baserat på skärmstorlek. Med adaptiv design finns det ett skript som kontrollerar skärmstorleken, och sedan kommer åt den mall som är avsedd för den enheten.
Varför det är viktigt med responsiv design
Om du är ny på webbdesign, utveckling, eller bloggning, kanske du undrar varför responsiv design är viktigt?
Svaret är enkelt. Det räcker inte längre att designa för en enda enhet. Mobil webbtrafik har gått om datorernas webbtrafik och utgör nu majoriteten av webbplatsernas trafik, mer än 51%.
På grund av att över hälften av dina potentiella besökare använder en mobil enhet för att surfa på internet, kan du inte bara ge dem en sida som är avsedd för datorn. Det gör det svårt att läsa och nyttja sidan, och leder till en dålig användarupplevelse.
Inte nog med det, användare på mobila enheter utgör även majoriteten av besök på sökmotorer.
Mobilen har under de senaste åren även blivit en av de viktigaste reklamkanalerna. Även på en post-pandemisk marknad, ökar mobila annonsutgifter med 4,8% till $ 91.52 miljarder.
Oavsett om du väljer att annonsera på sociala medier eller använda en organisk strategi som YouTube SEO, kommer den stora majoriteten av din trafik från mobila användare.
Om dina målsidor inte är optimerade för mobiler kan du inte maximera avkastningen på investeringen i marknadsföringsarbetet. Dåliga konverteringsfrekvenser kommer att leda till färre leads och bortkastade annonsutgifter.
Är WordPress-webbplatser responsiva?
Om WordPress-webbplatser är responsiva eller inte beror på temat för din WP-webbplats. Ett WordPress-tema är motsvarigheten till en mall för en statisk webbplats och styr designen och layouten på ditt innehåll.
Om du använder ett standard WordPress-tema, som Twenty Twenty, är designen responsiv. Men eftersom detta är en design för en enda kolumn, kanske det inte framgår när man tittar på den på olika skärmar.
Om du använder ett annat WordPress-tema kan du testa om det är responsivt eller inte genom att jämföra hur det ser ut på olika enheter eller använda Chrome Developer Tools.
Byggstenarna i Responsiv webbdesign
I det här avsnittet går vi igenom grunden för responsiv webbplatsdesign och dess olika byggstenar.
CSS och HTML
Grunden för responsiv design är kombinationen av HTML och CSS, två språk som styr innehållet och layouten på en sida i en viss webbläsare.
HTML styr huvudsakligen strukturen, elementen och innehållet på en webbsida. Om du exempelvis vill lägga till en bild på en webbplats måste du använda HTML-kod så här:
<img src="image.gif" alt="image" class=”full-width-img”>Du kan ställa in en ”class” eller ett ”id” som du senare kan rikta in dig på med CSS-kod.
Du kan även styra primära attribut som höjd och bredd med HTML, men detta anses inte längre vara bästa praxis.
Det är istället bättre att använda CSS för att redigera design och layout för de element som du inkluderar på en sida med HTML. CSS-kod kan ingå i ett <style> – avsnitt i ett HTML-dokument, eller som en separat stylesheet-fil.
Vi skulle exempelvis kunna redigera bredden på alla HTML-bilder på elementnivå så här:
img {
width: 100%;
}Eller så kan vi rikta in oss på den specifika klassen ”full-width-img” genom att lägga till en punkt framför.
.full-width-img {
width: 100%;
}Du kan även styra designen bortom höjd, bredd och färg. Så här kan du använda CSS för att skapa en responsiv design när du kombinerar det med en teknik som kallas mediafrågor.
Mediafrågor
En mediafråga är en grundläggande del av CSS3 som låter dig rendera innehåll för att anpassa dig till olika faktorer som skärmstorlek eller upplösning.
Detta fungerar på ett liknande sätt som en ”if-sats” i vissa programmeringsspråk. Det kontrolleras i princip om en skärms storlek är tillräckligt bred eller för bred innan du kör lämplig kod.
@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}Om skärmen är minst 780 pixlar bred, kommer ”full-width-img” class bilder att ta upp 90% av skärmen och automatiskt centreras av lika breda marginaler.
Flytande layout
En flytande layout är en väsentlig del av modern responsiv design. På den gamla goda tiden ställde du in ett statiskt värde för varje HTML-element, som 600 pixlar.
En flytande layout förlitar sig istället på dynamiska värden som en procentandel av vyports-bredden.
Den här metoden kommer dynamiskt att öka eller minska storlekarna på de olika container-elementen baserat på skärmens storlek.
Flexbox Layout
En procentbaserad layout är visserligen flytande, men många designers och webbutvecklare känner att det inte är tillräckligt dynamiskt eller flexibelt. Flexbox är en CSS-modul som är utformad som ett effektivare sätt att lägga ut flera element, även när storleken på innehållet inuti containern är okänt.
En flex-container expanderar objekt för att fylla det tillgängliga utrymmet som är ledigt eller förminskar dem för att förhindra att de är för stora. Dessa flex-containers har ett antal unika egenskaper, som exempelvis justify-content. Detta kan du inte redigera med ett vanligt HTML-element.
Detta är ett komplicerat ämne, så om du vill använda det i din design, bör du läsa CSS Tricks’ flexbox guide.
Responsiva bilder
Den mest grundläggande upprepningen av responsiva bilder följer samma koncept som en flytande layout. Det nyttjas en dynamisk enhet för att styra bredden eller höjden. CSS-koden som vi skrev tidigare åstadkommer redan detta:
img {
width: 100%;
}% enheten approximerar till en enda procentsats av bredden eller höjden på vyporten och ser till att bilden förblir i proportion till skärmen.
Problemet med detta tillvägagångssätt är att varje användare måste ladda ner en fullstor bild, även på mobilen.
För att ha olika versioner som skalas för olika enheter, måste du använda HTML srcset-attributet i dina img-taggar. Då anges det mer än en bildstorlek att välja mellan.
<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w"
src="small.jpg"
/>WordPress använder denna funktionalitet automatiskt för bilder som ingår i inlägg eller sidor.
Hastighet
När du försöker skapa en responsiv design för din webbplats bör laddningshastigheten ha högsta prioritet.
Sidor som laddas på 2 sekunder har i genomsnitt 9 % avvisningsfrekvens, medan sidor som tar 5 sekunder leder till en avvisningsfrekvens på 38 %.
Din responsiva design får inte blockera eller fördröja sidans första rendering mer än det krävs.
Det finns flera sätt att göra dina sidor snabbare på. Exempel på detta är Optimering av dina bilder, genomförande av cachelagring, minification, användandet av en mer effektiv CSS layout och att undvika renderings-blockering JS. Du bör även överväga att förbättra din kritiska renderingsbana.
Kinsta’s kunder har tillgång till ett snabbt och enkelt sätt att åstadkomma detta genom att använda kodminifierings-funktionen som är inbyggd direkt i MyKinsta-instrumentpanelen. Den gör att kunderna kan aktivera automatisk CSS- och JavaScript-minifiering med ett enkelt klick.
Du kan även försöka implementera Google AMP för dina mobilsidor, men i vår fallstudie från Google AMP minskade våra mobil-leads med hela 59 %.
Vanliga responsiva brytpunkter
För att arbeta med mediafrågor måste du bestämma dig för brytpunkterna ”responsive breakpoints” eller skärmstorlek. En brytpunkt är bredden på skärmen där du använder en mediefråga för att implementera nya CSS-format.
Vanliga skärmstorlekar
- Mobil: 360 x 640
- Mobil: 375 x 667
- Mobil: 360 x 720
- iPhone X: 375 x 812
- Pixel 2: 411 x 731
- Surfplatta: 768 x 1024
- Bärbar dator: 1366 x 768
- Högupplöst bärbar eller stationär dator: 1 920 x 1080
Om du väljer en design som främst är anpassad för mobil, med en enda kolumn och mindre teckenstorlekar som grund, behöver du inte inkludera mobila brytpunkter – såvida du inte vill optimera designen för specifika modeller.
Så du kan skapa en grundläggande responsiv design med endast två brytpunkter, en för surfplattor och en för bärbara datorer och stationära datorer.
Bootstraps responsiva brytpunkter
Detta är en av de första och mest populära, lyhörda ramverken. Bootstrap har gått i täten vid angreppet mot statisk webbdesign och hjälpt till att etablera en mobil-anpassad design som branschstandard.
Som ett resultat, följer många designers än idag Bootstrap´s brytpunkter för skärm-bredd.
De använder mediafrågor för att rikta in sig mot liggande telefoner (576px), surfplattor (768px), bärbara datorer (992px) och extra stora stationära skärmar (1200px).
Hur du gör din webbplats responsiv
Nu när du är bekant med byggstenarna är det dags att göra din webbplats responsiv.
Ange dina mediafrågeintervall (responsiva brytpunkter)
Ställ in dina mediafrågeintervall utifrån de unika behoven i din design. Om vi exempelvis ville följa Bootstrap´s standarder för vår design, skulle vi använda följande mediafrågor:
- 576px för stående telefoner
- 768px för surfplattor
- 992px för bärbara datorer
- 1200px för stora enheter
Storlekslayout-element med procenttal eller skapandet av en CSS-rutnätslayout
Det första och viktigaste steget är att ställa in olika storlekar för olika layoutelement beroende på mediafrågan eller skärmbrytpunkten.
Hur många layout-containers du har beror på designen, men de flesta webbplatserna fokuserar på de element som anges nedan:
- Wrapper or Container
- Rubrik
- Innehåll
- Sidofältet
- Sidfot
Med hjälp av en mobil-anpassad metod, kan du ställa in de viktigaste layoutelementen så här (utan mediafrågor för de grundläggande stilarna för mobiltelefoner):
#wrapper {width:95%; margin: 0 auto; }
#header {width:100%; }
#content {width:100%; }
#sidebar {width:100%; }
#footer {width:100%; }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
#wrapper {width:90%; margin: 0 auto; }
#content {width:70%; float:left; }
#sidebar {width:30%; float:right; }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
}
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
#wrapper {width:90%; margin: 0 auto; }
}I en procentbaserad metod styr attributet ”float” vilken sida av skärmen ett element kommer att visas på, vänster eller höger.
Om du vill gå längre än grunderna och skapa en banbrytande responsiv design, måste du bekanta dig med CSS flexbox-layouten och dess attribut som box-dimensionering och flex.
Implementera responsiva bilder
Om du vill se till att dina bilder inte går sönder är det bara att använda ett dynamiskt värde för alla bilder, som vi gick igenom tidigare.
img {
width: 100%;
}Men detta kommer inte att minska belastningen på din mobila besökare när de besöker din webbplats.
Se till att du alltid inkluderar en srcset när du lägger till bilder på dina sidor.
Att göra detta manuellt kan vara ganska tidskrävande, men med ett CMS som WordPress, läggs detta till automatiskt när du laddar upp mediefiler.
Responsiv typografi för texten på din webbplats
Det huvudsakliga fokuset för responsiv webbdesign är responsiviteten på layout-block, element och media. Texten hamnar ofta i skymundan.
Men för en verkligt responsiv design bör du även justera dina teckenstorlekar på ett lämpligt sätt för att matcha skärmstorleken.
Det enklaste sättet att göra detta på är att ställa in ett statiskt värde för teckenstorleken, som 22 px, och anpassa detta i varje mediafråga.
Du kan rikta in dig mot flera text-element samtidigt genom att använda ett kommatecken för att avgränsa vart och ett.
@media (min-width: 992px) {
body, p, a, h4 {
font-size: 14px;
}
}Testa responsivitet
Först ska du testa om din webbplats är mobilanpassad med Googles test av mobilvänlighet. Ange helt enkelt webbadressen till din webbplats och klicka på ”test URL”-knappen för att få resultaten.
Bli inte orolig om det tar ett tag att hämta din webbplats. Detta påverkar inte laddningshastigheten för din sida.
Om du har följt de steg som beskrivs i den här artikeln bör testet säga att du har en mobilvänlig webbplats.
Sedan ska du testa din webbplats på flera skärmstorlekar med ett verktyg som Chrome-utvecklarverktyg.
Tryck på CTRL + Skift + I på Windows-datorer, eller Command + Alternativ + I på Mac-datorer för att öppna den relevanta enhetsvyn. Härifrån kan du välja den mobila enheten eller surfplattan för att testa din designs reaktionsförmåga.
Det finns ett par frågor som du bör svara på när du går igenom denna process.
- Justeras layouten till rätt mängd kolumner?
- Passar innehållet bra inuti layoutelementen och containrarna på olika skärmar?
- Passar teckenstorlekarna varje skärm?
CSS-enheter och värden för responsiv design
CSS har både absoluta och relativa måttenheter. Ett exempel på en absolut enhet av längd är en cm eller en px. Relativa enheter eller dynamiska värden beror på skärmens storlek och upplösning eller teckenstorlekarna för rotelementet.
PX vs EM vs REM vs Vyports-enheter för responsiv design
- PX – en enda pixel
- EM – relativ enhet baserad på elementets teckenstorlek.
- REM – relativ enhet baserad på elementets storlek på typsnittet.
- VH, VW – % av vyportens höjd eller bredd.
- % – det procentuella av det överordnade elementet.
En ny webbdesigner eller utvecklare bör förmodligen hålla sig till pixlar för text eftersom detta är den tydligaste enheten för längd i CSS.
Men när du ställer in bredden och max-bredden på bilder och andra element, är % är den bästa lösningen. Detta tillvägagångssätt kommer att se till att komponenterna anpassas till skärmstorleken för varje enhet.
Exempel på responsiv design
Nedan kommer vi att gå igeneom några exempel på responsiv webbdesign från olika branscher — och lära av vad de gör rätt och fel.
1. Nättidning: New York Times
På datorn påminner NYT-layouten om en traditionell tidning. Många visuella element och olika rader och kolumner med innehåll. Det verkar finnas en separat kolumn eller rad för varje kategori av nyheter.
På mobilen anpassas designen till enkolumns-standarden och justerar även menyn till dragspelsformatet för smidigare bläddring.
2. Blogg: The Art of Non-Conformity
Chris Guillebeau blogg ”The Art of Non-Conformity” har gått starkt i över ett decennium. Designen är inte den mest banbrytande. Den är dock responsiv och anpassar sidofältet med två kolumner samt layouten på huvudinnehållet till en enda kolumn på mobila enheter.
3. E-handel: Amazon
Det finns en anledning till att Amazon är en global ledare inom e-handel. Deras användargränssnitt är helt flytande på alla enheter.
Deras layout för surfplattor tar helt enkelt bort en del av det vita utrymmet och lägger till ett rullningsbart avsnitt med ikoner för att få plats med mer innehåll i ett mindre paket.
Deras mobila layout skapar en enda kolumn, med fokus på det väsentliga, som senaste inköps-historik. På mobiler undviks de olika ikonerna med länkar från deras huvudsakliga hemsida.
4. Video Webbplats: YouTube
Kärnan i designen för YouTubes hemsida är ett flexibelt rutnät av videor som är relevanta för varje användare. På surfplattor går antalet kolumner i varje rad ner till tre. På mobilen reduceras detta till en enda kolumn.
Den mobila versionen flyttar även huvudmenyn till botten av skärmen, närmare tummarna på sina smartphone-användare. Detta enkla drag förbättrar navigering och UX.
5. Nättidning: Wired
Wireds responsiva webbdesign syftar till att implementera en enkolumns-layout på alla mindre skärmar, som exempelvis surfplattor.
Det är en grundläggande layout men gör det lättare att dra användarnas uppmärksamhet till toppartiklar och deras CTA för prenumeration.
Sammanfattning
Det finns en massa olika element som går in responsiv webbdesign. Utan en grundläggande förståelse för HTML och CSS kan det vara enkelt att göra misstag.
Men genom att bekanta dig med de olika byggstenarna, analysera exemplen med verktyg för webb-utveckling, och testa exempelkoden, bör du kunna göra din webbplats responsiv utan större problem.
Om detta låter för krångligt, kan du antingen anlita en WordPress-utvecklare eller helt enkelt se till att ditt tema redan är responsivt.
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
Lämna ett svar