{"id":37912,"date":"2020-12-02T04:05:28","date_gmt":"2020-12-02T12:05:28","guid":{"rendered":"https:\/\/kinsta.com\/?p=78861&preview=true&preview_id=78861"},"modified":"2022-05-10T20:20:30","modified_gmt":"2022-05-10T20:20:30","slug":"responsiv-webdesign","status":"publish","type":"post","link":"https:\/\/kinsta.com\/se\/blog\/responsiv-webdesign\/","title":{"rendered":"Nyb\u00f6rjarguiden till Responsiv Webbdesign (kodexempel & layout-exempel)"},"content":{"rendered":"

Internet nyttjas alltmer av mobila enheter, och det r\u00e4cker inte l\u00e4ngre att ha en statisk webbplats<\/a>-design som endast ser bra ut p\u00e5 en datorsk\u00e4rm.<\/p>\n

Webbplatsens design m\u00e5ste \u00e4ven se bra ut p\u00e5 surfplattor, 2-i-1 b\u00e4rbara datorer, och olika smartphone-modeller med olika sk\u00e4rm-m\u00e5tt.<\/p>\n

S\u00e5 att forma ditt inneh\u00e5ll<\/a> till en statisk massa kommer inte att r\u00e4cka i den tid vi lever i.<\/p>\n

Med en responsiv webbdesign<\/a>, kan du se till att din webbplats ser s\u00e5 bra ut som m\u00f6jligt p\u00e5 mobiltelefoner, surfplattor, b\u00e4rbara datorer, och station\u00e4ra sk\u00e4rmar.<\/p>\n

En f\u00f6rb\u00e4ttring av anv\u00e4ndarupplevelsen inneb\u00e4r dessutom h\u00f6gre konverteringsfrekvens och tillv\u00e4xt i verksamheten.<\/p>\n

Den h\u00e4r guiden g\u00e5r igenom allt du beh\u00f6ver veta om responsiv webbplatsdesign. Detta inkluderar definitioner, en stegvis genomg\u00e5ng, exempel, och mycket mer.<\/p>\n

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

Kolla in v\u00e5r videoguide om responsiv webbdesign:<\/h3>\n

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

Vad \u00e4r responsiv Webbdesign?<\/h2>\n

Responsiv design \u00e4r en metod som g\u00f6r att ditt webbinneh\u00e5ll anpassas efter de olika sk\u00e4rm- och f\u00f6nsterstorlekarna p\u00e5 en m\u00e4ngd olika enheter.<\/p>\n

Ditt inneh\u00e5ll kan exempelvis delas upp i olika kolumner p\u00e5 skrivbordssk\u00e4rmar, eftersom de \u00e4r tillr\u00e4ckligt breda f\u00f6r att rymma den designen.<\/p>\n

Om du separerar ditt inneh\u00e5ll i flera kolumner p\u00e5 en mobil enhet blir det sv\u00e5rt f\u00f6r anv\u00e4ndarna att l\u00e4sa och interagera.<\/p>\n

Responsiv design<\/a> g\u00f6r det m\u00f6jligt att leverera flera, separata layouter av ditt inneh\u00e5ll och din design till olika enheter beroende p\u00e5 sk\u00e4rmstorlek.<\/p>\n\n

Responsiv webbdesign vs adaptiv design<\/h2>\n

Skillnaden mellan responsiv design och adaptiv design \u00e4r att responsiv design anpassar \u00e5tergivningen av en enda sida. Adaptiv design levererar ist\u00e4llet flera helt olika versioner av samma sida.<\/p>\n

\"responsive
Responsive vs adaptive design<\/figcaption><\/figure>\n

B\u00e5da dessa s\u00e4tt \u00e4r avg\u00f6rande webbdesign-trender<\/a> som hj\u00e4lper webmasters att kontrollera hur deras webbplats ser ut p\u00e5 olika sk\u00e4rmar. Tillv\u00e4gag\u00e5ngss\u00e4ttet \u00e4r dock annorlunda.<\/p>\n

Med responsiv design kommer anv\u00e4ndarna att komma \u00e5t samma grundl\u00e4ggande fil via sin webbl\u00e4sare, oavsett enhet. CSS-koden<\/a>\u00a0kommer d\u00e4remot att styra layouten och \u00e5terge den annorlunda baserat p\u00e5 sk\u00e4rmstorlek.\u00a0Med adaptiv design finns det ett skript som kontrollerar sk\u00e4rmstorleken, och sedan kommer \u00e5t den mall som \u00e4r avsedd f\u00f6r den enheten.<\/p>\n

Varf\u00f6r det \u00e4r viktigt med responsiv design<\/h2>\n

Om du \u00e4r ny p\u00e5 webbdesign, utveckling,<\/a> eller bloggning<\/a>, kanske du undrar varf\u00f6r responsiv design \u00e4r viktigt?<\/p>\n

Svaret \u00e4r enkelt. Det r\u00e4cker inte l\u00e4ngre att designa f\u00f6r en enda enhet. Mobil webbtrafik har g\u00e5tt om datorernas webbtrafik och utg\u00f6r nu majoriteten av webbplatsernas trafik,<\/a> mer \u00e4n 51%<\/a>.<\/p>\n

\"Marknadsandelar
Marknadsandelar f\u00f6r mobiler, surfplattor och station\u00e4ra datorer<\/figcaption><\/figure>\n

P\u00e5 grund av att \u00f6ver h\u00e4lften av dina potentiella bes\u00f6kare anv\u00e4nder en mobil enhet f\u00f6r att surfa p\u00e5 internet, kan du inte bara ge dem en sida som \u00e4r avsedd f\u00f6r datorn. Det g\u00f6r det sv\u00e5rt att l\u00e4sa och nyttja sidan, och leder till en d\u00e5lig anv\u00e4ndarupplevelse.<\/p>\n

Inte nog med det, anv\u00e4ndare p\u00e5 mobila enheter utg\u00f6r \u00e4ven majoriteten av bes\u00f6k p\u00e5 s\u00f6kmotorer.<\/a><\/p>\n

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

Mobilen har under de senaste \u00e5ren \u00e4ven blivit en av de viktigaste reklamkanalerna. \u00c4ven p\u00e5 en post-pandemisk marknad, \u00f6kar mobila annonsutgifter<\/a> med 4,8% till $ 91.52 miljarder.<\/p>\n

Oavsett om du v\u00e4ljer att annonsera p\u00e5 sociala medier<\/a> eller anv\u00e4nda en organisk strategi som YouTube SEO<\/a>, kommer den stora majoriteten av din trafik fr\u00e5n mobila anv\u00e4ndare.<\/p>\n

Om dina m\u00e5lsidor<\/a> inte \u00e4r optimerade f\u00f6r mobiler kan du inte maximera avkastningen p\u00e5 investeringen i marknadsf\u00f6ringsarbetet. D\u00e5liga konverteringsfrekvenser<\/a> kommer att leda till f\u00e4rre leads och bortkastade annonsutgifter.<\/p>\n

\u00c4r WordPress-webbplatser responsiva?<\/h2>\n

Om WordPress-webbplatser \u00e4r responsiva eller inte beror p\u00e5 temat f\u00f6r din WP-webbplats. Ett WordPress-tema<\/a> \u00e4r motsvarigheten till en mall f\u00f6r en statisk webbplats och styr designen och layouten p\u00e5 ditt inneh\u00e5ll.<\/p>\n

Om du anv\u00e4nder ett standard WordPress-tema, som Twenty Twenty,<\/a> \u00e4r designen responsiv. Men eftersom detta \u00e4r en design f\u00f6r en enda kolumn, kanske det inte framg\u00e5r n\u00e4r man tittar p\u00e5 den p\u00e5 olika sk\u00e4rmar.<\/p>\n

Om du anv\u00e4nder ett annat WordPress-tema kan du testa om det \u00e4r responsivt eller inte genom att j\u00e4mf\u00f6ra hur det ser ut p\u00e5 olika enheter eller anv\u00e4nda Chrome Developer Tools.<\/p>\n

Byggstenarna i Responsiv webbdesign<\/h2>\n

I det h\u00e4r avsnittet g\u00e5r vi igenom grunden f\u00f6r responsiv webbplatsdesign och dess olika byggstenar.<\/p>\n

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

CSS och HTML<\/h3>\n

Grunden f\u00f6r responsiv design \u00e4r kombinationen av HTML och CSS<\/a>, tv\u00e5 spr\u00e5k som styr inneh\u00e5llet och layouten p\u00e5 en sida i en viss webbl\u00e4sare.<\/p>\n

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

HTML styr huvudsakligen strukturen, elementen och inneh\u00e5llet p\u00e5 en webbsida. Om du exempelvis vill l\u00e4gga till en bild p\u00e5 en webbplats<\/a> m\u00e5ste du anv\u00e4nda HTML-kod s\u00e5 h\u00e4r:<\/p>\n

<img src=\"image.gif\" alt=\"image\" class=\u201dfull-width-img\u201d><\/code><\/pre>\n
Du kan st\u00e4lla in en ”class” eller ett ”id” som du senare kan rikta in dig p\u00e5 med CSS-kod<\/a>.<\/p>\n
Du kan \u00e4ven styra prim\u00e4ra attribut som h\u00f6jd och bredd med HTML, men detta anses inte l\u00e4ngre vara b\u00e4sta praxis.<\/p>\n
Det \u00e4r ist\u00e4llet b\u00e4ttre att anv\u00e4nda CSS<\/a> f\u00f6r att redigera design och layout f\u00f6r de element som du inkluderar p\u00e5 en sida med HTML. CSS-kod kan ing\u00e5 i ett <style><\/code> – avsnitt i ett HTML-dokument, eller som en separat stylesheet-fil<\/a>.<\/p>\n
Vi skulle exempelvis kunna redigera bredden p\u00e5 alla HTML-bilder p\u00e5 elementniv\u00e5 s\u00e5 h\u00e4r:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
Eller s\u00e5 kan vi rikta in oss p\u00e5 den specifika klassen ”full-width-img” genom att l\u00e4gga till en punkt framf\u00f6r.<\/p>\n
.full-width-img {\nwidth: 100%;\n}<\/code><\/pre>\n
Du kan \u00e4ven styra designen bortom h\u00f6jd, bredd och f\u00e4rg<\/a>. S\u00e5 h\u00e4r kan du anv\u00e4nda CSS f\u00f6r att skapa en responsiv design n\u00e4r du kombinerar det med en teknik som kallas mediafr\u00e5gor.<\/p>\n
Mediafr\u00e5gor<\/h3>\n
En mediafr\u00e5ga<\/a> \u00e4r en grundl\u00e4ggande del av CSS3 som l\u00e5ter dig rendera inneh\u00e5ll f\u00f6r att anpassa dig till olika faktorer som sk\u00e4rmstorlek eller uppl\u00f6sning.<\/p>\n
\"Mediafr\u00e5gor
Mediafr\u00e5gor f\u00f6r station\u00e4r dator, surfplatta, smartphone<\/figcaption><\/figure>\n
Detta fungerar p\u00e5 ett liknande s\u00e4tt som en ”if-sats” i vissa programmeringsspr\u00e5k<\/a>. Det kontrolleras i princip om<\/em> en sk\u00e4rms storlek \u00e4r tillr\u00e4ckligt bred eller f\u00f6r bred innan du k\u00f6r l\u00e4mplig kod.<\/p>\n
@media screen and (min-width: 780px) {\n.full-width-img {\nmargin: auto;\nwidth: 90%;\n}<\/code><\/pre>\n
Om sk\u00e4rmen \u00e4r minst 780 pixlar bred, kommer ”full-width-img” class bilder att ta upp 90% av sk\u00e4rmen och automatiskt centreras av lika breda marginaler.<\/p>\n
Flytande layout<\/h3>\n
En flytande layout \u00e4r en v\u00e4sentlig del av modern responsiv design.\u00a0P\u00e5 den gamla goda tiden st\u00e4llde du in ett statiskt v\u00e4rde f\u00f6r varje HTML-element, som 600 pixlar.<\/p>\n
En flytande layout f\u00f6rlitar sig ist\u00e4llet p\u00e5 dynamiska v\u00e4rden som en procentandel av vyports-bredden.<\/p>\n
\"Exempel
Exempel p\u00e5 flytande layout<\/figcaption><\/figure>\n
Den h\u00e4r metoden kommer dynamiskt att \u00f6ka eller minska storlekarna p\u00e5 de olika container-elementen baserat p\u00e5 sk\u00e4rmens storlek.<\/p>\n
Flexbox Layout<\/h3>\n
En procentbaserad layout \u00e4r visserligen flytande, men m\u00e5nga designers och webbutvecklare k\u00e4nner att det inte \u00e4r tillr\u00e4ckligt dynamiskt eller flexibelt.\u00a0Flexbox \u00e4r en CSS-modul som \u00e4r utformad som ett effektivare s\u00e4tt att l\u00e4gga ut flera element, \u00e4ven n\u00e4r storleken p\u00e5 inneh\u00e5llet inuti containern \u00e4r ok\u00e4nt.<\/p>\n
En flex-container expanderar objekt f\u00f6r att fylla det tillg\u00e4ngliga utrymmet som \u00e4r ledigt eller f\u00f6rminskar dem f\u00f6r att f\u00f6rhindra att de \u00e4r f\u00f6r stora.\u00a0Dessa flex-containers har ett antal unika egenskaper, som exempelvis justify-content. Detta kan du inte redigera med ett vanligt HTML-element.<\/p>\n
\"flexbox
Flexbox-container<\/figcaption><\/figure>\n
Detta \u00e4r ett komplicerat \u00e4mne, s\u00e5 om du vill anv\u00e4nda det i din design, b\u00f6r du l\u00e4sa CSS Tricks’ flexbox guide<\/a>.<\/p>\n
Responsiva bilder<\/h3>\n
Den mest grundl\u00e4ggande upprepningen av responsiva bilder f\u00f6ljer samma koncept som en flytande layout. Det nyttjas en dynamisk enhet f\u00f6r att styra bredden eller h\u00f6jden. CSS-koden som vi skrev tidigare \u00e5stadkommer redan detta:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
% enheten approximerar till en enda procentsats av bredden eller h\u00f6jden p\u00e5 vyporten och ser till att bilden f\u00f6rblir i proportion till sk\u00e4rmen.<\/p>\n
Problemet med detta tillv\u00e4gag\u00e5ngss\u00e4tt \u00e4r att varje anv\u00e4ndare m\u00e5ste ladda ner en fullstor bild, \u00e4ven p\u00e5 mobilen.<\/p>\n
F\u00f6r att ha olika versioner som skalas f\u00f6r olika enheter, m\u00e5ste du anv\u00e4nda HTML srcset<\/code>-attributet i dina img-taggar. D\u00e5 anges det mer \u00e4n en bildstorlek att v\u00e4lja mellan.<\/p>\n
<img srcset=\"large-img.jpg 1024w,\nmiddle-img.jpg 640w,\nsmall-img.jpg \u00a0320w\"\nsrc=\"small.jpg\"\n\/><\/code><\/pre>\n
WordPress anv\u00e4nder denna funktionalitet automatiskt f\u00f6r bilder som ing\u00e5r i inl\u00e4gg eller sidor.<\/p>\n
Hastighet<\/h3>\n
N\u00e4r du f\u00f6rs\u00f6ker skapa en responsiv design f\u00f6r din webbplats b\u00f6r laddningshastigheten ha h\u00f6gsta prioritet<\/a>.<\/p>\n
Sidor som laddas p\u00e5 2 sekunder har i genomsnitt 9 % avvisningsfrekvens<\/a>, medan sidor som tar 5 sekunder leder till en avvisningsfrekvens p\u00e5 38 %.<\/p>\n
Din responsiva design f\u00e5r inte blockera eller f\u00f6rdr\u00f6ja sidans f\u00f6rsta rendering mer \u00e4n det kr\u00e4vs.<\/p>\n
Det finns flera s\u00e4tt att g\u00f6ra dina sidor snabbare p\u00e5. Exempel p\u00e5 detta \u00e4r\u00a0Optimering av dina bilder<\/a>, genomf\u00f6rande av cachelagring,<\/a> minification, anv\u00e4ndandet av en mer effektiv CSS layout och att undvika renderings-blockering JS<\/a>. Du b\u00f6r \u00e4ven \u00f6verv\u00e4ga att f\u00f6rb\u00e4ttra din kritiska renderingsbana<\/a>.<\/p>\n
Kinsta’s kunder<\/a> har tillg\u00e5ng till ett snabbt och enkelt s\u00e4tt att \u00e5stadkomma detta genom att anv\u00e4nda kodminifierings-funktionen<\/a> som \u00e4r inbyggd direkt i MyKinsta-instrumentpanelen<\/a>. Den g\u00f6r att kunderna kan aktivera automatisk CSS- och JavaScript-minifiering med ett enkelt klick.<\/p>\n
Du kan \u00e4ven f\u00f6rs\u00f6ka implementera Google AMP f\u00f6r dina mobilsidor, men i v\u00e5r fallstudie fr\u00e5n Google AMP<\/a> minskade v\u00e5ra mobil-leads med hela 59 %.<\/p>\n
Vanliga responsiva brytpunkter<\/h2>\n
F\u00f6r att arbeta med mediafr\u00e5gor m\u00e5ste du best\u00e4mma dig f\u00f6r brytpunkterna ”responsive breakpoints” eller sk\u00e4rmstorlek. En brytpunkt \u00e4r bredden p\u00e5 sk\u00e4rmen d\u00e4r du anv\u00e4nder en mediefr\u00e5ga f\u00f6r att implementera nya CSS-format.<\/p>\n
Vanliga sk\u00e4rmstorlekar<\/h3>\n