Com uma internet cada vez mais acessada a partir de dispositivos móveis, não é mais suficiente ter um design de website estático que só fica bem na tela de um computador.

Sem mencionar, você também tem que considerar comprimidos, laptops 2 em 1, e diferentes modelos de smartphone com diferentes dimensões de tela quando se trata de um projeto.

Portanto, colocar seu conteúdo em uma única coluna e chamá-lo de “desistir” não vai cortá-lo.

Com um web design ágil, você pode garantir que seu website tenha o melhor visual em celulares, tablets, laptops e telas de desktop.

E essa melhoria na experiência do usuário significa maiores conversões e crescimento dos negócios.

Este guia lhe dará tudo o que você precisa saber sobre o design do site, incluindo definições, um passo-a-passo, exemplos e muito mais.

O que é Web Design Responsive?

O design responsivo é uma abordagem ao web design que faz com que seu conteúdo web se adapte aos diferentes tamanhos de tela e janelas de uma variedade de dispositivos.

Por exemplo, seu conteúdo pode estar separado em diferentes colunas nas telas da área de trabalho, porque elas são suficientemente amplas para acomodar esse design.

Se você separar seu conteúdo em várias colunas em um dispositivo móvel, será difícil para os usuários ler e interagir com ele.

O design responsivo torna possível entregar múltiplos layouts separados de seu conteúdo e design a diferentes dispositivos, dependendo do tamanho da tela.

Click to Tweet

Web Design Responsivo vs Design Adaptativo

A diferença entre o projeto responsivo e o projeto adaptativo é que o projeto responsivo adapta a renderização de uma única versão de página. Em contraste, o design adaptativo fornece várias versões completamente diferentes de uma mesma página.

Design responsivo versus adaptável

Design responsivo versus adaptável

Ambos são tendências cruciais de web design que ajudam os webmasters a controlar a aparência de seu site em telas diferentes, mas a abordagem é diferente.

Com design responsivo, os usuários acessarão o mesmo arquivo básico através de seu navegador, independentemente do dispositivo, mas o código CSS controlará o layout e o renderizará de forma diferente com base no tamanho da tela. Com design adaptável, há um script que verifica o tamanho da tela, e depois acessa o modelo projetado para aquele dispositivo.

Por que o Design Responsivo é Importante

Se você é novo em web design, desenvolvimento ou blogs, você pode se perguntar por que o design responsivo é importante em primeiro lugar.

A resposta é simples. Não é mais suficiente projetar para um único dispositivo. O tráfego da web móvel ultrapassou a área de trabalho e agora constitui a maior parte do tráfego do site, representando mais de 51%.

Mobile, tablet, desktop market share

Mobile, tablet, desktop market share

Quando mais da metade de seus visitantes potenciais está usando um dispositivo móvel para navegar na Internet, você não pode simplesmente servir-lhes uma página projetada para a área de trabalho. Seria difícil de ler e usar, e levaria a uma má experiência do usuário.

Mas isso não é tudo. Os usuários em dispositivos móveis também constituem a maioria das visitas aos mecanismos de busca

Mobile search traffic

Mobile search traffic

Finalmente, nos últimos anos, o celular se tornou um dos canais publicitários mais importantes. Mesmo em um mercado pós-pandêmico, os gastos com publicidade móvel estão crescendo 4,8% para US$ 91,52 bilhões.

Quer você opte por fazer propaganda nas mídias sociais ou usar uma abordagem orgânica como o YouTube SEO, a grande maioria do seu tráfego virá de usuários móveis.

Se suas páginas de destino não forem otimizadas para serem móveis e fáceis de usar, você não será capaz de maximizar o ROI de seus esforços de marketing. Más taxas de conversão levarão a menos leads e desperdício de anúncios.

Os sites WordPress respondem?

A resposta ou não dos sites WordPress depende do tema do seu site WP. Um tema WordPress é o equivalente a um modelo para um site estático e controla o design e o layout de seu conteúdo.

