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.
Confira nosso guia em vídeo para Web Design Responsivo:
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.
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.
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%.
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
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.
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.
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.
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.
É 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.
Os clientes Kinsta têm acesso a uma maneira rápida e fácil de realizar isto usando o recurso de minificação de código que está embutido diretamente no painel do MyKinsta, permitindo aos clientes ativar a minificação automática CSS e JavaScript com um simples clique.
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
- Móvel: 360 x 640
- Móvel: 375 x 667
- Móvel: 360 x 720
- iPhone X: 375 x 812
- Pixel 2: 411 x 731
- Tabuleiro: 768 x 1024
- Portátil: 1366 x 768
- Laptop ou desktop de alta resolução: 1920 x 1080
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.
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.
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:
- 576px para telefones retrato
- 768px para comprimidos
- 992px para laptops
- 1200px para grandes dispositivos
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:
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.
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.
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.
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.
Há algumas perguntas que você quer responder ao passar por este processo.
- O layout se ajusta à quantidade correta de colunas?
- O conteúdo se encaixa bem dentro dos elementos de layout e recipientes em diferentes telas?
- O tamanho da fonte cabe em cada tela?
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
- PX – um único pixel
- EM – unidade relativa com base no tamanho da fonte do elemento.
- REM – unidade relativa com base no tamanho da fonte do elemento.
- VH, VW – % da altura ou largura do viewport.
- % – a porcentagem do elemento pai.
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
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
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
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 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
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.
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.
Editor-chefe da Kinsta e consultor de marketing de conteúdo para desenvolvedores de plugins do WordPress. Conecte-se com Matteo no Twitter.
Deixe um comentário