{"id":232515,"date":"2023-01-20T13:20:00","date_gmt":"2023-01-20T10:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232515"},"modified":"2023-02-01T11:37:11","modified_gmt":"2023-02-01T08:37:11","slug":"yksinkertaiset-vaiheet-tekevaet-verkkosivustosta-mobiiliystaevaellisen-responsiivinen-muotoilu","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/yksinkertaiset-vaiheet-tekevaet-verkkosivustosta-mobiiliystaevaellisen-responsiivinen-muotoilu\/","title":{"rendered":"Yksinkertaiset vaiheet tekev\u00e4t verkkosivustosta mobiiliyst\u00e4v\u00e4llisen (responsiivinen muotoilu)?"},"content":{"rendered":"<p>Olen vihdoin tehnyt sivustostani: <a href=\"https:\/\/steakovercooked.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">steakovercooked.com<\/a> mobiilik\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisen ja n\u00e4in ollen kaikki web-sivut kaikilla <a href=\"https:\/\/helloacm.com\/milestones\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">6 verkkotunnuksellani<\/a> t\u00e4h\u00e4n menness\u00e4 ovat p\u00e4tevi\u00e4 k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisiksi.<\/p>\n<p>Mobiilik\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisyys on nyt yksi tekij\u00e4 sijoituksissa, esim. Googlen hakukoneet yleens\u00e4 mainostavat sivustoja, jotka l\u00e4p\u00e4isev\u00e4t <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\">mobiilik\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisyystestin<\/a>.<\/p>\n<p>mobiiliyst\u00e4v\u00e4llinen<\/p>\n<p>T\u00e4ss\u00e4 on vaiheet, joiden avulla voit tehd\u00e4 mobiilik\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisyydest\u00e4, joka tunnetaan my\u00f6s <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/responsiivisen-css-suunnittelun-oppiminen-1\/\" title=\"Responsive CSS Designin\">Responsive CSS Designin<\/a> avulla .<\/p>\n<h3>Puhdista upotettu CSS HTML-tageissa<\/h3>\n<p>Sis\u00e4\u00e4nrakennettu CSS HTML-tageissa on huono, koska ne sekoittavat esityksen ja HTML-koodin, esim.<\/p>\n<p>Tyyli m\u00e4\u00e4ritell\u00e4\u00e4n suoraan HTML-div-tunnisteessa, jota ei voi muuttaa ulkoisilla tyylisivuilla.<\/p>\n<h3>\u00c4l\u00e4 k\u00e4yt\u00e4 m\u00e4\u00e4ritettyj\u00e4\/kiinte\u00e4leveisi\u00e4 pikseleit\u00e4<\/h3>\n<p>Jos m\u00e4\u00e4rit\u00e4t esimerkiksi leveyden:900px, se ei todenn\u00e4k\u00f6isesti ole mobiiliyst\u00e4v\u00e4llinen. Voit korvata t\u00e4m\u00e4n prosentilla esim. 30 %. Pienemm\u00e4t pikselit eiv\u00e4t todenn\u00e4k\u00f6isesti ole ongelma, esim. kuvakkeet ovat hienoja pienill\u00e4 n\u00e4yt\u00f6n resoluutioilla. Kuvittele vain, pienin n\u00e4yt\u00f6n leveys on 300 pikseli\u00e4 (karkeasti), joten et halua mink\u00e4\u00e4n HTML-elementtisi olevan t\u00e4t\u00e4 leve\u00e4mpi.<\/p>\n<h3>Laita seuraavat tiedot head-tunnisteen sis\u00e4\u00e4n<\/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>Kuvat\/taulukot ovat pahimpia<\/h3>\n<p>Taulukot ovat huonoimpia reagoivaan suunnitteluun, joten saatat joutua korvaamaan ne yksinkertaisilla div-elementeill\u00e4. Kuvat tulee m\u00e4\u00e4ritt\u00e4\u00e4 seuraavalla max-width -tyylill\u00e4, esim<\/p>\n<p>Siin\u00e4 se, ei monimutkaisia \u200b\u200bjuttuja! Huomaa, ett\u00e4 mobiilik\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llinen sivu ei ole sama kuin <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/kuinka-ottaa-amp-kaeyttoeoen-wordpressillae-amp-optimointitekniikat-wordpressin-avulla\/\" title=\"AMP (Accelerated Mobile Pages)\">AMP (Accelerated Mobile Pages)<\/a>.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/helloacm.com\" class=\"external external_icon\">helloacm.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yksinkertaiset vaiheet tekev\u00e4t verkkosivustosta mobiiliyst\u00e4v\u00e4llisen (responsiivinen muotoilu)?<\/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":[906,719,895,843,864],"tags":[1166],"class_list":["post-232515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-5","category-kehittaejae","category-koodi","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/232515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=232515"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/232515\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/224482"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=232515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=232515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=232515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}