{"id":232518,"date":"2023-01-20T12:58:00","date_gmt":"2023-01-20T09:58:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=232518"},"modified":"2023-02-01T10:48:58","modified_gmt":"2023-02-01T07:48:58","slug":"passos-simples-para-tornar-o-site-compativel-com-dispositivos-moveis-design-responsivo","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/passos-simples-para-tornar-o-site-compativel-com-dispositivos-moveis-design-responsivo\/","title":{"rendered":"Passos simples para tornar o site compat\u00edvel com dispositivos m\u00f3veis (design responsivo)?"},"content":{"rendered":"\n<p>Eu finalmente fiz meu site: <a href=\"https:\/\/steakovercooked.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">steakovercooked.com<\/a> mobile user friendly e, portanto, todas as p\u00e1ginas da web em todos os <a href=\"https:\/\/helloacm.com\/milestones\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">meus 6 dom\u00ednios<\/a> at\u00e9 agora s\u00e3o qualificadas para user-mobile user friendly.<\/p>\n<p>A facilidade de uso m\u00f3vel agora \u00e9 um fator de classifica\u00e7\u00e3o, por exemplo, os mecanismos de pesquisa do Google tendem a promover os sites que passam no <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\">teste de f\u00e1cil utiliza\u00e7\u00e3o m\u00f3vel<\/a>.<\/p>\n<p>compat\u00edvel com dispositivos m\u00f3veis<\/p>\n<p>Aqui est\u00e3o as etapas para tornar o usu\u00e1rio m\u00f3vel amig\u00e1vel, tamb\u00e9m conhecido com o <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/aprendendo-design-css-responsivo-1\/\" title=\"Responsive CSS Design\">Responsive CSS Design<\/a>.<\/p>\n<h3>Limpe o CSS embutido nas tags HTML<\/h3>\n<p>CSS inline nas tags HTML s\u00e3o ruins, pois misturam a apresenta\u00e7\u00e3o e HTML, por exemplo,<\/p>\n<p>O estilo \u00e9 definido diretamente na tag HTML div, que n\u00e3o \u00e9 poss\u00edvel alterar usando folhas de estilo externas.<\/p>\n<h3>N\u00e3o use pixels de largura especificada\/fixa<\/h3>\n<p>Se voc\u00ea definir algo como, por exemplo, largura:900px, \u00e9 prov\u00e1vel que n\u00e3o seja compat\u00edvel com dispositivos m\u00f3veis. Voc\u00ea pode substituir isso por uma porcentagem, por exemplo, 30%. Pixels menores s\u00e3o menos propensos a ser um problema, por exemplo, \u00edcones s\u00e3o bons em resolu\u00e7\u00f5es de tela pequena. Imagine, a menor largura da tela \u00e9 de 300 pixels (aproximadamente), ent\u00e3o voc\u00ea n\u00e3o quer que nenhum dos seus elementos HTML seja mais largo que isso.<\/p>\n<h3>Coloque o seguinte dentro da tag head<\/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>Imagens\/Tabelas s\u00e3o as piores<\/h3>\n<p>As tabelas s\u00e3o piores para o design responsivo, portanto, talvez seja necess\u00e1rio substitu\u00ed-las por elementos div simples. As imagens devem ser especificadas com o seguinte estilo de largura m\u00e1xima, por exemplo<\/p>\n<p>\u00c9 isso, nada de coisas complexas! Observe que uma p\u00e1gina amig\u00e1vel para dispositivos m\u00f3veis n\u00e3o \u00e9 o mesmo que <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/como-habilitar-amp-com-wordpress-tecnicas-de-otimizacao-de-amp-com-wordpress\/\" title=\"AMP (Accelerated Mobile Pages)\">AMP (Accelerated Mobile Pages)<\/a>.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/helloacm.com\" class=\"external external_icon\">helloacm.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Passos simples para tornar o site compat\u00edvel com dispositivos m\u00f3veis (design responsivo)?<\/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":[898,909,722,846,867],"tags":[1170],"class_list":["post-232518","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-css-8","category-desenvolvedor","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=232518"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/232518\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/224482"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=232518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=232518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=232518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}