{"id":260733,"date":"2023-01-11T08:42:00","date_gmt":"2023-01-11T05:42:00","guid":{"rendered":"https:\/\/inform.click\/tendencias-de-design-da-web-para-dispositivos-moveis-por-que-o-design-da-web-para-dispositivos-moveis-e-o-caminho-do-futuro\/"},"modified":"2023-01-11T08:42:00","modified_gmt":"2023-01-11T05:42:00","slug":"tendencias-de-design-da-web-para-dispositivos-moveis-por-que-o-design-da-web-para-dispositivos-moveis-e-o-caminho-do-futuro","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/tendencias-de-design-da-web-para-dispositivos-moveis-por-que-o-design-da-web-para-dispositivos-moveis-e-o-caminho-do-futuro\/","title":{"rendered":"Tend\u00eancias de design da Web para dispositivos m\u00f3veis: por que o design da Web para dispositivos m\u00f3veis \u00e9 o caminho do futuro?"},"content":{"rendered":"<p>\n  O design de sites para dispositivos m\u00f3veis \u00e9 algo com o qual voc\u00ea j\u00e1 deve estar familiarizado. A tend\u00eancia de web design, tamb\u00e9m conhecida como design de site responsivo, n\u00e3o \u00e9 um conceito novo.\n<\/p>\n<p>\n  A origem do web design m\u00f3vel remonta a 1996, quando o pioneiro do design de sites, Glenn Davis, desenvolveu e popularizou a t\u00e9cnica de layout l\u00edquido que era flex\u00edvel e adapt\u00e1vel a diferentes tamanhos de tela.\n<\/p>\n<p>\n  Os designers de sites avan\u00e7aram ainda mais a t\u00e9cnica ao longo dos anos.\n<\/p>\n<p>\n  Em 2004, o desenvolvedor web Cameron Adams prop\u00f4s uma t\u00e9cnica chamada layout dependente de resolu\u00e7\u00e3o usando JavaScript. Envolvia a detec\u00e7\u00e3o do tamanho da tela dos usu\u00e1rios para exibir o layout apropriado do site.\n<\/p>\n<p>\n  Outra web designer, Zoe Gillenwater, publicou um livro Flexible Web Design em 2010, no qual ela prop\u00f4s um layout el\u00e1stico para uma apar\u00eancia consistente em layouts de p\u00e1ginas da web em v\u00e1rios tamanhos de tela. Durante o mesmo ano, o desenvolvedor web Ethan Marcotte prop\u00f4s uma nova abordagem para o design flex\u00edvel do site que ele denominou de design responsivo do site.\n<\/p>\n<h5>\n  Web design m\u00f3vel: o presente e o futuro<br \/>\n<\/h5>\n<p>\n  O design do site para dispositivos m\u00f3veis usa uma abordagem de design da web responsivo. Envolve escrever c\u00f3digos que oferecem uma experi\u00eancia de visualiza\u00e7\u00e3o ideal para usu\u00e1rios que visitam sites usando seus dispositivos m\u00f3veis.\n<\/p>\n<p>\n  Com a introdu\u00e7\u00e3o de smartphones m\u00f3veis no final dos anos 2000 pela Apple, Samsung, Nokia e Blackberry, os desenvolvedores de sites come\u00e7aram a criar sites para telas menores. Eles usaram layout l\u00edquido, layout dependente de resolu\u00e7\u00e3o, design el\u00e1stico, grades fluidas, imagens flex\u00edveis e outras t\u00e9cnicas conhecidas. Ele inaugurou uma era de design da web m\u00f3vel que se tornou popular hoje entre os desenvolvedores da web e continuar\u00e1 a faz\u00ea-lo nos pr\u00f3ximos anos.\n<\/p>\n<p>\n  O Google percebeu a crescente import\u00e2ncia do design de sites para celular. Em 2015, o gigante dos mecanismos de pesquisa introduziu uma atualiza\u00e7\u00e3o de algoritmo chamada <a href=\"https:\/\/inform.click\/pt-pt\/o-mobilegeddon-causara-uma-revolucao-no-design-de-sites-para-dispositivos-moveis\/\" title=\"Mobilegeddon,\">Mobilegeddon,<\/a> que classificou os sites compat\u00edveis com dispositivos m\u00f3veis em resultados de pesquisa para dispositivos m\u00f3veis.\n<\/p>\n<p>\n  De acordo com <a href=\"https:\/\/developers.google.com\/search\/blog\/2015\/04\/rolling-out-mobile-friendly-update\" target=\"_blank\" rel=\"noopener\">o Google<\/a>, as caracter\u00edsticas de uma p\u00e1gina da Web compat\u00edvel com dispositivos m\u00f3veis incluem:\n<\/p>\n<ul>\n<li>Texto leg\u00edvel que n\u00e3o requer zoom ou toque\n  <\/li>\n<li>Alvos de toque adequadamente espa\u00e7ados\n  <\/li>\n<li>Evite a exibi\u00e7\u00e3o de &#8216;conte\u00fado n\u00e3o reproduz\u00edvel', como rolagem horizontal\n  <\/li>\n<\/ul>\n<p>\n  Os desenvolvedores de sites devem criar um site que ofere\u00e7a uma experi\u00eancia de usu\u00e1rio (UX) perfeita em v\u00e1rios dispositivos e telas. E o uso de estilo CSS, grades fluidas e layout dependente de resolu\u00e7\u00e3o ajudam a atingir esse objetivo criando sites que exibem bem em diferentes dispositivos.\n<\/p>\n<h5>\n  Por que o design da Web para dispositivos m\u00f3veis \u00e9 importante?<br \/>\n<\/h5>\n<p>\n  A cria\u00e7\u00e3o de um site compat\u00edvel com dispositivos m\u00f3veis oferece v\u00e1rias vantagens, como tr\u00e1fego aprimorado, convers\u00f5es aumentadas e uma imagem profissional.\n<\/p>\n<p>\n  Como a maioria das pessoas hoje visita um site usando dispositivos m\u00f3veis, o design do site deve atender aos requisitos dos dispositivos atuais e tamb\u00e9m dos dispositivos do futuro.\n<\/p>\n<p>\n  Em 2021, os dispositivos m\u00f3veis representaram 92,6% das visualiza\u00e7\u00f5es de p\u00e1ginas da web globalmente. Isso significa que a maioria das pessoas provavelmente visualizar\u00e1 apenas a vers\u00e3o m\u00f3vel do site. \u00c9 prov\u00e1vel que a tend\u00eancia continue no futuro, tornando importante para os desenvolvedores da Web dominar a t\u00e9cnica.\n<\/p>\n<p>\n  Tend\u00eancias de design da Web para dispositivos m\u00f3veis a serem consideradas\n<\/p>\n<p>\n  Os dispositivos m\u00f3veis continuam evoluindo, exigindo que os web designers se adaptem e se ajustem. \u00c9 importante acompanhar as tend\u00eancias de design da web m\u00f3vel para garantir uma experi\u00eancia perfeita para os usu\u00e1rios.\n<\/p>\n<p>\n  Aqui, examinamos as principais tend\u00eancias de design da Web para dispositivos m\u00f3veis a serem consideradas nos pr\u00f3ximos anos.\n<\/p>\n<h5>\n  1 Design m\u00f3vel para telas dobr\u00e1veis<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d52a12cb4.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d52a12cb4.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Os celulares dobr\u00e1veis \u200b\u200best\u00e3o se tornando cada vez mais populares. As estat\u00edsticas mais recentes mostram que cerca de 819.000 telefones dobr\u00e1veis \u200b\u200bforam vendidos no segundo trimestre de 2021. Espera-se que as vendas de telefones dobr\u00e1veis \u200b\u200baumentem 112% em 2022, atingindo 15,9 milh\u00f5es.\n<\/p>\n<p>\n  Embora o Royal FlexiPai tenha sido o primeiro telefone dobr\u00e1vel, foi o Samsung Galaxy Fold que capturou o interesse dos consumidores globais.\n<\/p>\n<p>\n  Os telefones dobr\u00e1veis \u200b\u200bt\u00eam uma tela dobr\u00e1vel. Os recursos permitem que um telefone sirva tanto como smartphone quanto como mesa. Esse design espec\u00edfico apresentou oportunidades para formas inovadoras de exibir um site. Mas tamb\u00e9m criou novos desafios para os desenvolvedores da web.\n<\/p>\n<p>\n  Projetar um site para telefones que dobram horizontalmente \u00e9 particularmente um problema. Dobrar o telefone aumenta o espa\u00e7o da tela do telefone. Os web designers precisam escrever c\u00f3digos de forma que dobrar e desdobrar o telefone n\u00e3o atrapalhe a exibi\u00e7\u00e3o do site.\n<\/p>\n<p>\n  A tipografia \u00e9 outro desafio para web designers quando se trata de telefones dobr\u00e1veis. Dependendo do tamanho da tela, os cabe\u00e7alhos, texto e colunas ser\u00e3o exibidos de forma diferente. Isso requer ir al\u00e9m das t\u00e9cnicas de design de site responsivo para incorporar novos m\u00e9todos para exibir o site corretamente.\n<\/p>\n<p>\n  Os desenvolvedores de sites precisam escrever c\u00f3digos que permitam a mudan\u00e7a cont\u00ednua de exibi\u00e7\u00e3o \u00e0 medida que os usu\u00e1rios dobram e desdobram a tela.\n<\/p>\n<p>\n  Os desenvolvedores de p\u00e1ginas da Web devem considerar uma <a href=\"https:\/\/inform.click\/pt-pt\/7-caracteristicas-do-design-de-site-minimalista\/\" title=\"abordagem minimalista\">abordagem minimalista<\/a> ao projetar sites que sejam exibidos melhor em telas dobr\u00e1veis. Eles devem adaptar JavaScript e CSS para enfrentar os desafios apresentados pelo design dobr\u00e1vel.\n<\/p>\n<h5>\n  2 Web Design para Flip Phones<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d52e2d6ac.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d52e2d6ac.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Telefones flip como o Galaxy Z Flip dobram verticalmente ao contr\u00e1rio dos telefones dobr\u00e1veis \u200b\u200bque dobram horizontalmente. Projetar um site responsivo para telefones flip \u00e9 mais f\u00e1cil.\n<\/p>\n<p>\n  Voc\u00ea precisa determinar a \u00e1rea de dobra onde a tela se divide em duas regi\u00f5es. A linha de dobra m\u00e9dia das telas flip tem cerca de 1000 pixels de largura. \u00c9 importante garantir que o conte\u00fado acima da dobra e abaixo da dobra esteja equilibrado.\n<\/p>\n<p>\n  N\u00e3o tente colocar muita informa\u00e7\u00e3o acima da linha de dobra. Os leitores devem ser capazes de ler facilmente as informa\u00e7\u00f5es na linha dividida de um telefone flip.\n<\/p>\n<h5>\n  3 Realidade Aumentada<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d532c4fb2.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-325233-6383d532c4fb2.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  A realidade aumentada \u00e9 no momento apenas um conceito para telefones celulares. Mas tem potencial para decolar nos pr\u00f3ximos anos.\n<\/p>\n<p>\n  A Apple implementou o sensor LiDAR (Light Detection and Ranging) em seus modelos mais recentes &#8211; iPhone 12 Pro, iPad Pro e iPad Pro Max. O recurso permite que os usu\u00e1rios me\u00e7am objetos apontando um sensor para eles, que dispara um feixe de luz para mapear a \u00e1rea e os objetos dentro dela. \u00c9 uma das implementa\u00e7\u00f5es brutas de AR em telefones celulares.\n<\/p>\n<p>\n  Os designers de sites podem usar recursos AR de um telefone celular para exibir informa\u00e7\u00f5es aumentadas. Por exemplo, um site pode usar um sensor LiDAR para medir a \u00e1rea de um objeto e convert\u00ea-lo automaticamente nas m\u00e9tricas desejadas. Os aplicativos do site tamb\u00e9m podem usar recursos AR para criar um UX mais envolvente e envolvente.\n<\/p>\n<h3>\n  Como se adaptar \u00e0 evolu\u00e7\u00e3o das tend\u00eancias m\u00f3veis em web design<br \/>\n<\/h3>\n<p>\n  Embora os telefones celulares estejam evoluindo, os fundamentos da cria\u00e7\u00e3o de um EUA positivo permanecem os mesmos. Os usu\u00e1rios esperam uma experi\u00eancia perfeita em v\u00e1rios dispositivos. Os web designers precisam projetar o site com base nos recursos e dimens\u00f5es da tela do celular.\n<\/p>\n<h5>\n  1 Engajamento do usu\u00e1rio<br \/>\n<\/h5>\n<p>\n  O envolvimento do usu\u00e1rio \u00e9 importante ao projetar um site. \u00c9 importante focar em um design que influencie os usu\u00e1rios a realizar a a\u00e7\u00e3o necess\u00e1ria.\n<\/p>\n<p>\n  Concentre-se em criar uma p\u00e1gina de destino que forne\u00e7a todas as informa\u00e7\u00f5es relevantes de maneira organizada. Al\u00e9m disso, o design do site deve incorporar recursos visuais e elementos que atraiam a aten\u00e7\u00e3o dos usu\u00e1rios.\n<\/p>\n<h5>\n  2 Disposi\u00e7\u00e3o flex\u00edvel<br \/>\n<\/h5>\n<p>\n  O layout flex\u00edvel \u00e9 a chave para um web design m\u00f3vel responsivo. O layout deve se ajustar automaticamente com base no tamanho da tela. Ele deve ser capaz de exibir o conte\u00fado perfeitamente em smartphones tradicionais e nos mais recentes telefones dobr\u00e1veis \u200b\u200be m\u00f3veis.\n<\/p>\n<p>\n  Voc\u00ea precisa garantir que o site seja exibido corretamente em tablets e smartphones.\n<\/p>\n<p>\n  O foco deve ser maximizar a experi\u00eancia de navega\u00e7\u00e3o no site m\u00f3vel em um espa\u00e7o limitado. Os usu\u00e1rios devem ser capazes de ler facilmente o conte\u00fado sem realizar nenhuma a\u00e7\u00e3o. As imagens devem ser dimensionadas com base em um valor percentual da largura da tela do navegador m\u00f3vel.\n<\/p>\n<p>\n  O design do site m\u00f3vel precisa ser adapt\u00e1vel. \u00c9 recomend\u00e1vel criar v\u00e1rias vers\u00f5es de um site para diferentes larguras de navegador. Voc\u00ea pode criar um layout de 500 pixels, 500-800 pixels e mais de 800 pixels. A cria\u00e7\u00e3o de v\u00e1rios layouts geralmente \u00e9 mais f\u00e1cil de projetar e testar em compara\u00e7\u00e3o com o m\u00e9todo de dimensionamento fluido.\n<\/p>\n<h5>\n  3 Navega\u00e7\u00e3o por gestos<br \/>\n<\/h5>\n<p>\n  A maioria das pessoas prefere interagir com um site usando os dedos. O design de um site para celular deve permitir que os usu\u00e1rios belisquem para aumentar e diminuir o zoom da p\u00e1gina. Em vez de navegar pelas imagens em uma galeria usando pequenos bot\u00f5es, voc\u00ea deve permitir que os usu\u00e1rios rolem deslizando para a esquerda e para a direita.\n<\/p>\n<p>\n  Uma considera\u00e7\u00e3o importante ao projetar um site para telas pequenas \u00e9 a largura dos dedos dos usu\u00e1rios. A Apple recomenda que o <a href=\"https:\/\/www.smashingmagazine.com\/2012\/02\/finger-friendly-design-ideal-mobile-touchscreen-target-sizes\/\" target=\"_blank\" rel=\"noopener\">elemento touch UI<\/a> tenha mais de 44 pixels. Em contraste, o Google sugere 34 pixels para o elemento de interface do usu\u00e1rio que pode ser tocado. Mas certifique-se de que o alvo de toque para seu design da web m\u00f3vel n\u00e3o seja inferior a 24 pixels.\n<\/p>\n<h5>\n  4 Teste o Design<br \/>\n<\/h5>\n<p>\n  Os web designers devem testar o design do site em v\u00e1rios tamanhos de tela e navegadores. Voc\u00ea deve testar o site em todos os navegadores dispon\u00edveis. Exibir uma mensagem incitando os usu\u00e1rios a usar um navegador espec\u00edfico \u00e9 uma atitude pregui\u00e7osa em rela\u00e7\u00e3o ao design da web m\u00f3vel. Isso afastar\u00e1 muitos usu\u00e1rios que preferem n\u00e3o navegar no site em vez de instalar um navegador diferente apenas para visualizar seu site.\n<\/p>\n<p>\n  Voc\u00ea tamb\u00e9m deve considerar testar o design do site em v\u00e1rios tamanhos de tela. Essa \u00e9 a melhor abordagem que garantir\u00e1 que seu site seja exibido da melhor forma, independentemente do telefone usado para navegar em seu site.\n<\/p>\n<p>\n  Se voc\u00ea n\u00e3o pode comprar diferentes dispositivos m\u00f3veis, outra abordagem menos precisa \u00e9 usar a ferramenta de redimensionamento do Google. Este aplicativo permite que voc\u00ea visualize seu site em diferentes dispositivos m\u00f3veis.\n<\/p>\n<h5>\n  5 Implementar CSS Media Query<br \/>\n<\/h5>\n<p>\n  CSS Media Query \u00e9 um tipo de c\u00f3digo de design de site que permite escalar automaticamente com base na tela. O c\u00f3digo permite que voc\u00ea aplique CSS somente quando uma condi\u00e7\u00e3o espec\u00edfica for atendida. Por exemplo, voc\u00ea pode usar consultas de m\u00eddia para criar uma regra para implementar um estilo espec\u00edfico quando o tamanho da tela for de 320 px ou menos. O layout do site ser\u00e1 ajustado automaticamente quando a condi\u00e7\u00e3o especificada for atendida.\n<\/p>\n<p>\n  O uso do CSS Media Query permite aplicar um estilo quando o dispositivo e o ambiente do navegador correspondem \u00e0s condi\u00e7\u00f5es. Eles permitem que voc\u00ea crie diferentes layouts para diferentes tamanhos de tela de dispositivos e navegadores. Uma consulta de m\u00eddia simples aparece da seguinte maneira.\n<\/p>\n<pre><code>@media media-type and (media-feature-rule) {\n  \/*specific CSS conditions*\/\n}<\/code><\/pre>\n<p>\n  No c\u00f3digo acima, o tipo de m\u00eddia especifica o tipo de c\u00f3digo de m\u00eddia para o navegador. A regra de recurso de m\u00eddia especifica que o c\u00f3digo cont\u00e9m condi\u00e7\u00f5es que devem ser atendidas para executar o c\u00f3digo. Voc\u00ea pode especificar as condi\u00e7\u00f5es CSS para exibir layouts espec\u00edficos com base na tela do celular e no navegador usado para acessar o site.\n<\/p>\n<h4>\n  Conclus\u00e3o<br \/>\n<\/h4>\n<p>\n  \u00c0 medida que a interface e os layouts do dispositivo m\u00f3vel evoluem, os web designers tamb\u00e9m precisam desenvolver novas maneiras de exibir o site. O surgimento de novos designs de telefone requer um novo foco na interface do usu\u00e1rio para criar um UX perfeito.\n<\/p>\n<p>\n  UX \u00e9 a coisa mais importante quando se trata de web design m\u00f3vel. Os web designers devem criar um design de site responsivo, considerando os requisitos dos usu\u00e1rios que navegam em sites usando diferentes dispositivos m\u00f3veis.\n<\/p>\n<p>\n  Os desenvolvedores da Web precisam acompanhar as tend\u00eancias do design da Web para dispositivos m\u00f3veis. Eles precisam buscar um UX m\u00f3vel positivo, pois isso melhorar\u00e1 a classifica\u00e7\u00e3o de SEO, trar\u00e1 mais tr\u00e1fego e aumentar\u00e1 as taxas de convers\u00e3o.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fonte de grava\u00e7\u00e3o: instantshift.com\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>O design de sites para dispositivos m\u00f3veis \u00e9 algo com o qual voc\u00ea j\u00e1 deve estar familiarizado. A tend\u00eancia de web design, tamb\u00e9m conhecida como design de site responsivo, n\u00e3o \u00e9 um conceito novo. A origem do web design m\u00f3vel remonta a 1996, quando o pioneiro do design de sites, Glenn Davis, desenvolveu e popularizou a t\u00e9cnica de layout l\u00edquido que era flex\u00edvel e adapt\u00e1vel a diferentes tamanhos de tela. Os designers de sites avan\u00e7aram ainda mais a t\u00e9cnica ao longo dos anos. Em 2004, o desenvolvedor web Cameron Adams prop\u00f4s uma t\u00e9cnica chamada layout dependente de resolu\u00e7\u00e3o usando JavaScript. Envolvia detectar o tamanho da tela dos usu\u00e1rios para exibir o site apropriado\u2026<\/p>\n","protected":false},"author":1,"featured_media":180172,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[202,696,605,527,59],"tags":[],"class_list":["post-260733","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer-de-web","category-movel","category-tecnologia-e-muito-mais","category-raznoe-pt-pt","category-web-e-wordpress-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=260733"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260733\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/180172"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=260733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=260733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=260733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}