Responsivt Webdesign: Din Guide til Perfekt Visning

I en verden, hvor internettet i stigende grad tilgås fra mobile enheder, er det ikke længere tilstrækkeligt at have et statisk webdesign, der kun ser godt ud på en computerskærm. Man er nødt til at tage højde for tablets, 2-i-1 laptops og forskellige smartphone-modeller med varierende skærmdimensioner. At proppe indholdet i en enkelt kolonne og kalde det en dag, er simpelthen ikke nok. Med responsivt webdesign kan du sikre, at din hjemmeside ser bedst ud på telefoner, tablets, laptops og desktops. Denne forbedring i brugeroplevelsen betyder højere konverteringer og forretningsvækst. Denne guide giver dig alt, hvad du behøver at vide om responsivt webdesign, herunder definitioner, en trin-for-trin gennemgang, eksempler og meget mere.

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 enheder. For eksempel kan dit indhold være opdelt i forskellige kolonner på desktopskærme, fordi de er brede nok til at rumme dette design. Hvis du opdeler 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ørrelsen.

Responsivt Webdesign vs. Adaptivt Design

forskellen mellem responsivt design og adaptivt design er, at responsivt design tilpasser gengivelsen af en enkelt sideversion. Adaptivt design leverer derimod flere, helt forskellige versioner af den samme side. Begge er afgørende webdesigntrends, der hjælper webmastere med at kontrollere, hvordan deres side ser ud på forskellige skærme, men tilgangen er forskellig. Med responsivt design får brugerne adgang til den samme grundlæggende fil via deres browser, uanset enhed, men CSS-kode vil kontrollere layoutet og gengive det forskelligt baseret på skærmstørrelse. Med adaptivt design er der et script, der tjekker skærmstørrelsen og derefter tilgår skabelonen designet til den pågældende enhed.

Hvorfor er Responsivt Design Vigtigt?

Hvis du er ny inden for webdesign, udvikling eller blogging, tænker du måske på, hvorfor responsivt design overhovedet er vigtigt. Svaret er simpelt. Det er ikke længere nok at designe til en enkelt enhed. Mobilt webtrafik har overhalet desktop og udgør nu størstedelen af hjemmesidetrafikken, hvilket tegner sig for over 51%. Når over halvdelen af dine potentielle besøgende bruger en mobilenhed til at browse på internettet, kan du ikke bare servere en side designet til desktop. Den ville være svær at læse og bruge, og føre til en dårlig brugeroplevelse. Men det er ikke alt. Brugere på mobile enheder udgør også størstedelen af søgemaskinebesøg. Endelig, over de seneste par år, er mobil blevet en af de vigtigste reklamekanaler. Selv i et post-pandemisk marked vokser mobilannonceringsforbruget 4,8% til 91,52 milliarder dollars. Uanset om du vælger at annoncere på sociale medier eller bruge en organisk tilgang som YouTube SEO, vil langt størstedelen af din trafik komme fra mobile brugere. Hvis dine landingssider ikke er optimeret til mobil og nemme at bruge, vil du ikke kunne maksimere ROI på dine marketingindsatser. Dårlige konverteringsrater vil føre til færre leads og spildt annonceforbrug.

Er WordPress-hjemmesider Responsiv?

Om WordPress-hjemmesider er responsive, afhænger af temaet for din WP-hjemmeside. Et WordPress-tema svarer til en skabelon for en statisk hjemmeside 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 design med en enkelt kolonne, bemærker du det måske ikke, når du ser 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 at bruge Chrome Developer Tools.

Byggestenene i Responsivt Webdesign

I dette afsnit dækker vi det underliggende fundament for responsivt webdesign og dets forskellige byggesten.

1. CSS og HTML

Fundamentet for responsivt design er kombinationen af HTML og CSS, to sprog, der styrer indholdet og layoutet af en side i enhver given webbrowser. HTML styrer primært strukturen, elementerne og indholdet af en webside. For eksempel, for at tilføje et billede til en hjemmeside, skal du bruge HTML-kode som denne:

<img src="image.gif" alt="image" class=”full-width-img”>

