{"id":264965,"date":"2022-12-31T09:30:00","date_gmt":"2022-12-31T06:30:00","guid":{"rendered":"https:\/\/inform.click\/fa-responsiva-webbplatser-att-fungera\/"},"modified":"2022-12-31T09:30:00","modified_gmt":"2022-12-31T06:30:00","slug":"fa-responsiva-webbplatser-att-fungera","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/fa-responsiva-webbplatser-att-fungera\/","title":{"rendered":"F\u00e5 responsiva webbplatser att fungera"},"content":{"rendered":"<p>\n  Det fanns en tid n\u00e4r du med s\u00e4kerhet kunde skilja mellan en datorwebbsida och en mobilwebbsida. Faktiskt s\u00e5 mycket att en hel industri v\u00e4xte upp kring att \u00e5teranv\u00e4nda station\u00e4ra webbplatser f\u00f6r mobila enheter.\n<\/p>\n<p>\n  Ett tag var du ingen om du inte hade en separat mobilsajt p\u00e5 en separat dom\u00e4n. Sedan b\u00f6rjade saker f\u00f6r\u00e4ndras.\n<\/p>\n<p>\n  Mobilsk\u00e4rmar f\u00f6rb\u00e4ttrade till oigenk\u00e4nnlighet. Det gjorde \u00e4ven mobila webbl\u00e4sare. Tabletter kastade ett annat element in i ekvationen. 4G kom med. Retina-sk\u00e4rmar erbj\u00f6d nya niv\u00e5er av tydlighet f\u00f6r slutanv\u00e4ndare.\n<\/p>\n<p>\n  Pl\u00f6tsligt s\u00e5g gr\u00e4nsen mellan station\u00e4r dator och mobil suddig ut.\n<\/p>\n<p>\n  Samtidigt \u00f6kade m\u00e5ngfalden i storlek och uppl\u00f6sning p\u00e5 skrivbordssk\u00e4rmar.\n<\/p>\n<p>\n  Och en v\u00e4xande huvudv\u00e4rk f\u00f6r webbdesigners.\n<\/p>\n<p>\n  De dagar d\u00e5 du bara beh\u00f6vde tillgodose en handfull utsiktsportstorlekar var f\u00f6rbi. Saker och ting b\u00f6rjade bli komplicerade.\n<\/p>\n<p>\n  Lyckligtvis fanns hj\u00e4lp till hands i form av mediafr\u00e5gor och konceptet med responsiv design.\n<\/p>\n<p>\n  Tack vare mediafr\u00e5gor blev det m\u00f6jligt att variera stilar och layout \u2013 \u00e4ven inneh\u00e5ll \u2013 beroende p\u00e5 anv\u00e4ndarens visningsportbredd och sk\u00e4rmuppl\u00f6sning. Naturligtvis \u00e4r mediefr\u00e5gor inte p\u00e5 n\u00e5got s\u00e4tt det enda verktyget i den responsiva designerns tricksp\u00e5se, men det \u00e4r rimligt att s\u00e4ga att de ligger till grund f\u00f6r tekniken.\n<\/p>\n<p>\n  Detta var fantastiska nyheter f\u00f6r mobilen. Responsiv design innebar att du effektivt kunde leverera olika versioner av samma sajt till olika enheter. Allt utan att utveckla en separat mobilsajt p\u00e5 en annan dom\u00e4n.\n<\/p>\n<h4>\n  Hur \u00e4r det med prestanda?<br \/>\n<\/h4>\n<p>\n  Webbplats\u00e4gare b\u00f6rjar inse att slutanv\u00e4ndare bryr sig om prestanda. S\u00e4rskilt \u00e5terf\u00f6rs\u00e4ljare b\u00f6rjar inse att rakning av millisekunders laddningstid kan \u00f6vers\u00e4ttas till miljoner p\u00e5 balansr\u00e4kningen.\n<\/p>\n<p>\n  Lyckligtvis erbjuder responsiva webbplatser en tydlig prestandaf\u00f6rdel j\u00e4mf\u00f6rt med sina dedikerade mobila kusiner: omdirigeringen till en mobil dom\u00e4n elimineras.\n<\/p>\n<p>\n  Men trots detta har responsiv design lyckats skaffa sig lite rykte f\u00f6r d\u00e5lig prestanda.\n<\/p>\n<p>\n  P\u00e5 vissa s\u00e4tt \u00e4r det h\u00e4r ganska or\u00e4ttvist, men det \u00e4r v\u00e4rt att titta p\u00e5 de extra prestandautmaningarna som lyh\u00f6rd design ger upphov till of\u00f6rsiktiga&#8230;\n<\/p>\n<h5>\n  Bilder<br \/>\n<\/h5>\n<p>\n  Bildfiler \u00e4r stora. Och eftersom de \u00e4r stora \u00e4r de ofta skyldiga till l\u00e5ngsamma laddningstider. De \u00e4r d\u00e4rf\u00f6r ett bra st\u00e4lle att b\u00f6rja f\u00f6r alla som f\u00f6rs\u00f6ker optimera en webbplatss prestanda.\n<\/p>\n<p>\n  Tyv\u00e4rr var en av de f\u00f6rsta l\u00f6sningarna f\u00f6r att leverera bilder responsivt inte bra f\u00f6r prestanda.\n<\/p>\n<p>\n  Tekniken \u00e4r vackert enkel. Anv\u00e4nd bara max-width: 100% f\u00f6r att se till att bilder skalas till bredden p\u00e5 det inneh\u00e5llande elementet:\n<\/p>\n<pre><code>img\n{\nmax-width: 100%;\n}<\/code><\/pre>\n<p>\n  N\u00e4r beh\u00e5llaren krymper f\u00f6r att passa mindre visningsportar, kommer alla bilder inuti att krympa med den. L\u00e4tt!\n<\/p>\n<p>\n  Men det finns ett problem. Storleken p\u00e5 bilden kan krympa p\u00e5 sk\u00e4rmen, men storleken p\u00e5 filen f\u00f6rblir densamma. Detta \u00e4r l\u00e5ngt ifr\u00e5n idealiskt ur prestationssynpunkt. Du kan skicka en bild p\u00e5 800 x 800 pixlar l\u00e4ngs tr\u00e5den, bara f\u00f6r att den ska visas i 80 x 80 pixlar: med andra ord, du kan s\u00e4nda hundratals (eller tusentals) on\u00f6diga byte. Det kommer inte bara ta l\u00e5ng tid att ladda bilden, alla dessa redundanta bytes kan t\u00f6mma slutanv\u00e4ndarens v\u00e4rdefulla datatill\u00e5telse.\n<\/p>\n<p>\n  Detta \u00e4r dock inte det enda \u2013 och inte ens det b\u00e4sta \u2013 s\u00e4ttet att leverera responsiva bilder. F\u00f6r det f\u00f6rsta, en bild som fungerar med 800 pixlar bred kommer inte n\u00f6dv\u00e4ndigtvis att fungera lika bra i olika delar av den storleken.\n<\/p>\n<p>\n  F\u00f6r att hantera detta kan du anv\u00e4nda en mediefr\u00e5ga f\u00f6r att visa olika versioner av bilden beroende p\u00e5 visningsportens storlek genom att anv\u00e4nda en mediefr\u00e5ga och visa: ingen.\n<\/p>\n<p>\n  <strong>CSS:<\/strong>\n<\/p>\n<pre><code>@media (min-width: 601px) {\n#croppedImage\n{\ndisplay:none;\n}\n}\n@media (max-width: 600px) {\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n<p>\n  <strong>HTML:<\/strong>\n<\/p>\n<pre><code>&lt;img id=\"largeImage\" width=\"400\" height=\"400\" alt=\"\" src=\"images\/largeImage.webp\" \/&gt;\n&lt;img id=\"croppedImage\" width=\"200\" height=\"200\" alt=\"\" src=\"images\/croppedImage.webp\" \/&gt;<\/code><\/pre>\n<p>\n  Detta g\u00f6r att du kan visa olika versioner av en bild, snarare \u00e4n bara samma bild i olika storlekar. Det minskar dock inte antalet byte. Faktum \u00e4r att den \u00f6vergripande sidstorleken blir st\u00f6rre, eftersom alla bilder kommer att laddas, oavsett om de visas eller inte.\n<\/p>\n<p>\n  Ett b\u00e4ttre alternativ \u2013 om det \u00e4r praktiskt \u2013 \u00e4r att anv\u00e4nda bakgrundsbilder i st\u00e4llet f\u00f6r <code>&lt;img src=\"https:\/\/inform.click\/wp-content\/uploads\/2024\/11\/inform.click\" \/&gt;<\/code>element. Detta \u00e4r att f\u00f6redra eftersom bilder som h\u00e4nvisas till i CSS laddas endast om de anv\u00e4nds (s\u00e5 l\u00e4nge de inte \u00e4r data-URI):\n<\/p>\n<pre><code>@media (min-width: 601px) {\n#largeImage\n{\nwidth:400px;\nheight:400px;\nbackground-image:url(\/images\/largeImage.webp);\n}\n#croppedImage\n{\ndisplay:none;\n}\n}\n \n@media (max-width: 600px) {\n#croppedImage\n{\nwidth:200px;\nheight:200px;\nbackground-image:url(\/images\/croppedImage.webp);\n}\n#largeImage\n{\ndisplay:none;\n}\n}<\/code><\/pre>\n<p>\n  Detta fungerar bra: bes\u00f6kare laddar bara ner de bilder de beh\u00f6ver, n\u00e4r och n\u00e4r de beh\u00f6ver dem. Problemet \u00e4r att det \u00e4r st\u00f6kigt och effektivt behandlar inneh\u00e5ll som stil. Som s\u00e5dan skapar det potentiellt ett underh\u00e5llsproblem och kan ocks\u00e5 leda till att viktiga bilder ignoreras av s\u00f6kmotorer.\n<\/p>\n<p>\n  Varf\u00f6r inte ist\u00e4llet anv\u00e4nda SVG (skalbar vektorgrafik): ett bildformat som skalas till sin natur? SVG-bilder har ocks\u00e5 f\u00f6rdelen att de enkelt kan stylas med CSS (se <a href=\"http:\/\/tympanus.net\/codrops\/2014\/08\/19\/making-svgs-responsive-with-css\/\" target=\"_blank\" rel=\"noopener\">den h\u00e4r fantastiska handledningen<\/a> om hur du g\u00f6r SVG responsiva med CSS). Detta \u00e4r perfekt f\u00f6r ikoner och logotyper, men tyv\u00e4rr kommer du inte att kunna anv\u00e4nda SVG:er f\u00f6r foton \u2013 f\u00f6r dessa m\u00e5ste du tillgripa rasterformat, som JPEG.\n<\/p>\n<p>\n  Ett annat alternativ \u00e4r att anv\u00e4nda en av ett antal JavaScript-l\u00f6sningar f\u00f6r att leverera responsiva bilder. Detta \u00e4r ett popul\u00e4rt s\u00e4tt att g\u00f6ra det, men det l\u00e4gger till ytterligare ett lager av komplexitet. Dessutom, eftersom JavaScript blockerar DOM-konstruktion, har alla l\u00f6sningar som involverar JavaScript potentialen att h\u00e5lla uppe renderingen. S\u00e5 \u00e4ven om det finns n\u00e5gra mycket smarta plugins d\u00e4r ute, bara genom att introducera JavaScript i ekvationen, \u00f6verl\u00e5ter du dig i viss m\u00e5n till det minsta av tv\u00e5 onda.\n<\/p>\n<p>\n  Tills nyligen var dessa de enda alternativen.\n<\/p>\n<p>\n  Nu, men elementen och <code>&lt;source \/&gt;<\/code>, och attributen srcset och sizes, ger \u00e4ntligen verkligt responsiva bilder till webben. Den nya specifikationen b\u00f6rjar ocks\u00e5 f\u00e5 webbl\u00e4sarst\u00f6d, med fullt st\u00f6d i Chrome och Opera, och st\u00f6d f\u00f6r uppl\u00f6sningsv\u00e4xling i Safari. Tills andra webbl\u00e4sare kommer ikapp finns det en utm\u00e4rkt JavaScript <a href=\"https:\/\/scottjehl.github.io\/picturefill\/\" target=\"_blank\" rel=\"noopener\">-polyfill<\/a>.\n<\/p>\n<p>\n  I denna modiga nya v\u00e4rld kan du anv\u00e4nda srcset f\u00f6r att skapa en lista med kandidatbilder som webbl\u00e4saren kan v\u00e4lja fr\u00e5n. Du kan sedan anv\u00e4nda en mediefr\u00e5ga i storleksattributet f\u00f6r att diktera storleken p\u00e5 vilken bilden ska visas. Genom att anv\u00e4nda elementet tillsammans med mediefr\u00e5gor inuti ett eller flera element kan du specificera ett annat intervall av bilder f\u00f6r olika f\u00f6rh\u00e5llanden (t.ex. f\u00f6r visningsportar upp till en viss bredd, anv\u00e4nd bild a, b eller c, och f\u00f6r st\u00f6rre visningsportar anv\u00e4nd bild x, y eller z). Detta \u00e4r anv\u00e4ndbart om du beh\u00f6ver leverera en beskuren version av en bild f\u00f6r anv\u00e4ndare med sm\u00e5 sk\u00e4rmar.\n<\/p>\n<p>\n  Den exakta detaljen f\u00f6r hur man anv\u00e4nder den nya syntaxen ligger utanf\u00f6r ramen f\u00f6r den h\u00e4r artikeln, men du kan hitta en utm\u00e4rkt handledning p\u00e5 <a href=\"http:\/\/alistapart.com\/article\/responsive-images-in-practice\" target=\"_blank\" rel=\"noopener\">alistapart<\/a>.\n<\/p>\n<p>\n  Den kanske enda nackdelen med den h\u00e4r nya specifikationen \u00e4r att den \u00e4r ganska l\u00e5ngrandig, vilket kan inneb\u00e4ra uppsv\u00e4lld HTML p\u00e5 sidor med massor av bilder. Men f\u00f6rdelarna \u00f6verv\u00e4ger vida nackdelarna.\n<\/p>\n<h5>\n  Laddar CSS du inte (n\u00f6dv\u00e4ndigtvis) beh\u00f6ver<br \/>\n<\/h5>\n<p>\n  \u00c4ven om mediefr\u00e5gor l\u00e5ter dig till\u00e4mpa olika CSS-regler beroende p\u00e5 de kriterier du har st\u00e4llt in, g\u00e5r det inte att komma ifr\u00e5n det faktum att slutanv\u00e4ndare m\u00e5ste ladda ner all CSS som kan g\u00e4lla. Detta g\u00e4ller \u00e4ven om du l\u00e4gger din CSS i separata filer och placerar din mediefr\u00e5ga i\n<\/p>\n<link \/>elementet.\n<p>\n  Till exempel kommer b\u00e5da f\u00f6ljande stilmallar att laddas, oavsett visningsportens bredd:\n<\/p>\n<link rel=\"stylesheet\" media=\"(max-width: 600px)\" href=\"css\/style1.css\" \/>\n<pre>\n<\/pre>\n<link rel=\"stylesheet\" media=\"(min-width: 601px)\" href=\"css\/style2.css\" \/>\n<p>\n  <code>Detta \u00e4r inte en webbl\u00e4sarbugg. Kriterierna som anv\u00e4nds i mediefr\u00e5gor relaterar ofta till saker som f\u00f6r\u00e4ndras under ett bes\u00f6k p\u00e5 en sida. En bes\u00f6kare kan till exempel v\u00e4lja att \u00e4ndra storlek p\u00e5 webbl\u00e4sarf\u00f6nstret eller rotera sin surfplatta\/mobilenhet. Den resulterande f\u00f6r\u00e4ndringen i visningen b\u00f6r vara s\u00f6ml\u00f6s, och att avfyra en beg\u00e4ran om en annan CSS-fil skulle vara l\u00e5ngt ifr\u00e5n idealiskt. Detta g\u00e4ller s\u00e4rskilt f\u00f6r mobila enheter, som f\u00f6rs\u00f6ker st\u00e4nga radiol\u00e4nkar s\u00e5 snart som m\u00f6jligt f\u00f6r att bevara batterikraften. Att eventuellt beh\u00f6va \u00e5teruppr\u00e4tta den l\u00e4nken n\u00e4r visningsportens storlek \u00e4ndras kan vara d\u00e5liga nyheter f\u00f6r batteritiden.<\/code>\n<\/p>\n<p>\n  <code>Men Chrome anstr\u00e4nger sig f\u00f6r att hantera dessa olika filer p\u00e5 ett intelligent s\u00e4tt. Medan alla filer kommer att laddas ner, kommer bara den med den aktuella mediefr\u00e5gan att blockera renderingen. Alla andra laddas med l\u00e4gre prioritet.<\/code>\n<\/p>\n<p>\n  <code>Tyv\u00e4rr \u00e4r andra webbl\u00e4sare inte riktigt lika f\u00f6rpliktiga. I Firefox, till exempel, blockerar oanv\u00e4nda CSS-filer inte bara rendering \u2013 de blockerar \u00e4ven laddningen av andra objekt p\u00e5 sidan.<\/code>\n<\/p>\n<p>\n  <code>Vattenfallsdiagrammet nedan illustrerar po\u00e4ngen. Bilderna p\u00e5 den h\u00e4r sidan b\u00f6rjar inte laddas f\u00f6rr\u00e4n den oanv\u00e4nda CSS-filen har laddats ner helt:<\/code>\n<\/p>\n<p>\n  <code>Du kan komma runt detta genom att anv\u00e4nda JavaScript f\u00f6r att ladda CSS villkorligt, men som vi redan har sett kommer JavaScript med sina egna prestandakostnader.<\/code>\n<\/p>\n<h5>\n  <code>Vad betyder allt detta f\u00f6r prestanda f\u00f6r en responsiv webbplats kontra en mobilwebbplats?<\/code><br \/>\n<\/h5>\n<p>\n  <code>Tja, mobilanv\u00e4ndare och station\u00e4ra anv\u00e4ndare p\u00e5 en responsiv webbplats m\u00e5ste ladda ner samma CSS.<\/code>\n<\/p>\n<p>\n  <code>Och det kommer att finnas mer av det \u00e4n vad det skulle vara p\u00e5 en webbplats som \u00e4r designad enbart f\u00f6r dator eller mobil.<\/code>\n<\/p>\n<p>\n  <code>Dessutom \u00e4r det mer sannolikt att en dedikerad mobilwebbplats anv\u00e4nder en l\u00e4ttare, avskalad version av CSS f\u00f6r station\u00e4ra datorer (\u00e4ven om detta kanske \u00e4r mindre sant nu, eftersom anv\u00e4ndarna v\u00e4xer att f\u00f6rv\u00e4nta sig en rikare upplevelse p\u00e5 allt mer sofistikerade mobilsk\u00e4rmar).<\/code>\n<\/p>\n<p>\n  <code>S\u00e5 allt annat lika ser det ut som om det ligger n\u00e5got i argumentet att en responsiv sannolikt \u00e4r l\u00e5ngsammare \u00e4n en mobilsajt p\u00e5 grund av den extra CSS som kr\u00e4vs. Men s\u00e5 l\u00e4nge designers \u00e4r medvetna om de potentiella fallgroparna, b\u00f6r de kunna skapa snabbladdade stilmallar f\u00f6r en responsiv webbplats. I synnerhet \u00e4r det en bra id\u00e9 att:<\/code>\n<\/p>\n<ul>\n<li>\n    <code>undvik att anv\u00e4nda data-URI f\u00f6r bilder \u2013 bin\u00e4ra bakgrundsbilder laddas (normalt) endast om\/n\u00e4r de beh\u00f6vs, men alla data-URI:er kommer att laddas oavsett.<\/code>\n  <\/li>\n<li>\n    <code>h\u00e5ll det l\u00e4tt \u2013 eftersom all CSS m\u00e5ste laddas ner \u00e4r det viktigt att vara effektiv. Detta inneb\u00e4r att undvika dubbelarbete och att se till att globala regler st\u00e4lls utanf\u00f6r den mediefr\u00e5gedrivna CSS.<\/code>\n  <\/li>\n<\/ul>\n<h5>\n  <code>RESS (Responsive Web Design + Server Side Components)<\/code><br \/>\n<\/h5>\n<p>\n  <code>RESS \u00e4r en hybrid mellan responsiv och adaptiv design, vilket inneb\u00e4r att anv\u00e4ndaragent sniffar p\u00e5 servern f\u00f6r att titta p\u00e5 egenskaperna hos klientenheten och leverera inneh\u00e5ll som passar den.<\/code>\n<\/p>\n<p>\n  <code>Om en av inv\u00e4ndningarna mot responsiv design \u00e4r att det inneb\u00e4r att leverera allt inneh\u00e5ll till alla enheter, varf\u00f6r inte mildra detta genom att sk\u00e4ra bort en del av inneh\u00e5llet d\u00e4r du kan?<\/code>\n<\/p>\n<p>\n  <code>Detta kan vara mycket vettigt. Om det finns en bild som du vet att du aldrig kommer att vilja visa p\u00e5 enheter vars sk\u00e4rm \u00e4r under en viss storlek, kan du lika g\u00e4rna inte skicka den till dessa enheter, vilket sparar bandbredd och minskar laddningstiden.<\/code>\n<\/p>\n<p>\n  <code>Vad mer \u00e4r, om du anv\u00e4nder mediefr\u00e5gor som du vet om\u00f6jligt kunde tillfredsst\u00e4lla p\u00e5 vissa enheter, finns det \u00e5tminstone ett argument f\u00f6r att separera din CSS i olika filer och ladda dem villkorligt.<\/code>\n<\/p>\n<p>\n  <code>Det \u00e4r v\u00e4rt att komma ih\u00e5g att hela denna process inte \u00e4r \"gratis\" i prestandatermer. En del arbete m\u00e5ste sj\u00e4lvklart utf\u00f6ras p\u00e5 servern, vilket tar tid \u2013 f\u00f6rmodligen inte tillr\u00e4ckligt f\u00f6r att uppv\u00e4ga f\u00f6rdelarna, men det \u00e4r n\u00e5got att vara medveten om.<\/code>\n<\/p>\n<h5>\n  <code>Domen<\/code><br \/>\n<\/h5>\n<p>\n  <code>\u00c4r responsiva webbplatser l\u00e5ngsamma?<\/code>\n<\/p>\n<p>\n  <code>Det beror p\u00e5 vad du menar med l\u00e5ngsam.<\/code>\n<\/p>\n<p>\n  <code>\u00c4r den snabbaste responsiva webbplatsen du kan skapa sannolikt l\u00e5ngsammare \u00e4n den snabbaste dedikerade mobilsajten du kan skapa?<\/code>\n<\/p>\n<p>\n  <code>F\u00f6rmodligen.<\/code>\n<\/p>\n<p>\n  <code>Vi har ocks\u00e5 sett att det finns n\u00e5gra fallgropar. Om du inte \u00e4r f\u00f6rsiktig \u00e4r det l\u00e4tt att det slutar med att anv\u00e4ndare tvingas ladda ner en massa redundanta bilder och CSS, vilket g\u00f6r din responsiva sida mycket l\u00e5ngsammare \u00e4n den beh\u00f6ver vara.<\/code>\n<\/p>\n<p>\n  <code>Det beh\u00f6ver dock inte vara s\u00e5. Det \u00e4r fullt m\u00f6jligt att skapa en responsiv webbplats som \u00e4r precis s\u00e5 snabb som den beh\u00f6ver vara och som ger en utm\u00e4rkt anv\u00e4ndarupplevelse. Och n\u00e4r b\u00e5de standarder och webbl\u00e4sare b\u00f6rjar komma ikapp vad utvecklarna vill leverera borde det b\u00f6rja bli enklare.<\/code>\n<\/p>\n<p>\n  <code>&lt;\/p&gt;\n&lt;p&gt;<\/code>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  <code>Inspelningsk\u00e4lla: &lt;a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2015\/09\/07\/making-responsive-websites-perform\/\"&gt;instantshift.com&lt;\/a&gt;<\/code>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Det fanns en tid n\u00e4r du med s\u00e4kerhet kunde skilja mellan en datorwebbsida och en mobilwebbsida. Faktiskt s\u00e5 mycket att en hel industri v\u00e4xte upp kring att \u00e5teranv\u00e4nda station\u00e4ra webbplatser f\u00f6r mobila enheter. Ett tag var du ingen om du inte hade en separat mobilsajt p\u00e5 en separat dom\u00e4n. Sedan b\u00f6rjade saker f\u00f6r\u00e4ndras. Mobilsk\u00e4rmar f\u00f6rb\u00e4ttrade till oigenk\u00e4nnlighet. Det gjorde \u00e4ven mobila webbl\u00e4sare. Tabletter kastade ett annat element in i ekvationen. 4G kom med. Retina-sk\u00e4rmar erbj\u00f6d nya niv\u00e5er av tydlighet f\u00f6r slutanv\u00e4ndare. Pl\u00f6tsligt s\u00e5g gr\u00e4nsen mellan station\u00e4r dator och mobil suddig ut. \u2026<\/p>\n","protected":false},"author":1,"featured_media":222114,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[61,204],"tags":[],"class_list":["post-264965","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-och-wordpress","category-webbdesign"],"_links":{"self":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/264965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/comments?post=264965"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/posts\/264965\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media\/222114"}],"wp:attachment":[{"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/media?parent=264965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/categories?post=264965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/sv\/wp-json\/wp\/v2\/tags?post=264965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}