Se você usar um tema padrão do WordPress, como Twenty Twenty, o design é responsivo, mas como é um design de uma única coluna, você pode não percebê-lo ao olhar para ele em telas diferentes.

Se você usar outro tema WordPress, você pode testar se ele é responsivo ou não, comparando como ele é em diferentes dispositivos ou usando as ferramentas de desenvolvimento Chrome.

Os blocos de construção do Web Design Responsivo

Nesta seção, cobriremos os alicerces subjacentes ao design do site e seus diferentes blocos de construção.

CSS e HTML

A base do design responsivo é a combinação de HTML e CSS, dois idiomas que controlam o conteúdo e o layout de uma página em qualquer navegador da web.

HTML vs CSS

HTML vs CSS (Fonte de imagem: codingdojo.com)

O HTML controla principalmente a estrutura, os elementos e o conteúdo de uma página web. Por exemplo, para adicionar uma imagem a um site, você tem que usar código HTML como este:

<img src="image.gif" alt="image" class=”full-width-img”>

Você pode definir uma “classe” ou “id” que você pode mais tarde almejar com o código CSS.

Você também poderia controlar atributos primários tais como altura e largura dentro de seu HTML, mas isto não é mais considerado a melhor prática.

Em vez disso, o CSS é usado para editar o design e o layout dos elementos que você inclui em uma página com HTML. O código CSS pode ser incluído em uma seção <style> de um documento HTML, ou como um arquivo de folha de estilo separado.

Por exemplo, poderíamos editar a largura de todas as imagens HTML no nível do elemento desta forma:

img {
width: 100%;
}

Ou poderíamos visar a classe específica “full-width-img”, acrescentando um período na frente.

.full-width-img {
width: 100%;
}

Você também pode controlar o projeto além da altura, largura e cor. Usando o CSS desta forma é como você faz com que um projeto reaja quando você o combina com uma técnica chamada consulta de mídia.

Consultas de mídia

Uma consulta de mídia é uma parte fundamental do CSS3 que lhe permite renderizar conteúdo para se adaptar a diferentes fatores como tamanho ou resolução da tela.

Consultas de mídia para desktop, tablet, smartphone

Consultas de mídia para desktop, tablet, smartphone

Funciona de forma semelhante a uma “cláusula if” em algumas linguagens de programação, basicamente verificando se a janela de visão de uma tela é suficientemente ampla ou muito ampla antes de executar o código apropriado.