Du kan angive en "class" eller "id", som du senere kan målrette med CSS-kode. Du kunne også styre primære attributter 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 designet og layoutet af de elementer, du inkluderer på en side med HTML. CSS-kode kan inkluderes i en <style> sektion af et HTML-dokument eller som en separat stylesheet-fil. For eksempel kunne vi redigere bredden af alle HTML-billeder på elementniveau som dette:

img { width: 100%; }

Eller vi kunne målrette den specifikke klasse "full-width-img" ved at tilføje en prik foran.

.full-width-img { width: 100%; }

Du kan også styre designet ud over blot højde, bredde og farve. Brugen af CSS som dette er, hvordan du gør et design responsivt, når du kombinerer det med en teknik kaldet media query.

2. Media Queries

En media query er en fundamental del af CSS3, der lader dig gengive indhold, så det tilpasser sig forskellige faktorer som skærmstørrelse eller opløsning. Den fungerer på en lignende måde som en "if-sætning" i nogle programmeringssprog, der grundlæggende tjekker, om en skærms viewport er bred nok eller for bred, før den udfører den relevante kode.

@media screen and (min-width: 780px) { .full-width-img { margin: auto; width: 90%; }}

Hvis skærmen er mindst 780 pixels bred, vil billeder med "full-width-img" klassen optage 90% af skærmen og centreres automatisk med lige brede marginer.

3. Flydende Layouts

Et flydende layout er en essentiel del af moderne responsivt design. I de gode gamle dage ville du angive en statisk værdi for hvert HTML-element, f.eks. 600 pixels. Et flydende layout baserer sig i stedet på dynamiske værdier som en procentdel af viewport-bredden. Denne tilgang vil dynamisk øge eller mindske størrelsen af forskellige container-elementer baseret på skærmstørrelsen.

4. Flexbox Layout

Mens et procentbaseret layout er flydende, fandt mange designere og webudviklere, at det ikke var dynamisk eller fleksibelt nok. Flexbox er et CSS-modul designet som en mere effektiv måde at layout'e flere elementer på, selv når størrelsen af indholdet inde i containeren er ukendt. En flex-container udvider elementer for at fylde den tilgængelige ledige plads eller krymper dem for at forhindre overløb. Disse flex-containere 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, bør du læse CSS Tricks' flexbox-guide.

5. Responsive Billeder

Den mest basale version af responsive billeder følger det samme koncept som et flydende layout, idet den bruger en dynamisk enhed til at styre bredden eller højden. Eksemplet med CSS-kode, vi tidligere har dækket, opnår allerede dette:

img { width: 100%; }

% enheden svarer til en enkelt procentdel af viewportens bredde eller højde og sikrer, at billedet forbliver i proportion til skærmen. Problemet med denne tilgang er, at enhver bruger skal downloade det fulde billede, selv på mobil. For at servere forskellige versioner skaleret til forskellige enheder skal du bruge HTML srcset-attributten i dine img-tags for at specificere mere end én 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.

6. Hastighed

Når du forsøger at skabe et responsivt design til din hjemmeside, bør 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 responsivitet må ikke blokere eller forsinke din sides første rendering mere end nødvendigt. Der er flere måder, hvorpå du kan gøre dine sider hurtigere. Optimering af dine billeder, implementering af caching, minificering, brug af et mere effektivt CSS-layout, undgåelse af render-blocking JS og forbedring af din kritiske rendering path er alle gode ideer, du bør overveje. Du kan også forsøge at implementere Google AMP til dine mobile sider, men i vores Google AMP case study faldt vores mobile leads med hele 59%.

Almindelige Responsive Breakpoints

For at arbejde med media queries skal du beslutte dig for "responsive breakpoints" eller skærmstørrelses-breakpoints. Et breakpoint er bredden af skærmen, hvor du bruger en media query 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 * Laptop: 1366 x 768 * Højopløsnings laptop eller desktop: 1920 x 1080 Hvis du vælger en mobile-first tilgang til design, med en enkelt kolonne og mindre skriftstørrelser som basis, behøver du ikke inkludere mobile breakpoints – medmindre du vil optimere designet til specifikke modeller. Så du kan skabe et grundlæggende responsivt design med kun to breakpoints, et for tablets og et for laptops og desktops.

