{"id":39685,"date":"2020-09-21T03:37:25","date_gmt":"2020-09-21T10:37:25","guid":{"rendered":"https:\/\/kinsta.com\/?p=78861&preview=true&preview_id=78861"},"modified":"2025-02-17T10:57:20","modified_gmt":"2025-02-17T13:57:20","slug":"design-responsivo-web","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/design-responsivo-web\/","title":{"rendered":"O Guia para Iniciantes em Design Responsivo da Web (Amostras de C\u00f3digo e Exemplos de Layout)"},"content":{"rendered":"

Com uma internet cada vez mais acessada a partir de dispositivos m\u00f3veis, n\u00e3o \u00e9 mais suficiente ter um design de website est\u00e1tico<\/a> que s\u00f3 fica bem na tela de um computador.<\/p>\n

Sem mencionar, voc\u00ea tamb\u00e9m tem que considerar comprimidos, laptops 2 em 1, e diferentes modelos de smartphone com diferentes dimens\u00f5es de tela quando se trata de um projeto.<\/p>\n

Portanto, colocar seu conte\u00fado<\/a> em uma \u00fanica coluna e cham\u00e1-lo de “desistir” n\u00e3o vai cort\u00e1-lo.<\/p>\n

Com um web design<\/a> \u00e1gil, voc\u00ea pode garantir que seu website tenha o melhor visual em celulares, tablets, laptops e telas de desktop.<\/p>\n

E essa melhoria na experi\u00eancia do usu\u00e1rio significa maiores convers\u00f5es e crescimento dos neg\u00f3cios.<\/p>\n

Este guia lhe dar\u00e1 tudo o que voc\u00ea precisa saber sobre o design do site, incluindo defini\u00e7\u00f5es, um passo-a-passo, exemplos e muito mais.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Confira nosso guia em v\u00eddeo para Web Design Responsivo:<\/h3>\n

<\/kinsta-video><\/p>\n

O que \u00e9 Web Design Responsive?<\/h2>\n

O design responsivo \u00e9 uma abordagem ao web design que faz com que seu conte\u00fado web se adapte aos diferentes tamanhos de tela e janelas de uma variedade de dispositivos.<\/p>\n

Por exemplo, seu conte\u00fado pode estar separado em diferentes colunas nas telas da \u00e1rea de trabalho, porque elas s\u00e3o suficientemente amplas para acomodar esse design.<\/p>\n

Se voc\u00ea separar seu conte\u00fado em v\u00e1rias colunas em um dispositivo m\u00f3vel, ser\u00e1 dif\u00edcil para os usu\u00e1rios ler e interagir com ele.<\/p>\n

O design responsivo<\/a> torna poss\u00edvel entregar m\u00faltiplos layouts separados de seu conte\u00fado e design a diferentes dispositivos, dependendo do tamanho da tela.<\/p>\n\n

Web Design Responsivo vs Design Adaptativo<\/h2>\n

A diferen\u00e7a entre o projeto responsivo e o projeto adaptativo \u00e9 que o projeto responsivo adapta a renderiza\u00e7\u00e3o de uma \u00fanica vers\u00e3o de p\u00e1gina. Em contraste, o design adaptativo fornece v\u00e1rias vers\u00f5es completamente diferentes de uma mesma p\u00e1gina.<\/p>\n

\"Design
Design responsivo versus adapt\u00e1vel<\/figcaption><\/figure>\n

Ambos s\u00e3o tend\u00eancias cruciais de web design<\/a> que ajudam os webmasters a controlar a apar\u00eancia de seu site em telas diferentes, mas a abordagem \u00e9 diferente.<\/p>\n

Com design responsivo, os usu\u00e1rios acessar\u00e3o o mesmo arquivo b\u00e1sico atrav\u00e9s de seu navegador, independentemente do dispositivo, mas o c\u00f3digo CSS<\/a> controlar\u00e1 o layout e o renderizar\u00e1 de forma diferente com base no tamanho da tela. Com design adapt\u00e1vel, h\u00e1 um script que verifica o tamanho da tela, e depois acessa o modelo projetado para aquele dispositivo.<\/p>\n

Por que o Design Responsivo \u00e9 Importante<\/h2>\n

Se voc\u00ea \u00e9 novo em web design, desenvolvimento<\/a> ou blogs<\/a>, voc\u00ea pode se perguntar por que o design responsivo \u00e9 importante em primeiro lugar.<\/p>\n

A resposta \u00e9 simples. N\u00e3o \u00e9 mais suficiente projetar para um \u00fanico dispositivo. O tr\u00e1fego da web m\u00f3vel ultrapassou a \u00e1rea de trabalho e agora constitui a maior parte do tr\u00e1fego do site<\/a>, representando mais de 51%<\/a>.<\/p>\n

\"Mobile,
Mobile, tablet, desktop market share<\/figcaption><\/figure>\n

Quando mais da metade de seus visitantes potenciais est\u00e1 usando um dispositivo m\u00f3vel para navegar na Internet, voc\u00ea n\u00e3o pode simplesmente servir-lhes uma p\u00e1gina projetada para a \u00e1rea de trabalho. Seria dif\u00edcil de ler e usar, e levaria a uma m\u00e1 experi\u00eancia do usu\u00e1rio.<\/p>\n

Mas isso n\u00e3o \u00e9 tudo. Os usu\u00e1rios em dispositivos m\u00f3veis tamb\u00e9m constituem a maioria das visitas aos mecanismos de busca<\/a><\/p>\n

\"Mobile
Mobile search traffic<\/figcaption><\/figure>\n

Finalmente, nos \u00faltimos anos, o celular se tornou um dos canais publicit\u00e1rios mais importantes. Mesmo em um mercado p\u00f3s-pand\u00eamico, os gastos com publicidade m\u00f3vel est\u00e3o crescendo<\/a> 4,8% para US$ 91,52 bilh\u00f5es.<\/p>\n

Quer voc\u00ea opte por fazer propaganda nas m\u00eddias sociais<\/a> ou usar uma abordagem org\u00e2nica como o YouTube SEO<\/a>, a grande maioria do seu tr\u00e1fego vir\u00e1 de usu\u00e1rios m\u00f3veis.<\/p>\n

Se suas p\u00e1ginas de destino<\/a> n\u00e3o forem otimizadas para serem m\u00f3veis e f\u00e1ceis de usar, voc\u00ea n\u00e3o ser\u00e1 capaz de maximizar o ROI de seus esfor\u00e7os de marketing. M\u00e1s taxas de convers\u00e3o<\/a> levar\u00e3o a menos leads e desperd\u00edcio de an\u00fancios.<\/p>\n

Os sites WordPress respondem?<\/h2>\n

A resposta ou n\u00e3o dos sites WordPress depende do tema do seu site WP. Um tema WordPress<\/a> \u00e9 o equivalente a um modelo para um site est\u00e1tico e controla o design e o layout de seu conte\u00fado.<\/p>\n

Se voc\u00ea usar um tema padr\u00e3o do WordPress, como Twenty Twenty<\/a>, o design \u00e9 responsivo, mas como \u00e9 um design de uma \u00fanica coluna, voc\u00ea pode n\u00e3o perceb\u00ea-lo ao olhar para ele em telas diferentes.<\/p>\n

Se voc\u00ea usar outro tema WordPress, voc\u00ea pode testar se ele \u00e9 responsivo ou n\u00e3o, comparando como ele \u00e9 em diferentes dispositivos ou usando as ferramentas de desenvolvimento Chrome.<\/p>\n

Os blocos de constru\u00e7\u00e3o do Web Design Responsivo<\/h2>\n

Nesta se\u00e7\u00e3o, cobriremos os alicerces subjacentes ao design do site e seus diferentes blocos de constru\u00e7\u00e3o.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

CSS e HTML<\/h3>\n

A base do design responsivo \u00e9 a combina\u00e7\u00e3o de HTML e CSS<\/a>, dois idiomas que controlam o conte\u00fado e o layout de uma p\u00e1gina em qualquer navegador da web.<\/p>\n

\"HTML
HTML vs CSS (Fonte de imagem: codingdojo.com)<\/figcaption><\/figure>\n

O HTML controla principalmente a estrutura, os elementos e o conte\u00fado de uma p\u00e1gina web. Por exemplo, para adicionar uma imagem a um site<\/a>, voc\u00ea tem que usar c\u00f3digo HTML como este:<\/p>\n

<img src=\"image.gif\" alt=\"image\" class=\u201dfull-width-img\u201d><\/code><\/pre>\n
Voc\u00ea pode definir uma “classe” ou “id” que voc\u00ea pode mais tarde almejar com o c\u00f3digo CSS<\/a>.<\/p>\n
Voc\u00ea tamb\u00e9m poderia controlar atributos prim\u00e1rios tais como altura e largura dentro de seu HTML, mas isto n\u00e3o \u00e9 mais considerado a melhor pr\u00e1tica.<\/p>\n
Em vez disso, o CSS<\/a> \u00e9 usado para editar o design e o layout dos elementos que voc\u00ea inclui em uma p\u00e1gina com HTML. O c\u00f3digo CSS pode ser inclu\u00eddo em uma se\u00e7\u00e3o <style><\/code> de um documento HTML, ou como um arquivo de folha de estilo<\/a> separado.<\/p>\n
Por exemplo, poder\u00edamos editar a largura de todas as imagens HTML no n\u00edvel do elemento desta forma:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
Ou poder\u00edamos visar a classe espec\u00edfica “full-width-img”, acrescentando um per\u00edodo na frente.<\/p>\n
.full-width-img {\nwidth: 100%;\n}<\/code><\/pre>\n
Voc\u00ea tamb\u00e9m pode controlar o projeto al\u00e9m da altura, largura e cor<\/a>. Usando o CSS desta forma \u00e9 como voc\u00ea faz com que um projeto reaja quando voc\u00ea o combina com uma t\u00e9cnica chamada consulta de m\u00eddia.<\/p>\n
Consultas de m\u00eddia<\/h3>\n
Uma consulta de m\u00eddia<\/a> \u00e9 uma parte fundamental do CSS3 que lhe permite renderizar conte\u00fado para se adaptar a diferentes fatores como tamanho ou resolu\u00e7\u00e3o da tela.<\/p>\n
\"Consultas
Consultas de m\u00eddia para desktop, tablet, smartphone<\/figcaption><\/figure>\n
Funciona de forma semelhante a uma “cl\u00e1usula if” em algumas linguagens de programa\u00e7\u00e3o<\/a>, basicamente verificando se a<\/em> janela de vis\u00e3o de uma tela \u00e9 suficientemente ampla ou muito ampla antes de executar o c\u00f3digo apropriado.<\/p>\n
@media screen and (min-width: 780px) {\n.full-width-img {\nmargin: auto;\nwidth: 90%;\n}<\/code><\/pre>\n
Se a tela tiver pelo menos 780 pixels de largura, as imagens da classe “full-width-img” ocupar\u00e3o 90% da tela e ser\u00e3o automaticamente centralizadas por margens igualmente amplas.<\/p>\n
Layouts de fluidos<\/h3>\n
Um layout fluido \u00e9 uma parte essencial do design moderno e responsivo. Nos bons velhos tempos, voc\u00ea definiria um valor est\u00e1tico para cada elemento HTML, como 600 pixels.<\/p>\n
Um layout fluido se baseia em valores din\u00e2micos como uma porcentagem da largura do viewport.<\/p>\n
\"fluid
Example of fluid layout<\/figcaption><\/figure>\n
Esta abordagem aumentar\u00e1 ou diminuir\u00e1 dinamicamente os diferentes tamanhos de elementos de recipientes com base no tamanho da tela.<\/p>\n
Layout do Flexbox<\/h3>\n
Embora um layout baseado em porcentagem seja fluido, muitos designers e desenvolvedores web sentiram que ele n\u00e3o era din\u00e2mico ou flex\u00edvel o suficiente. Flexbox \u00e9 um m\u00f3dulo CSS projetado como uma forma mais eficiente de disposi\u00e7\u00e3o de m\u00faltiplos elementos, mesmo quando o tamanho do conte\u00fado dentro do cont\u00eainer \u00e9 desconhecido.<\/p>\n
Um recipiente flex\u00edvel expande os itens para preencher o espa\u00e7o livre dispon\u00edvel ou os encolhe para evitar o transbordamento. Estes recipientes flex\u00edveis t\u00eam uma s\u00e9rie de propriedades \u00fanicas, como conte\u00fado justificado, que voc\u00ea n\u00e3o pode editar com um elemento HTML regular.<\/p>\n
\"Container
Container Flexbox<\/figcaption><\/figure>\n
\u00c9 um t\u00f3pico complicado, portanto, se voc\u00ea quiser us\u00e1-lo em seu projeto, voc\u00ea deve ler o guia flexbox da CSS Tricks<\/a>.<\/p>\n
Imagens de resposta<\/h3>\n
A itera\u00e7\u00e3o mais b\u00e1sica de imagens responsivas segue o mesmo conceito de layout fluido, utilizando uma unidade din\u00e2mica para controlar a largura ou altura. A amostra de c\u00f3digo CSS que cobrimos anteriormente j\u00e1 realiza isto:<\/p>\n
img {\nwidth: 100%;\n}<\/code><\/pre>\n
A % unidade aproxima-se de uma \u00fanica porcentagem da largura ou altura do viewport e garante que a imagem permane\u00e7a em propor\u00e7\u00e3o \u00e0 tela.<\/p>\n
O problema com esta abordagem \u00e9 que todo usu\u00e1rio tem que baixar a imagem em tamanho real, mesmo em celulares.<\/p>\n
Para servir diferentes vers\u00f5es escalonadas para diferentes dispositivos, voc\u00ea precisa usar o atributo HTML srcset<\/code> em suas tags img, para especificar mais de um tamanho de imagem para escolher.<\/p>\n
<img srcset=\"large-img.jpg 1024w,\nmiddle-img.jpg 640w,\nsmall-img.jpg \u00a0320w\"\nsrc=\"small.jpg\"\n\/><\/code><\/pre>\n
O WordPress utiliza automaticamente esta funcionalidade para imagens inclu\u00eddas em posts ou p\u00e1ginas.<\/p>\n
Velocidade<\/h3>\n
Quando voc\u00ea estiver tentando criar um design responsivo para seu website, a velocidade de carregamento deve ser uma prioridade m\u00e1xima<\/a>.<\/p>\n
As p\u00e1ginas que carregam em 2 segundos t\u00eam uma taxa m\u00e9dia de ressalto de 9%<\/a>, enquanto as p\u00e1ginas que levam 5 segundos levam a uma taxa de ressalto de 38%.<\/p>\n
Sua abordagem \u00e0 capacidade de resposta n\u00e3o deve bloquear ou atrasar a primeira renderiza\u00e7\u00e3o de sua p\u00e1gina mais do que o necess\u00e1rio.<\/p>\n
H\u00e1 v\u00e1rias maneiras de tornar suas p\u00e1ginas mais r\u00e1pidas. Otimizar suas imagens<\/a>, implementar caching<\/a>, minifica\u00e7\u00e3o, usar um layout CSS mais eficiente, evitar render-blocking JS<\/a>, e melhorar seu caminho cr\u00edtico de renderiza\u00e7\u00e3o<\/a> s\u00e3o grandes id\u00e9ias que voc\u00ea deve considerar.<\/p>\n
Os clientes Kinsta<\/a> t\u00eam acesso a uma maneira r\u00e1pida e f\u00e1cil de realizar isto usando o recurso de minifica\u00e7\u00e3o de c\u00f3digo<\/a> que est\u00e1 embutido diretamente no painel do MyKinsta<\/a>, permitindo aos clientes ativar a minifica\u00e7\u00e3o autom\u00e1tica CSS e JavaScript com um simples clique.<\/p>\n
Voc\u00ea tamb\u00e9m poderia tentar implementar o Google AMP para suas p\u00e1ginas m\u00f3veis, mas em nosso estudo de caso do Google AMP<\/a>, nossos leads m\u00f3veis ca\u00edram em 59%.<\/p>\n
Pontos de Interrup\u00e7\u00e3o Reagentes Comuns<\/h2>\n
Para trabalhar com consultas da m\u00eddia, voc\u00ea precisa decidir sobre os “pontos de interrup\u00e7\u00e3o responsivos” ou pontos de interrup\u00e7\u00e3o de tamanho de tela. Um ponto de parada \u00e9 a largura da tela onde voc\u00ea usa uma consulta de m\u00eddia para implementar novos estilos de CSS.<\/p>\n
Tamanhos de tela comuns<\/h3>\n