{"id":232130,"date":"2023-01-20T13:16:00","date_gmt":"2023-01-20T10:16:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232130"},"modified":"2023-02-01T11:35:46","modified_gmt":"2023-02-01T08:35:46","slug":"enkla-steg-goer-webbplatsen-mobilvaenlig-responsiv-design","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/enkla-steg-goer-webbplatsen-mobilvaenlig-responsiv-design\/","title":{"rendered":"Enkla steg g\u00f6r webbplatsen mobilv\u00e4nlig (responsiv design)?"},"content":{"rendered":"<p>Jag har \u00e4ntligen gjort min sida: <a href=\"https:\/\/steakovercooked.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">steakovercooked.com<\/a> mobilanv\u00e4ndarv\u00e4nlig och d\u00e4rmed \u00e4r alla webbsidor p\u00e5 alla <a href=\"https:\/\/helloacm.com\/milestones\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mina 6 dom\u00e4ner<\/a> hittills kvalificerade f\u00f6r anv\u00e4ndarv\u00e4nliga.<\/p>\n<p>Det mobilanv\u00e4ndarv\u00e4nliga \u00e4r nu en faktor i rankningen, t.ex. tenderar Googles s\u00f6kmotorer att marknadsf\u00f6ra de webbplatser som klarar det <a href=\"https:\/\/www.google.co.uk\/webmasters\/tools\/mobile-friendly\/?url=https%3A%2F%2Fsteakovercooked.com%2F\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">mobilanv\u00e4ndarv\u00e4nliga testet<\/a>.<\/p>\n<p>mobilv\u00e4nlig<\/p>\n<p>H\u00e4r \u00e4r stegen f\u00f6r att g\u00f6ra mobilen anv\u00e4ndarv\u00e4nlig, \u00e4ven k\u00e4nd med <a href=\"https:\/\/wordpress.mediadoma.com\/sv\/laer-dig-responsiv-css-design-1\/\" title=\"Responsive CSS Design\">Responsive CSS Design<\/a>.<\/p>\n<h3>Rensa upp inline CSS i HTML-taggarna<\/h3>\n<p>Inline CSS i HTML-taggarna \u00e4r d\u00e5liga, eftersom de blandar presentationen och HTML, till exempel,<\/p>\n<p>Stilen definieras direkt i HTML div-taggen, vilket inte g\u00e5r att \u00e4ndra med externa formatmallar.<\/p>\n<h3>Anv\u00e4nd inte pixlar med specificerad\/fast bredd<\/h3>\n<p>Om du definierar n\u00e5got som t.ex. width:900px \u00e4r det troligt att det inte \u00e4r mobilv\u00e4nligt. Du kan ers\u00e4tta detta med en procentsats t.ex. 30%. Mindre pixlar \u00e4r mindre sannolikt att vara ett problem, t.ex. ikoner \u00e4r bra i sm\u00e5 sk\u00e4rmuppl\u00f6sningar. F\u00f6rest\u00e4ll dig bara, den minsta sk\u00e4rmbredden \u00e4r 300 pixlar (ungef\u00e4r), s\u00e5 du vill inte att n\u00e5got av dina HTML-element ska vara bredare \u00e4n s\u00e5.<\/p>\n<h3>S\u00e4tt f\u00f6ljande inuti head-taggen<\/h3>\n<pre><code>&lt;meta name=viewport content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\"&gt;\n&lt;meta name=applicable-device content=\"pc,mobile\"&gt;<\/code><\/pre>\n<h3>Bilder\/tabeller \u00e4r v\u00e4rst<\/h3>\n<p>Tabeller \u00e4r s\u00e4mst f\u00f6r responsiv design, s\u00e5 du kan beh\u00f6va ers\u00e4tta dem med enkla div-element. Bilder b\u00f6r specificeras med f\u00f6ljande maxbreddstil, t.ex<\/p>\n<p>Det \u00e4r det, inga komplicerade saker! Observera att en mobilanv\u00e4ndarv\u00e4nlig sida inte \u00e4r detsamma som <a href=\"https:\/\/wordpress.mediadoma.com\/sv\/hur-aktiverar-jag-amp-med-wordpress-amp-optimeringstekniker-med-wordpress\/\" title=\"AMP (Accelerated Mobile Pages)\">AMP (Accelerated Mobile Pages)<\/a>.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/helloacm.com\" class=\"external external_icon\">helloacm.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Enkla steg g\u00f6r webbplatsen mobilv\u00e4nlig (responsiv design)?<\/p>\n","protected":false},"author":1,"featured_media":224482,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[910,848,901,724,868],"tags":[1173],"class_list":["post-232130","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-9","category-handledningar","category-koda","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/232130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=232130"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/232130\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/224482"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=232130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=232130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=232130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}