Med et internet, der i stigende grad tilgås fra mobile enheder, er det ikke længere nok at have et statisk webdesign, der kun ser godt ud på en computerskærm.
For ikke at nævne skal du også overveje tablets, 2-i-1 bærbare computere og forskellige smartphone-modeller med forskellige skærmdimensioner, når du kommer med et design.
Så at slå dit indhold i en enkelt kolonne og kalde det afsluttet vil ikke længere virke.
Med responsivt webdesign kan du sikre dig, at dit websted ser bedst ud på mobiltelefoner, tablets, bærbare computere og stationære skærme.
Og den forbedring af brugeroplevelsen betyder højere konverteringer og forretningsvækst.
Denne vejledning giver dig alt hvad du behøver at vide om responsivt webdesign, herunder definitioner, en trinvis gennemgang, eksempler og mere.
Se vores videoguide til responsivt webdesign:
Hvad er responsivt webdesign?
Responsivt design er en tilgang til webdesign, der får dit webindhold til at tilpasse sig de forskellige skærm- og vinduesstørrelser på en række forskellige enheder.
For eksempel kan dit indhold være adskilt i forskellige kolonner på desktop-skærme, fordi det er bredt nok til at rumme dette design.
Hvis du adskiller dit indhold i flere kolonner på en mobilenhed, vil det være svært for brugerne at læse og interagere med.
Responsivt design gør det muligt at levere flere, separate layouts af dit indhold og design til forskellige enheder afhængigt af skærmstørrelse.
Responsivt webdesign vs adaptivt design
Forskellen mellem responsivt design og adaptivt design er, at responsivt design tilpasser gengivelsen af en enkelt sideversion. I modsætning hertil leverer adaptivt design flere helt forskellige versioner af den samme side.
De er begge vigtige webdesign tendenser, der hjælper webmastere med at kontrollere, hvordan deres websted ser ud på forskellige skærme, men tilgangen er anderledes.
Med responsivt design får brugerne adgang til den samme grundlæggende fil via deres browser, uanset enhed, men CSS-kode styrer layoutet og gengiver det forskelligt baseret på skærmstørrelse. Med adaptivt design er der et script, der kontrollerer skærmstørrelsen og derefter får adgang til skabelonen designet til den enhed.
Hvorfor Responsive Design betyder noget
Hvis du er ny inden for webdesign, udvikling eller blogging, spekulerer du måske på, hvorfor responsivt design betyder noget i første omgang.
Svaret er simpelt. Det er ikke længere nok at designe til en enkelt enhed. Mobil webtrafik har overhalet desktop og udgør nu størstedelen af webstrafikken og tegner sig for mere end 51%.
Når over halvdelen af dine potentielle besøgende bruger en mobilenhed til at surfe på internettet, kan du ikke bare give dem en side designet til desktop. Det ville være svært at læse og bruge og føre til dårlig brugeroplevelse.
Men det er ikke alt. Brugere på mobile enheder udgør også størstedelen af besøg fra en søgemaskine.
Endelig er mobil i de sidste par år blevet en af de vigtigste reklamekanaler. Selv i et post-pandemisk marked vokser udgifterne til mobilannoncer med 4,8% til 91,52 milliarder dollar.
Uanset om du vælger at annoncere på sociale medier eller bruge en organisk tilgang som YouTube SEO, kommer langt størstedelen af din trafik fra mobilbrugere.
Hvis dine landing pages ikke er optimeret til mobil og nemme at bruge, kan du ikke maksimere investeringsafkastet for din marketingindsats. Dårlige konverteringsfrekvenser vil føre til færre kundeemner og spildte annonceudgifter.
Er WordPress-websteder responsivt?
Hvorvidt WordPress-sider er responsive eller ej, afhænger af temaet på dit WP-websted. Et WordPress-tema svarer til en skabelon til et statisk websted og styrer designet og layoutet af dit indhold.
Hvis du bruger et standard WordPress-tema, som Twenty Twenty, er designet responsivt, men da det er et enkeltkolonnedesign, er du måske ikke klar over det, når du ser på det på forskellige skærme.
Hvis du bruger et andet WordPress-tema, kan du teste, om det er responsivt eller ej, ved at sammenligne, hvordan det ser ud på forskellige enheder eller ved hjælp af Chrome Developer Tools.
Byggestenene i responsivt webdesign
I dette afsnit dækker vi det underliggende fundament for responsivt webdesign og dets forskellige byggesten.
CSS og HTML
Grundlaget for responsivt design er kombinationen af HTML og CSS, to sprog, der styrer indholdet og layoutet på en side i en given webbrowser.
HTML styrer hovedsageligt strukturen, elementerne og indholdet på en webside. For at tilføje et billede til et websted skal du f.eks. Bruge HTML-kode som denne:
<img src="image.gif" alt="image" class=”full-width-img”>Du kan indstille en “class” eller “id”, som du senere kan målrette med CSS-kode.
Du kan også kontrollere primære attributter såsom højde og bredde inden for din HTML, men dette betragtes ikke længere som bedste praksis.
I stedet bruges CSS til at redigere design og layout af de elementer, du inkluderer på en side med HTML. CSS-kode kan inkluderes i et <style> -snit i et HTML-dokument eller som en separat stylesheet fil.
For eksempel kunne vi redigere bredden på alle HTML-billeder på elementniveau på denne måde:
img {
width: 100%;
}Eller vi kunne målrette mod den specifikke klasse “fuld bredde-img” ved at tilføje en periode foran.
.full-width-img {
width: 100%;
}Du kan også styre designet ud over bare højde, bredde og farve. Brug af CSS som denne er, hvordan du får et design til at reagere, når du kombinerer det med en teknik kaldet medieforespørgsel.
Medieforespørgsler
En medieforespørgsel er en grundlæggende del af CSS3, der giver dig mulighed for at gengive indhold til at tilpasse sig forskellige faktorer som skærmstørrelse eller opløsning.
Det fungerer på samme måde som en “if clause” på nogle programmeringssprog og kontrollerer grundlæggende, om skærmbilledets visningsport er bred nok eller for bred, før den relevante kode udføres.
@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}Hvis skærmen er mindst 780 pixels bred, vil “full-width-img” klassebilleder tage 90% af skærmen og centreres automatisk med lige store margener.
Fluid layout
Et fluid layout er en væsentlig del af moderne responsivt design. I de gode gamle dage ville du indstille en statisk værdi for hvert HTML-element, f.eks. 600 pixels.
Et fluid layout er i stedet afhængig af dynamiske værdier som en procentdel af visningsbredden.
Denne tilgang øger eller formindsker de forskellige størrelser på containerelement dynamisk baseret på skærmens størrelse.
Flexbox-layout
Mens et procentbaseret layout er flydende, følte mange designere og webudviklere, at det ikke var dynamisk eller fleksibelt nok. Flexbox er et CSS-modul designet til en mere effektiv måde at lægge flere elementer på, selv når størrelsen på indholdet inde i containeren er ukendt.
En flexcontainer udvider emner for at udfylde ledig plads eller krymper dem for at forhindre overløb. Disse flexcontainere har en række unikke egenskaber, som justify-content, som du ikke kan redigere med et almindeligt HTML-element.
Det er et kompliceret emne, så hvis du vil bruge det i dit design, skal du læse CSS Tricks ‘flexbox-guide.
Responsive billeder
Den mest basale iteration af responsive billeder følger det samme koncept som et fluid layout ved hjælp af en dynamisk enhed til at kontrollere bredden eller højden. Eksemplet på CSS-kode, vi dækkede tidligere, udfører allerede dette:
img {
width: 100%;
}Enheden % svarer til en enkelt procentdel af visningsportens bredde eller højde og sørger for, at billedet forbliver i forhold til skærmen.
Problemet med denne tilgang er, at hver bruger skal downloade billedet i fuld størrelse, selv på mobil.
For at kunne betjene forskellige versioner, der skaleres til forskellige enheder, skal du bruge attributten HTML srcset i dine img-tags for at angive mere end en billedstørrelse at vælge imellem.
<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w"
src="small.jpg"
/>WordPress bruger automatisk denne funktionalitet til billeder, der er inkluderet i indlæg eller sider.
Fart
Når du forsøger at oprette et responsivt design til dit websted, skal indlæsningshastigheden være en topprioritet.
Sider, der indlæses på 2 sekunder, har en gennemsnitlig bounce rate på 9%, mens sider, der tager 5 sekunder, fører til en bounce rate på 38%.
Din tilgang til responsive må ikke blokere eller forsinke din sides første gengivelse mere end den har brug for.
Der er flere måder, du kan gøre dine sider hurtigere på. Optimering af dine billeder, implementering af cache, minificering, brug af et mere effektivt CSS-layout, undgå render blokerende JS og forbedring af din kritiske rendering path er alle gode ideer, du bør overveje.
Kinsta-kunder har adgang til en hurtig og nem måde at opnå dette ved at bruge kode minifikationsfunktionen, der er indbygget direkte i MyKinsta-dashboardet, hvilket giver kunderne mulighed for at aktivere automatisk CSS- og JavaScript-minifikation med et enkelt klik.
Du kan også prøve at implementere Google AMP til dine mobilsider, men i vores Google AMP-casestudie faldt vores mobile kundeemner med hele 59%.
Almindelige responsive breakpoints
For at arbejde med medieforespørgsler skal du beslutte dig for “responsive breakpoints” eller skærmstørrelses breakpoints. Et brudpunkt er bredden på skærmen, hvor du bruger en medieforespørgsel til at implementere nye CSS-stilarter.
Almindelige skærmstørrelser
- Mobil: 360 x 640
- Mobil: 375 x 667
- Mobil: 360 x 720
- iPhone X: 375 x 812
- Pixel 2: 411 x 731
- Tablet: 768 x 1024
- Bærbar computer: 1366 x 768
- High-res laptop eller desktop: 1920 x 1080
Hvis du vælger en mobil-first tilgang til design, med en enkelt kolonne og mindre skriftstørrelser som basis, behøver du ikke medtage mobile breakpoints – medmindre du vil optimere designet til bestemte modeller.
Så du kan oprette et grundlæggende responsivt design med kun to breakpoints, en til tablets og en til laptops og stationære computere.
Bootstraps responsive breakpoints
Som en af de første og mest populære responsive frameworks førte Bootstrap angrebet på statisk webdesign og hjalp med at etablere mobile first design som en industristandard.
Som et resultat følger mange designere den dag i dag stadig Bootstraps skærmbreddepunkter.
De bruger medieforespørgsler til at målrette landskabs-telefoner (576px), tablets (768px), laptops (992px) og ekstra store desktopskærme (1200px).
Sådan gør du dit websted responsivt
Nu hvor du er fortrolig med byggestenene, er det tid til at gøre dit websted responsivt.
Indstil dine medieforespørgselsområder (responsive breakpoints)
Indstil dine medieforespørgselsområder ud fra de unikke behov i dit design. For eksempel, hvis vi ønskede at følge Bootstrap-standarderne for vores design, ville vi bruge følgende medieforespørgsler:
- 576 px til stående telefoner
- 768 px til tabletter
- 992 px til bærbare computere
- 1200 px til store enheder
Størrelses layoutelementer med procentdele eller Opret et CSS-grid-layout
Det første og vigtigste trin er at opsætte forskellige størrelser til forskellige layoutelementer afhængigt af medieforespørgsel eller skærmbrydepunkt.
Antallet af layoutcontainere, du har, afhænger af designet, men de fleste websteder fokuserer på elementerne nedenfor:
Ved hjælp af en mobil-første tilgang kan du style de vigtigste layoutelementer som denne (uden medieforespørgsel til de grundlæggende stilarter til 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 procentbaseret tilgang styrer “float” -attributten, hvilken side af skærmen et element vises på, venstre eller højre.
Hvis du vil gå ud over det grundlæggende og skabe et banebrydende responsivt design, skal du gøre dig bekendt med CSS flexbox-layoutet og dets attributter som box-dimensionering og flex.
Implementere responsive billeder
En måde at sikre, at dine billeder ikke går i stykker, er kun at bruge en dynamisk værdi til alle billeder, som vi dækkede tidligere.
img {
width: 100%;
}Men det reducerer ikke belastningen på dine mobile besøgende, når de får adgang til dit websted.
Sørg for altid at medtage et srcset, der har forskellige størrelser på dit foto, når du tilføjer billeder til dine sider.
At gøre dette manuelt kan være ret tidskrævende, men med et CMS som WordPress sker det automatisk, når du uploader mediefiler.
Responsiv typografi til din websteds tekst
Hovedfokus for responsivt webdesign er responsiveness af layoutblokkene, elementerne og medierne. Tekst behandles ofte som en eftertanke.
Men for et virkelig responsivt design skal du også justere dine størrelser på skrifttype passende til at matche skærmstørrelsen.
Den nemmeste måde at gøre det på er at indstille en statisk værdi for skriftstørrelse, som 22 px, og tilpasse den i hver medieforespørgsel.
Du kan målrette mod flere tekstelementer på samme tid ved at bruge et komma til at adskille hver enkelt.
@media (min-width: 992px) {
body, p, a, h4 {
font-size: 14px;
}
}Test responsiveness
Først vil du teste, om dit websted er mobilvenligt med Googles mobilvenlige test. Indtast blot webadressen på dit websted, og klik på knappen “test URL” for at få resultaterne.
Bare rolig, hvis det tager et stykke tid at hente dit websted. Det afspejler ikke din sides indlæsningshastighed.
Hvis du fulgte trinnene i denne artikel, skal det sige, at du har et mobilvenligt websted.
Derefter vil du teste dit websted på flere skærmstørrelser med et værktøj som Chrome-udviklerværktøjer.
Tryk på CTRL + Shift + I på Windows-computere eller Command + Option + I på Mac’er for at åbne den relevante enhedsvisning. Herfra kan du vælge den mobile enhed eller tablet efter eget valg for at teste responsiveness i dit design.
Der er et par spørgsmål, du vil besvare, når du gennemgår denne proces.
- Justeres layoutet til den korrekte mængde kolonner?
- Passer indholdet godt inde i layoutelementerne og containerne på forskellige skærme?
- Passer fontstørrelserne til hver skærm?
CSS-enheder og værdier til responsivt design
CSS har både absolutte og relative måleenheder. Et eksempel på en absolut længdeenhed er en cm eller en px. Relative enheder eller dynamiske værdier afhænger af skærmens størrelse og opløsning eller rodelementets skriftstørrelser.
PX vs EM vs REM vs Viewport Enheder til responsivt design
- PX – en enkelt pixel
- EM – relativ enhed baseret på elementets fontstørrelse.
- REM – relativ enhed baseret på fontens størrelse på elementet.
- VH, VW -% af visningsportens højde eller bredde.
- % – procentdelen af det overordnede element.
En ny webdesigner eller udvikler bør sandsynligvis holde fast i pixels til tekst, fordi de er den mest ligefremme længdeenhed i CSS.
Men når du indstiller bredden og maX. Bredden af billeder og andre elementer, er det den bedste løsning at bruge %. Denne tilgang vil sikre, at komponenterne tilpasser sig skærmstørrelsen på hver enhed.
Eksempler på responsivt design
Nedenfor vil vi dække et par eksempler på responsivt webdesign fra forskellige brancher – og lære af, hvad de gør rigtigt og forkert.
1. Online Avis: New York Times
På skrivebordet minder NYT layoutet dig om en traditionel avis, fyldt med grafik og forskellige rækker og kolonner med indhold. Der ser ud til at være en separat kolonne eller række for hver nyhedskategori.
På mobil overholder den standarden med en søjle og justerer også menuen, så den er i harmonikaformat, så den er lettere at bruge.
2. Blog: The Art of Non-Conformity
Chris Guillebeaus blog “The Art of Non-Conformity” har været stærk i over et årti. Mens designet ikke er det mest banebrydende, er det responsivt og tilpasser sidekolonnen med to søjler og hovedindholdet til et enkelt søjledesign på mobile enheder.
3. E-handel: Amazon
Amazon er en global leder inden for e-handel af en grund, deres brugergrænseflade er perfekt flydende på tværs af alle enheder.
Deres layout til tablet fjerner simpelthen noget af det hvide rum og tilføjer en rullbar sektion med ikoner, der passer til mere indhold i en mindre pakke.
Deres mobile layout bringer det ind i en enkelt kolonne, der fokuserer på det væsentlige, som den seneste købshistorik, snarere end de forskellige sektionslinkikoner fra deres vigtigste hjemmeside.
4. Videoside: YouTube
Kernen i YouTubes hjemmeside-design er et fleksibelt gitter med videoer, der er relevante for hver bruger. På tabletter går antallet af kolonner i hver række ned til tre. På mobil er det reduceret til et design med en søjle.
Den mobile version flytter også hovedmenuen til bunden af skærmen tættere på tommelfingrene for deres smartphone-brugere. Dette enkle træk forbedrer navigationen og UX.
5. Onlinemagasin: Wired
Wired’s tilgang til responsivt webdesign er fokuseret på implementering af et enkeltkolonnelayout på alle mindre skærme startende med tablets.
Det er et grundlæggende layout, men gør det lettere at henlede brugernes opmærksomhed på tophistorier og deres CTA for at abonnere.
Resumé
Der er mange forskellige elementer, der går ind i responsivt webdesign. Uden en grundlæggende forståelse af HTML og CSS kan det være let at begå fejl.
Men ved at gøre dig bekendt med de forskellige byggesten, analysere eksemplerne med web dev tools og teste, mens du går ved hjælp af prøvekoden, skal du være i stand til at gøre dit websted responsivt uden noget større problem.
Hvis det lyder for meget at opnå, kan du altid enten ansætte en WordPress-udvikler eller bare sørge for, at dit tema allerede er responsivt.
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
Skriv et svar