@media screen and (min-width: 780px) {
.full-width-img {
margin: auto;
width: 90%;
}

Se a tela tiver pelo menos 780 pixels de largura, as imagens da classe “full-width-img” ocuparão 90% da tela e serão automaticamente centralizadas por margens igualmente amplas.

Layouts de fluidos

Um layout fluido é uma parte essencial do design moderno e responsivo. Nos bons velhos tempos, você definiria um valor estático para cada elemento HTML, como 600 pixels.

Um layout fluido se baseia em valores dinâmicos como uma porcentagem da largura do viewport.

fluid layout - responsive web design

Example of fluid layout

Esta abordagem aumentará ou diminuirá dinamicamente os diferentes tamanhos de elementos de recipientes com base no tamanho da tela.

Layout do Flexbox

Embora um layout baseado em porcentagem seja fluido, muitos designers e desenvolvedores web sentiram que ele não era dinâmico ou flexível o suficiente. Flexbox é um módulo CSS projetado como uma forma mais eficiente de disposição de múltiplos elementos, mesmo quando o tamanho do conteúdo dentro do contêiner é desconhecido.

Um recipiente flexível expande os itens para preencher o espaço livre disponível ou os encolhe para evitar o transbordamento. Estes recipientes flexíveis têm uma série de propriedades únicas, como conteúdo justificado, que você não pode editar com um elemento HTML regular.

Container Flexbox

Container Flexbox

É um tópico complicado, portanto, se você quiser usá-lo em seu projeto, você deve ler o guia flexbox da CSS Tricks.

Imagens de resposta

A iteração mais básica de imagens responsivas segue o mesmo conceito de layout fluido, utilizando uma unidade dinâmica para controlar a largura ou altura. A amostra de código CSS que cobrimos anteriormente já realiza isto:

img {
width: 100%;
}

A % unidade aproxima-se de uma única porcentagem da largura ou altura do viewport e garante que a imagem permaneça em proporção à tela.

O problema com esta abordagem é que todo usuário tem que baixar a imagem em tamanho real, mesmo em celulares.

Para servir diferentes versões escalonadas para diferentes dispositivos, você precisa usar o atributo HTML srcset em suas tags img, para especificar mais de um tamanho de imagem para escolher.

<img srcset="large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg  320w"
src="small.jpg"
/>

O WordPress utiliza automaticamente esta funcionalidade para imagens incluídas em posts ou páginas.

Velocidade

Quando você estiver tentando criar um design responsivo para seu website, a velocidade de carregamento deve ser uma prioridade máxima.

As páginas que carregam em 2 segundos têm uma taxa média de ressalto de 9%, enquanto as páginas que levam 5 segundos levam a uma taxa de ressalto de 38%.

Sua abordagem à capacidade de resposta não deve bloquear ou atrasar a primeira renderização de sua página mais do que o necessário.

Há várias maneiras de tornar suas páginas mais rápidas. Otimizar suas imagens, implementar caching, minificação, usar um layout CSS mais eficiente, evitar render-blocking JS, e melhorar seu caminho crítico de renderização são grandes idéias que você deve considerar.

Você também poderia tentar implementar o Google AMP para suas páginas móveis, mas em nosso estudo de caso do Google AMP, nossos leads móveis caíram em 59%.

Pontos de Interrupção Reagentes Comuns

Para trabalhar com consultas da mídia, você precisa decidir sobre os “pontos de interrupção responsivos” ou pontos de interrupção de tamanho de tela. Um ponto de parada é a largura da tela onde você usa uma consulta de mídia para implementar novos estilos de CSS.

Tamanhos de tela comuns

Se você escolher uma primeira abordagem móvel para o projeto, com uma única coluna e tamanhos de fonte menores como base, você não precisará incluir pontos de parada móveis – a menos que você queira otimizar o projeto para modelos específicos.

Mobile-first design

Mobile-first design (Fonte de imagem: silocreativo.com)

Assim, você pode criar um projeto básico com apenas dois pontos de parada, um para tablets e outro para laptops e computadores de mesa.

Pontos de Interrupção Responsivos Bootstrap

Como uma das primeiras e mais populares estruturas de resposta, a Bootstrap liderou o ataque ao design estático da web e ajudou a estabelecer o design móvel-primeiro como um padrão da indústria.

Como resultado, muitos designers até hoje ainda seguem os pontos de quebra de largura de tela da Bootstrap.

Bootstrap - pontos de ruptura responsivos

Bootstrap – pontos de ruptura responsivos

Eles usam consultas de mídia para direcionar os telefones de paisagem (576px), tablets (768px), laptops (992px) e telas de mesa extra grandes (1200px).

Como fazer com que seu site responda

Agora que você está familiarizado com os blocos de construção, é hora de tornar o seu website responsivo.

Defina suas faixas de consulta de mídia (Pontos de Interrupção Responsivos)

Defina seus intervalos de consulta de mídia com base nas necessidades exclusivas de seu projeto. Por exemplo, se quiséssemos seguir os padrões Bootstrap para nosso projeto, usaríamos as seguintes consultas de mídia:

Elementos de Layout de Tamanho com Porcentagens ou Criar um Layout de Grade CSS

O primeiro e mais importante passo é configurar diferentes tamanhos para diferentes elementos de layout, dependendo da consulta de mídia ou do ponto de quebra da tela.

O número de contêineres de layout que você tem dependerá do design, mas a maioria dos sites se concentra nos elementos listados abaixo:

Layout comum

Layout comum

Usando uma abordagem mobile-first, você pode estilizar os principais elementos de layout como este (sem consulta de mídia para os estilos básicos para telefones celulares):

#wrapper {width:95%;  margin: 0 auto; }

#header {width:100%; }

#content {width:100%; }

#sidebar {width:100%; }

#footer {width:100%; }

// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) {

// Medium devices (tablets, 768px and up)

@media (min-width: 768px) {

#wrapper {width:90%;  margin: 0 auto; }

#content {width:70%; float:left; }

#sidebar {width:30%; float:right; }

// Large devices (desktops, 992px and up)

@media (min-width: 992px) { ... }

}

// Extra large devices (large desktops, 1200px and up)

@media (min-width: 1200px) {

#wrapper {width:90%;  margin: 0 auto; }

}

Em uma abordagem baseada em porcentagem, o atributo “flutuar” controla em que lado da tela um elemento aparecerá, à esquerda ou à direita.

Se você quiser ir além do básico e criar um projeto de ponta com capacidade de resposta, você precisa se familiarizar com o layout do CSS flexbox e seus atributos como tamanho de caixa e flexibilidade.

Implementar Imagens Responsivas

Uma maneira de garantir que suas imagens não se quebrem é simplesmente usar um valor dinâmico para todas as imagens, como abordamos anteriormente.

img {
width: 100%;
}

Mas isso não vai reduzir a carga colocada em seus visitantes móveis quando eles acessarem seu website.

Precisa de uma hospedagem rápida, segura e de fácil desenvolvimento para os sites dos seus clientes? Kinsta é construído com os desenvolvedores do WordPress em mente e fornece muitas ferramentas e um poderoso painel de controle. Confira os nossos planos

Certifique-se de incluir sempre um srcset que com tamanhos diferentes de sua foto quando você adicionar imagens a suas páginas.

Fazer isto manualmente pode ser bastante demorado, mas com um CMS como o WordPress, isto acontece automaticamente quando você carrega arquivos de mídia.

Tipografia Responsiva para o texto de seu site

O foco principal do web design responsivo é a capacidade de resposta dos blocos de layout, elementos e mídia. O texto é muitas vezes tratado como um pensamento posterior.

Mas para um design verdadeiramente responsivo, você também deve ajustar o tamanho de suas fontes de forma apropriada para combinar com o tamanho da tela.

A maneira mais fácil de fazer isso é definir um valor estático para o tamanho da fonte, como 22 px, e adaptá-lo em cada consulta de mídia.

Tamanho da fonte versus pontos de dispersão de tamanho de vista

Tamanho da fonte versus pontos de dispersão de tamanho de vista

Você pode direcionar múltiplos elementos de texto ao mesmo tempo, usando uma vírgula para separar cada um deles.

@media (min-width: 992px) {

body, p, a, h4 {

font-size: 14px;

}

}

Resposta de teste

Primeiro, você quer testar se seu site é amigável ao celular com  teste amigável ao celular do Google. Basta digitar a URL de seu site e clicar no botão “testar URL” para obter os resultados.

Teste amigável do Google para celulares

Teste amigável do Google para celulares

Não se preocupe se demorar um pouco para ir buscar seu site. Isso não reflete a velocidade de carregamento de sua página.

Se você seguiu os passos descritos neste artigo, deve dizer que você tem um site na Internet móvel e amigável.

Em seguida, você deseja testar seu site em vários tamanhos de tela com uma ferramenta como as ferramentas de desenvolvimento Chrome.

Pressione CTRL + Shift + I em computadores Windows, ou Command + Option + I em Macs para abrir a visualização do dispositivo relevante. A partir daqui, você pode selecionar o dispositivo móvel ou tablet de sua escolha para testar a capacidade de resposta de seu projeto.

Teste de layouts móveis e responsivos em cromo

Teste de layouts móveis e responsivos em cromo

Há algumas perguntas que você quer responder ao passar por este processo.

Unidades e valores do CSS para projeto responsivo

O CSS possui tanto unidades de medida absolutas quanto relativas. Um exemplo de unidade absoluta de comprimento é um cm ou um px. Unidades relativas ou valores dinâmicos dependem do tamanho e da resolução da tela ou do tamanho da fonte do elemento raiz.

PX vs EM vs REM vs Viewport Units para projeto responsivo

Um novo web designer ou desenvolvedor deve provavelmente ficar com pixels para texto porque eles são a unidade de comprimento mais direta no CSS.

Mas ao definir a largura e a largura máxima das imagens e outros elementos, usar % é a melhor solução. Esta abordagem garantirá que os componentes se ajustem ao tamanho da tela de cada dispositivo.

Exemplos de projetos responsivos

Abaixo, abordaremos alguns exemplos de web design responsivo de diferentes indústrias – e aprenderemos com o que eles fazem certo e errado.

1. Jornal Online: New York Times

NYT no celular, tablet e laptop

NYT no celular, tablet e laptop

Na área de trabalho, o layout do NYT lembra um jornal tradicional, repleto de imagens e diferentes linhas e colunas de conteúdo. Parece haver uma coluna ou fila separada para cada categoria de notícias.

No móvel, está em conformidade com o padrão de coluna única e também ajusta o menu para estar no formato de acordeão para ser mais fácil de usar.

2. Blog: A Arte da Não-Conformidade

A Arte da Não Conformidade no celular, tablet e laptop

A Arte da Não Conformidade no celular, tablet e laptop

O blog de Chris Guillebeau “A Arte da Não-Conformidade” está indo bem há mais de uma década. Embora o design não seja o mais avançado, é responsivo e adapta a barra lateral de duas colunas e o layout do conteúdo principal a um design de uma única coluna em dispositivos móveis.

3. Ecommerce: Amazon

amazon responsive design 1

Amazon on mobile, tablet, and laptop

A Amazon é líder mundial em comércio eletrônico por uma razão, sua interface de usuário é perfeitamente fluida em todos os dispositivos.

Seu layout de tablet simplesmente remove parte do espaço branco e adiciona uma seção de ícones com rolagem para caber mais conteúdo em um pacote menor.

Seu layout móvel o traz em uma única coluna, focalizando o essencial, como o histórico de compras recentes, em vez dos diferentes ícones de links de seção de sua página principal.

4. Vídeo do site: YouTube

youtube responsive design

YouTube on mobile, tablet, and laptop

O núcleo do design da página inicial do YouTube é uma grade flexível de vídeos que são relevantes para cada usuário. Nos tablets, o número de colunas em cada linha desce para três. No móvel, ele é reduzido a um design de uma única coluna.

A versão móvel também move o menu principal para a parte inferior da tela, mais perto dos polegares de seus usuários de smartphones. Este simples movimento melhora a navegação e o UX.

5. Revista on-line: Wired

Com fio no celular, tablet e laptop

Com fio no celular, tablet e laptop

A abordagem da Wired em relação ao web design responsivo está focada na implementação de um layout de uma única coluna em todas as telas menores, começando com os tablets.

É um layout básico, mas torna mais fácil chamar a atenção do usuário para as principais histórias e seu CTA para subscrever.

Certifique-se de que seu website tenha uma aparência ✨ impressionante ✨ através de dispositivos com este guia de design responsivoClick to Tweet

Resumo

Há muitos elementos diferentes que entram em um projeto web responsivo. Sem uma compreensão básica de HTML e CSS, pode ser fácil cometer erros.

Mas ao se familiarizar com os diferentes blocos de construção, analisar os exemplos com ferramentas de desenvolvimento web e testar à medida que você vai usando o código de amostra, você deve ser capaz de fazer com que seu website responda sem nenhum problema de maior.

Se isso parecer muito difícil, você pode sempre contratar um desenvolvedor WordPress ou simplesmente certificar-se de que seu tema já está respondendo.


Se você gostou deste artigo, então você vai adorar a plataforma de hospedagem WordPress da Kinsta. Turbine seu site e obtenha suporte 24/7 de nossa experiente equipe de WordPress. Nossa infraestrutura baseada no Google Cloud se concentra em escalabilidade automática, desempenho e segurança. Deixe-nos mostrar-lhe a diferença Kinsta! Confira nossos planos