{"id":76838,"date":"2017-09-12T13:38:37","date_gmt":"2017-09-12T13:38:37","guid":{"rendered":"https:\/\/codewebbarcelona.com\/diseno-web-responsive\/"},"modified":"2026-06-11T00:20:57","modified_gmt":"2026-06-11T00:20:57","slug":"design-web-responsive","status":"publish","type":"post","link":"https:\/\/codewebbarcelona.com\/pt-pt\/design-web-responsive\/","title":{"rendered":"Web design responsivo"},"content":{"rendered":"

A chegada dos smartphones representou uma verdadeira revolu\u00e7\u00e3o no universo do web design<\/strong>. De repente, todos quer\u00edamos ser pioneiros a criar sites com design web responsivo<\/strong>. Parecia magia: ao redimensionar o navegador, todo o site se adaptava automaticamente \u00e0 nova resolu\u00e7\u00e3o, alterando at\u00e9 a estrutura da p\u00e1gina.<\/p>\n

Quando mostr\u00e1vamos isto aos clientes, por estranho que pare\u00e7a hoje, ficavam normalmente surpreendidos. N\u00e3o foi assim h\u00e1 tanto tempo, mas agora \u00e9 algo completamente banalizado.<\/p>\n

No entanto, ainda h\u00e1 muito por fazer no \u00e2mbito do design web responsivo<\/strong> ou adaptativo. N\u00e3o basta recorrer a um framework CSS como o Bootstrap e esperar que fa\u00e7a todo o trabalho por n\u00f3s. Se queremos criar uma liga\u00e7\u00e3o com o utilizador final<\/strong>, temos de lhe proporcionar uma experi\u00eancia adequada ao seu dispositivo<\/strong> e, para isso, \u00e9 fundamental perceber como o utilizador interage com o equipamento. \u00c9 essencial compreender a l\u00f3gica com que o visitante espera navegar.<\/p>\n

Se estivermos perante um computador de secret\u00e1ria, o rato ser\u00e1 o principal elemento de navega\u00e7\u00e3o. Por outro lado, ao navegar num smartphone, temos de ter consci\u00eancia de que a navega\u00e7\u00e3o \u00e9 t\u00e1til e, por isso, devemos facilitar essa intera\u00e7\u00e3o no nosso design web<\/strong>.<\/p>\n

Pontos-chave para um bom design web responsivo<\/h2>\n

Menu de navega\u00e7\u00e3o<\/h3>\n

\u00c9 fundamental que o menu de navega\u00e7\u00e3o seja intuitivo<\/strong> para o utilizador. Podemos facilitar isso ao incluir um bot\u00e3o para expandir o menu<\/strong> do nosso design web<\/strong>, seja lateralmente ou em formato dropdown. Assim, poupamos espa\u00e7o e tornamos a navega\u00e7\u00e3o mais organizada.<\/p>\n

\"dise\u00f1o<\/a><\/p>\n

 <\/p>\n

Imagens adapt\u00e1veis e proporcionais<\/h3>\n

Devemos garantir que as imagens do nosso design s\u00e3o responsivas<\/strong>. T\u00eam de ser exibidas corretamente tanto num ecr\u00e3 de 27″ como num iPhone<\/strong>.<\/p>\n

Apesar de isto ser b\u00e1sico, h\u00e1 um aspeto muitas vezes esquecido: a coer\u00eancia nas propor\u00e7\u00f5es. As imagens devem ser compat\u00edveis com a orienta\u00e7\u00e3o do dispositivo<\/strong> ou do ecr\u00e3. Se, ao desenhar a vers\u00e3o desktop, usarmos uma imagem demasiado panor\u00e2mica, no smartphone ela ficar\u00e1 com apenas alguns mil\u00edmetros de altura e ocupar\u00e1 toda a largura do ecr\u00e3 \u2014 o que, na maioria dos casos, n\u00e3o faz sentido.<\/p>\n

Por isso, o ideal \u00e9 optar por um tamanho interm\u00e9dio<\/strong> ou substituir a imagem na vers\u00e3o mobile.<\/p>\n

Ordem e hierarquia<\/h3>\n

A ordem das sec\u00e7\u00f5es no nosso design web \u00e9 crucial. Ao adaptar o design para smartphone, o conte\u00fado passa geralmente para uma \u00fanica coluna, com as sec\u00e7\u00f5es dispostas verticalmente. Por isso, \u00e9 importante planear o ordem em que queremos que o utilizador veja as sec\u00e7\u00f5es<\/strong>, colocando as mais relevantes no topo<\/strong>.<\/p>\n

Menos \u00e9 mais<\/h3>\n

Seguindo a l\u00f3gica anterior, ao desenhar para ecr\u00e3s de smartphone, o melhor \u00e9 eliminar sec\u00e7\u00f5es que n\u00e3o sejam relevantes<\/strong> para quem acede a partir destes dispositivos. Por exemplo, rodap\u00e9s extensos podem ser removidos, deixando apenas uma linha com os contactos essenciais.<\/p>\n

Tira partido de todas as funcionalidades<\/h3>\n

Ao desenhar a experi\u00eancia mobile, \u00e9 fundamental explorar todas as funcionalidades extra dispon\u00edveis. Por exemplo, se na vers\u00e3o desktop existe um mapa de contacto, na vers\u00e3o mobile faz sentido incluir um bot\u00e3o para abrir o GPS<\/strong>. Tamb\u00e9m podemos criar bot\u00f5es de chamada direta<\/strong> para facilitar o contacto.<\/p>\n

Outros dados relevantes<\/h2>\n

Atualmente, os dados mostram que h\u00e1 mais utilizadores a aceder a sites atrav\u00e9s de dispositivos m\u00f3veis<\/strong> do que por desktop. Os n\u00fameros apontam para 51% de visitantes em mobile<\/strong>, 42% em desktop<\/strong> e os restantes 7% utilizam outros dispositivos.<\/p>\n

\"diseno<\/a><\/p>\n