Bootstrap's 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 til dato stadig Bootstraps skærmbredde-breakpoints. De bruger media queries til at målrette landskabstelefoner (576px), tablets (768px), laptops (992px) og ekstra store desktopskærme (1200px).

Sådan Gør Du Din Hjemmeside Responsiv

Nu hvor du er bekendt med byggestenene, er det tid til at gøre din hjemmeside responsiv.

1. Indstil Dine Media Query-områder (Responsive Breakpoints)

Indstil dine media query-områder baseret på de unikke behov i dit design. Hvis vi for eksempel ønskede at følge Bootstrap-standarderne for vores design, ville vi bruge følgende media queries: * 576px for portrættelefoner * 768px for tablets * 992px for laptops * 1200px for store enheder

2. Størrelse Layout Elementer med Procenter eller Opret et CSS Grid Layout

Det første og vigtigste skridt er at indstille forskellige størrelser for forskellige layout-elementer afhængigt af media query eller skærm-breakpoint. Antallet af layout-containere, du har, afhænger af designet, men de fleste hjemmesider fokuserer på de elementer, der er anført nedenfor: * Wrapper eller Container * Header * Indhold * Sidebjælke * Footer Ved at bruge en mobile-first tilgang kan du style de primære layout-elementer som følger (uden media query for de grundlæggende stilarter for mobiltelefoner):

#wrapper {width:95%; margin: 0 auto; } #header {width:100%; } #content {width:100%; } #sidebar {width:100%; } #footer {width:100%; } // Små enheder (landskabstelefoner, 576px og derover) @media (min-width: 576px) { // Mellemstore enheder (tablets, 768px og derover) @media (min-width: 768px) { #wrapper {width:90%; margin: 0 auto; } #content {width:70%; float:left; } #sidebar {width:30%; float:right; } // Store enheder (desktops, 992px og derover) @media (min-width: 992px) { // ... } } // Ekstra store enheder (store desktops, 1200px og derover) @media (min-width: 1200px) { #wrapper {width:90%; margin: 0 auto; } } }

I en procentbaseret tilgang styrer "float"-attributten, hvilken side af skærmen et element vil vises på, venstre eller højre. Hvis du vil gå ud over det grundlæggende og skabe et banebrydende responsivt design, skal du sætte dig ind i CSS flexbox-layoutet og dets attributter som box-sizing og flex.

3. Implementer Responsive Billeder

En måde at sikre, at dine billeder ikke går i stykker, er blot at bruge en dynamisk værdi for alle billeder, som vi dækkede tidligere.

img { width: 100%; }

Men det reducerer ikke belastningen på dine mobilbesøgende, når de tilgår din hjemmeside. Sørg for altid at inkludere en srcset med forskellige størrelser af dit billede, 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.

4. Brug Responsiv Typografi til Din Hjemmesides Tekst

Hovedfokus for responsivt webdesign er på responsiviteten af layoutblokke, elementer og medier. Tekst behandles ofte som en eftertanke. Men for et ægte responsivt design bør du også justere dine skriftstørrelser passende for at matche skærmstørrelsen. Den nemmeste måde at gøre dette på er at indstille en statisk værdi for skriftstørrelsen, f.eks. 22 px, og tilpasse den i hver media query. Du kan målrette flere tekstelementer samtidigt ved at bruge et komma til at adskille dem.

@media (min-width: 992px) { body, p, a, h4 { font-size: 14px; } }

5. Test Responsivitet

