{"id":39510,"date":"2021-02-08T16:30:45","date_gmt":"2021-02-08T15:30:45","guid":{"rendered":"https:\/\/kinsta.com\/?p=78861&preview=true&preview_id=78861"},"modified":"2023-08-24T11:50:30","modified_gmt":"2023-08-24T10:50:30","slug":"responsivt-webdesign","status":"publish","type":"post","link":"https:\/\/kinsta.com\/dk\/blog\/responsivt-webdesign\/","title":{"rendered":"Begyndervejledningen til responsivt webdesign (kode- og layouteksempler)"},"content":{"rendered":"

Med et internet, der i stigende grad tilg\u00e5s fra mobile enheder, er det ikke l\u00e6ngere nok at have et statisk webdesign<\/a>, der kun ser godt ud p\u00e5 en computersk\u00e6rm.<\/p>\n

For ikke at n\u00e6vne skal du ogs\u00e5 overveje tablets, 2-i-1 b\u00e6rbare computere og forskellige smartphone-modeller med forskellige sk\u00e6rmdimensioner, n\u00e5r du kommer med et design.<\/p>\n

S\u00e5 at sl\u00e5 dit indhold<\/a> i en enkelt kolonne og kalde det afsluttet vil ikke l\u00e6ngere virke.<\/p>\n

Med responsivt webdesign<\/a> kan du sikre dig, at dit websted ser bedst ud p\u00e5 mobiltelefoner, tablets, b\u00e6rbare computere og station\u00e6re sk\u00e6rme.<\/p>\n

Og den forbedring af brugeroplevelsen betyder h\u00f8jere konverteringer og forretningsv\u00e6kst.<\/p>\n

Denne vejledning giver dig alt hvad du beh\u00f8ver at vide om responsivt webdesign, herunder definitioner, en trinvis gennemgang, eksempler og mere.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Se vores videoguide til responsivt webdesign:<\/h3>\n

<\/kinsta-video><\/p>\n

Hvad er responsivt webdesign?<\/h2>\n

Responsivt design er en tilgang til webdesign, der f\u00e5r dit webindhold til at tilpasse sig de forskellige sk\u00e6rm- og vinduesst\u00f8rrelser p\u00e5 en r\u00e6kke forskellige enheder.<\/p>\n

For eksempel kan dit indhold v\u00e6re adskilt i forskellige kolonner p\u00e5 desktop-sk\u00e6rme, fordi det er bredt nok til at rumme dette design.<\/p>\n

Hvis du adskiller dit indhold i flere kolonner p\u00e5 en mobilenhed, vil det v\u00e6re sv\u00e6rt for brugerne at l\u00e6se og interagere med.<\/p>\n

Responsivt design<\/a> g\u00f8r det muligt at levere flere, separate layouts af dit indhold og design til forskellige enheder afh\u00e6ngigt af sk\u00e6rmst\u00f8rrelse.<\/p>\n\n

Responsivt webdesign vs adaptivt design<\/h2>\n

Forskellen mellem responsivt design og adaptivt design er, at responsivt design tilpasser gengivelsen af \u200b\u200ben enkelt sideversion. I mods\u00e6tning hertil leverer adaptivt design flere helt forskellige versioner af den samme side.<\/p>\n

\"Responsivt
Responsivt vs adaptivt design<\/figcaption><\/figure>\n

De er begge vigtige webdesign tendenser<\/a>, der hj\u00e6lper webmastere med at kontrollere, hvordan deres websted ser ud p\u00e5 forskellige sk\u00e6rme, men tilgangen er anderledes.<\/p>\n

Med responsivt design f\u00e5r brugerne adgang til den samme grundl\u00e6ggende fil via deres browser, uanset enhed, men CSS-kode<\/a> styrer layoutet og gengiver det forskelligt baseret p\u00e5 sk\u00e6rmst\u00f8rrelse. Med adaptivt design er der et script, der kontrollerer sk\u00e6rmst\u00f8rrelsen og derefter f\u00e5r adgang til skabelonen designet til den enhed.<\/p>\n

Hvorfor Responsive Design betyder noget<\/h2>\n

Hvis du er ny inden for webdesign, udvikling<\/a> eller blogging<\/a>, spekulerer du m\u00e5ske p\u00e5, hvorfor responsivt design betyder noget i f\u00f8rste omgang.<\/p>\n

Svaret er simpelt. Det er ikke l\u00e6ngere nok at designe til en enkelt enhed. Mobil webtrafik har overhalet desktop og udg\u00f8r nu st\u00f8rstedelen af webstrafikken<\/a> og tegner sig for mere end 51%<\/a>.<\/p>\n

\"Mobil,
Mobil, tablet, desktop markedsandel<\/figcaption><\/figure>\n

N\u00e5r over halvdelen af dine potentielle bes\u00f8gende bruger en mobilenhed til at surfe p\u00e5 internettet, kan du ikke bare give dem en side designet til desktop. Det ville v\u00e6re sv\u00e6rt at l\u00e6se og bruge og f\u00f8re til d\u00e5rlig brugeroplevelse.<\/p>\n

Men det er ikke alt. Brugere p\u00e5 mobile enheder udg\u00f8r ogs\u00e5 st\u00f8rstedelen af bes\u00f8g fra en s\u00f8gemaskine<\/a>.<\/p>\n

\"Mobil
Mobil s\u00f8getrafik<\/figcaption><\/figure>\n

Endelig er mobil i de sidste par \u00e5r blevet en af \u200b\u200bde vigtigste reklamekanaler. Selv i et post-pandemisk marked vokser udgifterne til mobilannoncer<\/a> med 4,8% til 91,52 milliarder dollar.<\/p>\n

Uanset om du v\u00e6lger at annoncere p\u00e5 sociale medier<\/a> eller bruge en organisk tilgang som YouTube SEO<\/a>, kommer langt st\u00f8rstedelen af \u200b\u200bdin trafik fra mobilbrugere.<\/p>\n

Hvis dine landing pages<\/a> ikke er optimeret til mobil og nemme at bruge, kan du ikke maksimere investeringsafkastet for din marketingindsats. D\u00e5rlige konverteringsfrekvenser<\/a> vil f\u00f8re til f\u00e6rre kundeemner og spildte annonceudgifter.<\/p>\n

Er WordPress-websteder responsivt?<\/h2>\n

Hvorvidt WordPress-sider er responsive eller ej, afh\u00e6nger af temaet p\u00e5 dit WP-websted. Et WordPress-tema<\/a> svarer til en skabelon til et statisk websted og styrer designet og layoutet af dit indhold.<\/p>\n

Hvis du bruger et standard WordPress-tema, som Twenty Twenty<\/a>, er designet responsivt, men da det er et enkeltkolonnedesign, er du m\u00e5ske ikke klar over det, n\u00e5r du ser p\u00e5 det p\u00e5 forskellige sk\u00e6rme.<\/p>\n

Hvis du bruger et andet WordPress-tema, kan du teste, om det er responsivt eller ej, ved at sammenligne, hvordan det ser ud p\u00e5 forskellige enheder eller ved hj\u00e6lp af Chrome Developer Tools.<\/p>\n

Byggestenene i responsivt webdesign<\/h2>\n

I dette afsnit d\u00e6kker vi det underliggende fundament for responsivt webdesign og dets forskellige byggesten.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

CSS og HTML<\/h3>\n

Grundlaget for responsivt design er kombinationen af \u200b\u200bHTML og CSS<\/a>, to sprog, der styrer indholdet og layoutet p\u00e5 en side i en given webbrowser.<\/p>\n

\"HTML
HTML vs CSS (billedekilde: codingdojo.com)<\/figcaption><\/figure>\n

HTML styrer hovedsageligt strukturen, elementerne og indholdet p\u00e5 en webside. For at tilf\u00f8je et billede til et websted<\/a> skal du f.eks. Bruge HTML-kode som denne:<\/p>\n

<img src=\"image.gif\" alt=\"image\" class=\u201dfull-width-img\u201d><\/code><\/pre>\n
Du kan indstille en “class” eller “id”, som du senere kan m\u00e5lrette med CSS-kode<\/a>.<\/p>\n
Du kan ogs\u00e5 kontrollere prim\u00e6re attributter s\u00e5som h\u00f8jde og bredde inden for din HTML, men dette betragtes ikke l\u00e6ngere som bedste praksis.<\/p>\n
I stedet bruges CSS<\/a> til at redigere design og layout af de elementer, du inkluderer p\u00e5 en side med HTML. CSS-kode kan inkluderes i et <style><\/code> -snit i et HTML-dokument eller som en separat stylesheet fil<\/a>.<\/p>\n
For eksempel kunne vi redigere bredden p\u00e5 alle HTML-billeder p\u00e5 elementniveau p\u00e5 denne m\u00e5de:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
Eller vi kunne m\u00e5lrette mod den specifikke klasse “fuld bredde-img” ved at tilf\u00f8je en periode foran.<\/p>\n
.full-width-img {\nwidth: 100%;\n}<\/code><\/pre>\n
Du kan ogs\u00e5 styre designet ud over bare h\u00f8jde, bredde og farve<\/a>. Brug af CSS som denne er, hvordan du f\u00e5r et design til at reagere, n\u00e5r du kombinerer det med en teknik kaldet medieforesp\u00f8rgsel.<\/p>\n
Medieforesp\u00f8rgsler<\/h3>\n
En medieforesp\u00f8rgsel<\/a> er en grundl\u00e6ggende del af CSS3, der giver dig mulighed for at gengive indhold til at tilpasse sig forskellige faktorer som sk\u00e6rmst\u00f8rrelse eller opl\u00f8sning.<\/p>\n
\"Medieforesp\u00f8rgsler
Medieforesp\u00f8rgsler til desktop, tablet, smartphone<\/figcaption><\/figure>\n
Det fungerer p\u00e5 samme m\u00e5de som en “if clause” p\u00e5 nogle programmeringssprog<\/a> og kontrollerer grundl\u00e6ggende, om<\/em> sk\u00e6rmbilledets visningsport er bred nok eller for bred, f\u00f8r den relevante kode udf\u00f8res.<\/p>\n
@media screen and (min-width: 780px) {\n.full-width-img {\nmargin: auto;\nwidth: 90%;\n}<\/code><\/pre>\n
Hvis sk\u00e6rmen er mindst 780 pixels bred, vil “full-width-img” klassebilleder tage 90% af sk\u00e6rmen og centreres automatisk med lige store margener.<\/p>\n
Fluid layout<\/h3>\n
Et fluid layout er en v\u00e6sentlig del af moderne responsivt design. I de gode gamle dage ville du indstille en statisk v\u00e6rdi for hvert HTML-element, f.eks. 600 pixels.<\/p>\n
Et fluid layout er i stedet afh\u00e6ngig af dynamiske v\u00e6rdier som en procentdel af visningsbredden.<\/p>\n
\"Eksempel
Eksempel p\u00e5 fluid layout<\/figcaption><\/figure>\n
Denne tilgang \u00f8ger eller formindsker de forskellige st\u00f8rrelser p\u00e5 containerelement dynamisk baseret p\u00e5 sk\u00e6rmens st\u00f8rrelse.<\/p>\n
Flexbox-layout<\/h3>\n
Mens et procentbaseret layout er flydende, f\u00f8lte mange designere og webudviklere, at det ikke var dynamisk eller fleksibelt nok. Flexbox er et CSS-modul designet til en mere effektiv m\u00e5de at l\u00e6gge flere elementer p\u00e5, selv n\u00e5r st\u00f8rrelsen p\u00e5 indholdet inde i containeren er ukendt.<\/p>\n
En flexcontainer udvider emner for at udfylde ledig plads eller krymper dem for at forhindre overl\u00f8b. Disse flexcontainere har en r\u00e6kke unikke egenskaber, som justify-content, som du ikke kan redigere med et almindeligt HTML-element.<\/p>\n
\"Flexbox
Flexbox container<\/figcaption><\/figure>\n
Det er et kompliceret emne, s\u00e5 hvis du vil bruge det i dit design, skal du l\u00e6se CSS Tricks ‘flexbox-guide<\/a>.<\/p>\n
Responsive billeder<\/h3>\n
Den mest basale iteration af responsive billeder f\u00f8lger det samme koncept som et fluid layout ved hj\u00e6lp af en dynamisk enhed til at kontrollere bredden eller h\u00f8jden. Eksemplet p\u00e5 CSS-kode, vi d\u00e6kkede tidligere, udf\u00f8rer allerede dette:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
Enheden % svarer til en enkelt procentdel af visningsportens bredde eller h\u00f8jde og s\u00f8rger for, at billedet forbliver i forhold til sk\u00e6rmen.<\/p>\n
Problemet med denne tilgang er, at hver bruger skal downloade billedet i fuld st\u00f8rrelse, selv p\u00e5 mobil.<\/p>\n
For at kunne betjene forskellige versioner, der skaleres til forskellige enheder, skal du bruge attributten HTML srcset<\/code> i dine img-tags for at angive mere end en billedst\u00f8rrelse at v\u00e6lge imellem.<\/p>\n
<img srcset=\"large-img.jpg 1024w,\nmiddle-img.jpg 640w,\nsmall-img.jpg \u00a0320w\"\nsrc=\"small.jpg\"\n\/><\/code><\/pre>\n
WordPress bruger automatisk denne funktionalitet til billeder, der er inkluderet i indl\u00e6g eller sider.<\/p>\n
Fart<\/h3>\n
N\u00e5r du fors\u00f8ger at oprette et responsivt design til dit websted, skal indl\u00e6sningshastigheden v\u00e6re en topprioritet<\/a>.<\/p>\n
Sider, der indl\u00e6ses p\u00e5 2 sekunder, har en gennemsnitlig bounce rate p\u00e5 9%<\/a>, mens sider, der tager 5 sekunder, f\u00f8rer til en bounce rate p\u00e5 38%.<\/p>\n
Din tilgang til responsive m\u00e5 ikke blokere eller forsinke din sides f\u00f8rste gengivelse mere end den har brug for.<\/p>\n
Der er flere m\u00e5der, du kan g\u00f8re dine sider hurtigere p\u00e5. Optimering af dine billeder<\/a>, implementering af cache<\/a>, minificering, brug af et mere effektivt CSS-layout, undg\u00e5 render blokerende JS<\/a> og forbedring af din kritiske rendering path<\/a> er alle gode ideer, du b\u00f8r overveje.<\/p>\n
Kinsta-kunder<\/a> har adgang til en hurtig og nem m\u00e5de at opn\u00e5 dette ved at bruge kode minifikationsfunktionen<\/a>, der er indbygget direkte i MyKinsta-dashboardet<\/a>, hvilket giver kunderne mulighed for at aktivere automatisk CSS- og JavaScript-minifikation med et enkelt klik.<\/p>\n
Du kan ogs\u00e5 pr\u00f8ve at implementere Google AMP til dine mobilsider, men i vores Google AMP-casestudie<\/a> faldt vores mobile kundeemner med hele 59%.<\/p>\n
Almindelige responsive breakpoints<\/h2>\n
For at arbejde med medieforesp\u00f8rgsler skal du beslutte dig for “responsive breakpoints” eller sk\u00e6rmst\u00f8rrelses breakpoints. Et brudpunkt er bredden p\u00e5 sk\u00e6rmen, hvor du bruger en medieforesp\u00f8rgsel til at implementere nye CSS-stilarter.<\/p>\n
Almindelige sk\u00e6rmst\u00f8rrelser<\/h3>\n