Først vil du teste, om din side er mobilvenlig med Googles mobilvenlighedstest. Indtast blot URL'en til din hjemmeside og klik på knappen "test URL" for at få resultaterne. Bare rolig, hvis det tager et stykke tid at hente din side. Det afspejler ikke din sides indlæsningshastighed. Hvis du har fulgt trinene i denne artikel, burde den sige, at du har en mobilvenlig hjemmeside. Derefter vil du teste din side på flere skærmstørrelser med et værktøj som Chrome developer tools. Tryk CTRL + Shift + I på Windows-computere eller Command + Option + I på Macs for at åbne den relevante enhedsvisning. Herfra kan du vælge den mobilenhed eller tablet, du ønsker, for at teste dit designs responsivitet. Der er et par spørgsmål, du ønsker at besvare under denne proces: * Tilpasser layoutet sig til det korrekte antal kolonner? * Passer indholdet godt inden for layout-elementerne og containere på forskellige skærme? * Passer skriftstø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 enhed er en cm eller en px. Relative enheder eller dynamiske værdier afhænger af skærmens størrelse og opløsning eller rod-elementets skriftstørrelser. | Enhed | Beskrivelse | |---|---|| | PX | En enkelt pixel | | EM | Relativ enhed baseret på elementets skriftstørrelse | | REM | Relativ enhed baseret på rod-elementets skriftstørrelse | | VH, VW | % af viewportens højde eller bredde | | % | Procentdelen af forælder-elementet | En ny webdesigner eller udvikler bør sandsynligvis holde sig til pixels til tekst, da de er den mest ligetil længdeenhed i CSS. Men når du indstiller bredden og max-width for billeder og andre elementer, er brugen af % den bedste løsning. Denne tilgang vil sikre, at komponenterne tilpasser sig enhver enheds skærmstørrelse.

5 Eksempler på Responsivt Design

Nedenfor dækker vi et par eksempler på responsivt webdesign fra forskellige brancher – og lærer af, hvad de gør rigtigt og forkert.

1. Online Avis: New York Times

På desktop minder NYT's layout om en traditionel avis, fyldt med visuelle elementer og forskellige rækker og kolonner af indhold. Der synes at være en separat kolonne eller række for hver nyhedskategori. På mobil overholder den standarden med en enkelt kolonne og tilpasser også menuen til at være i et harmonika-format for at gøre den lettere at bruge.

2. Blog: The Art of Non-Conformity

Chris Guillebeau's blog "The Art of Non-Conformity" har været i gang i over et årti. Selvom designet ikke er det mest banebrydende, er det responsivt og tilpasser layoutet med to kolonner til sidebjælke og hovedindhold til et design med en enkelt kolonne på mobilenheder.

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 tablet-layout fjerner blot noget af det hvide rum og tilføjer en rullebar sektion af ikoner for at passe mere indhold ind i en mindre pakke. Deres mobil-layout bringer det ind i en enkelt kolonne, der fokuserer på det væsentlige, som nylig købshistorik, snarere end de forskellige sektionslink-ikoner fra deres primære hjemmeside.

4. Videoside: YouTube

YouTube på mobil, tablet og laptop. Kernen i YouTubes hjemmesidedesign er et fleksibelt gitter af videoer, der er relevante for hver bruger. På tablets reduceres antallet af kolonner i hver række til tre. På mobil reduceres det til et design med en enkelt kolonne. Mobilversionen flytter også hovedmenuen til bunden af skærmen, tættere på tommelfingrene på smartphone-brugere. Dette simple træk forbedrer navigation og UX.

5. Online Magasin: Wired

Wired's tilgang til responsivt webdesign fokuserer på at implementere et layout med en enkelt kolonne på alle mindre skærme, startende med tablets. Det er et grundlæggende layout, men det gør det lettere at henlede brugerens opmærksomhed på tophistorier og deres CTA til at abonnere.

Opsummering

Der er mange forskellige elementer, der indgår i responsivt webdesign. Uden en grundlæggende forståelse af HTML og CSS kan det være let at begå fejl. Men ved at sætte dig ind i de forskellige byggesten, analysere eksemplerne med webudviklingsværktøjer og teste undervejs ved hjælp af eksempelkode, bør du kunne gøre din hjemmeside responsiv uden større problemer. Hvis det lyder som for meget at opnå, kan du altid enten hyre en WordPress-udvikler eller blot sikre dig, at dit tema allerede er responsivt.

Power din side med Kinsta's Managed WordPress hosting, skabt til hastighed, sikkerhed og enkelhed. Med Kinsta får du:* Nem kontrol i MyKinsta dashboardet * Ubegrænsede gratis migreringer, håndteret af vores ekspert-migreringsteam * 24/7/365 support fra WordPress-eksperter * Google Clouds premium-infrastruktur * Enterprise-grade sikkerhed gennem Cloudflare-integration * Global rækkevidde med 37 datacentre Nyd din første måned gratis!

Hvis du vil læse andre artikler, der ligner Responsivt Webdesign: Din Guide til Perfekt Visning, kan du besøge kategorien Teknologi.