Um guia fácil para criar um site responsivo

Você sempre se perguntou quantos sites modernos parecem 'encaixar' tão perfeitamente, independentemente do dispositivo que você está usando para visualizá-los? Codificar uma página da Web responsiva é uma prática comum que agora é amplamente prevalente em muitos novos sites hoje. As páginas da Web responsivas executam um truque inteligente ao se redimensionar para caber na tela do dispositivo que está sendo usado para visualizar o site. Isso significa que eles ficam ótimos em um iPhone ou computador desktop e tudo mais.

Essa 'responsividade' acontece tão perfeitamente que você pode nem ter notado. Um ótimo design responsivo da web deve fluir perfeitamente de dispositivo para dispositivo, garantindo que a experiência de navegação ideal seja mantida. Sites responsivos deixaram de ser um recurso 'bom de se ter' para algo que agora é praticamente obrigatório para qualquer site. Por quê? Simplesmente porque o número de pessoas que agora usam dispositivos móveis para navegar online disparou nos últimos anos e essa tendência para dispositivos móveis (e, portanto, telas menores) não mostra sinais de desaceleração.

Dê uma olhada nos dados abaixo (fornecidos cortesia de statcounter.com). Você verá que, de longe, os tamanhos de tela mais comuns são pequenos (ou seja, telas de celular).

Imagine se todos esses milhões de usuários tivessem que olhar para sites não responsivos nesses dispositivos. Eles ficariam extremamente frustrados, pois isso envolveria muitas ações de 'pinch and zoom' para poder ver adequadamente o conteúdo desses respectivos sites. As chances são altas de que esses usuários abandonem esses sites em favor de um equivalente responsivo.

Se perder clientes em potencial não for suficiente para convencê-lo do valor de ter um site responsivo, talvez a ideia de perder os rankings de pesquisa possa ser. O Google há algum tempo penaliza sites que não oferecem alguma forma de design responsivo ou adaptável para usuários de dispositivos móveis. Isso significa que se o seu site não funcionar bem em um celular, espere receber uma penalidade de classificação. O que significa "funcionar bem" em um celular? Bem, o conteúdo precisa ser exibido de forma amigável. Isso significa que ele deve ser legível sem apertar e aumentar o zoom. Ele também precisa carregar rapidamente (interessado em como o WordPress Caching pode ajudar com suas metas de velocidade, então dê uma olhada neste artigo 'WordPress Caching - Como funciona e por que você deve usá-lo !')

Páginas da Web Responsivas x Páginas da Web Adaptáveis

Se voltarmos uma década ou duas, os telefones celulares não eram tão predominantes quanto agora. Certamente, aqueles que fizeram um bom trabalho ao permitir que você navegasse na web não começaram a chegar até talvez 2005 em diante (por incrível que pareça o iPhone nem entrou em cena até 2007). As redes celulares também não eram capazes de transportar muitos dados, o que significava que havia oportunidades limitadas para a navegação na web móvel. Tudo isso mudou rapidamente na última década e os sites ficaram lutando para recuperar o atraso para atender melhor seus clientes no novo mundo movido a dispositivos móveis em que nos encontramos agora.

Havia várias maneiras pelas quais os web designers trabalhavam para resolver o problema da necessidade de encaixar um site 'desktop' em uma tela de celular. Nos primeiros dias, foram desenvolvidos sites autônomos 'somente móveis' que eram executados ao lado da versão principal 'desktop' de um site. Normalmente, eles eram bastante grosseiros em design e frequentemente ofereciam uma experiência de navegação simplificada que omitia muitos recursos de seu irmão maior de desktop.

Depois disso, o Design Adaptativo entrou em cena. Isso levou a versão apenas para celular de servir um site para celular especialmente projetado um passo adiante. São criados vários layouts estáticos que oferecem uma experiência de navegação móvel mais atraente para o usuário. O tamanho da tela do dispositivo usando o site é carregado e o tamanho mais adequado é exibido. Normalmente, seis tamanhos seriam criados para atender a telas que variam de um desktop grande a um celular. O design adaptável, no entanto, é um pouco limitante e definitivamente não é à prova de futuro, pois não atende a tamanhos de tela que não se enquadram perfeitamente nas 6 categorias que foram criadas. Também é intensivo em recursos do ponto de vista do design, pois 6 versões de um site precisam ser construídas.

As principais desvantagens dos designs adaptativos foram resolvidas com o design responsivo. Em vez de fornecer um layout pré-construído com base no tamanho da tela, os designs responsivos ajustam a renderização dependendo do dispositivo. Isso significa que você deve obter um site com boa aparência e fácil de usar, independentemente do dispositivo (e do tamanho da tela correspondente) usado para visualizar o site.

O design responsivo agora é considerado o padrão do setor para sites móveis. Na verdade, o próprio Google recomenda Web Design Responsivo. Neste tutorial, vamos dar uma olhada no design responsivo para iniciantes e como isso pode ser aplicado ao layout do seu site.

Como funcionam os sites responsivos?

Sites responsivos usam o que chamamos de CSS Media Queries para modificar o layout de um site com base na largura da tela. As consultas de mídia CSS são uma ferramenta poderosa que é bastante simples de implantar se você tiver um entendimento básico de CSS. Um ponto de partida antes de mergulhar no processo de construção de um site repsonsivo é dar uma olhada em alguns exemplos ao vivo. A melhor maneira de fazer isso é em uma tela de desktop ou laptop. Abra um navegador, como o Chrome, e vá para um site popular. Você pode querer experimentar o nosso em pressidium.com.

Reduza o tamanho da janela do navegador e, em seguida, passando o mouse sobre a borda direita da janela do navegador, comece a deslizar a janela para que ela fique mais estreita. Você verá que, à medida que se torna menor, o layout do site se altera. O que está acontecendo é que quando o site atinge um tamanho pré-definido (por exemplo, 1.000px de largura), uma consulta de mídia CSS é acionada e informa ao navegador para usar o estilo CSS relacionado a essa largura de tela. O site então flui normalmente ou responde a esse novo tamanho de tela e é exibido de acordo. Bem inteligente!

Então, agora temos uma compreensão básica do que está acontecendo, vamos mergulhar no âmago da questão e ver como podemos construir uma página da web responsiva.

Construindo uma página web responsiva

Não usaremos nenhum código de back-end neste tutorial, portanto, não há necessidade de acessar um servidor para tentar. Basta criar uma pasta em sua área de trabalho e adicionar seus arquivos de trabalho a ela.

Etapa 1: HTML

Crie um arquivo index.html dentro de sua nova pasta. Abra este arquivo com seu editor de texto/código favorito e insira o seguinte código:

 <!DOCTYPE html> <html lang="en-US"> <head> <link rel="stylesheet" type = "text/css" href = "style.css" /> </head> <body> <div> <div> <h1>My website</h1> <div> <div class="post"> <h3 class="post-title">Post 1 title</h3> <p><b>post 1 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 2 title</h3> <p><b>post 2 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 3 title</h3> <p><b>post 3 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 4 title</h3> <p><b>post 4 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <div class="post"> <h3 class="post-title">Post 5 title</h3> <p><b>post 5 content.</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> </div> <div> <div> <h3>Menu title</h3> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> </div> </div> </div> </div> </body> </html>

Etapa 2: CSS externo

Você precisará adicionar um arquivo style.css externo. Para fazer isso, crie um arquivo chamado style.css e coloque-o na mesma pasta que seu arquivo index.html. Em seguida, adicione o seguinte código:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 900px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div#sidebar { width: 300px; float: left; padding: 20px; margin: 20px; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

Neste ponto, se você abrir seu arquivo index.html com seu navegador de internet (usamos o Chrome neste exemplo), o que você deve ver em sua página é algo assim:

Agora vamos dar uma olhada nas ferramentas de desenvolvedor do nosso navegador (novamente, estamos usando o Chrome para este exemplo). Abra o Chrome e pressione F12 e defina-o para visualizar no lado direito.

Altere o tamanho da janela movendo o cursor separador e observe a alteração da resolução da tela em tempo real.

Etapa 3: unidades relativas de CSS

Em nosso exemplo, você verá que se você arrastá-lo para 1396px de largura, notará que a barra lateral direita com o menu se moverá abaixo do conteúdo principal, pois não caberá mais.

Isso aconteceu porque definimos uma largura fixa de 900px no div#main e 300px no div#sidebar . Vamos alterar o formato desses valores e usar porcentagens. (Observe que preenchimentos e margens também são contados na largura, portanto, esses valores também devem ser convertidos em porcentagem.)

Depois de fazer essas edições, o style.css deve ficar assim:

 h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; }

Isso agora está ficando empolgante, pois temos uma página que está se tornando mais responsiva!

Embora as coisas estejam tomando forma, a área de posts precisa de mais edição de CSS. Quanto menor a largura, mais “feias” as caixas de correio se tornam. Para contornar isso, precisamos editar o CSS do post para obter um layout mais bonito e responsivo.

Você notará que os problemas visuais ocorrem apenas quando a tela se estreita. Para resolver esse problema, teremos que usar algumas consultas de mídia CSS para que, além de um certo ponto, o CSS alternativo que produz um layout com melhor aparência seja ativado.

O que vamos tentar fazer é converter nossa área de postagem de 3 colunas de 'tela ampla' em uma área de 2 colunas que se encaixará melhor em uma tela mais estreita. Para fazer isso, usamos consultas de mídia CSS.

Etapa 4: consultas de mídia CSS

Para o nosso modo 'tela ampla', apresentaremos uma consulta de mídia CSS como esta: like this @media screen and (min-width: 1396px) . Essa consulta fica no topo de nossa folha de estilo CSS e inclui todo o conjunto de CSS que queremos executar quando nossa tela tiver no mínimo 1396px de largura.

Agora podemos copiar todo esse código e duplicá-lo em nossa folha de estilo CSS (copie e cole abaixo do CSS atual para que você tenha duas versões idênticas em um arquivo). Agora, edite a consulta de mídia CSS na parte superior do segundo lote de CSS para ler @media screen and (max-width: 1395px) . Isso agora está dizendo ao nosso navegador que, se for menor que 1395px, ele deve executar este CSS. Agora que isso está feito, podemos ajustar o CSS nesta seção 'menor' para que ele altere o layout da nossa página da web para que caiba melhor em uma tela menor. Neste exemplo, vamos ajustar o e devemos ajustar a porcentagem de div.post de 31,1% para 45%.

Agora você deve ter um arquivo CSS que se parece com isso:

 @media screen and (min-width: 1396px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 31.1%; float: left; padding: 10px; } } @media screen and (max-width: 1395px) { h1 { text-align: center; } div#content { margin: 0 auto; display: table; } div#main { width: 66%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div#sidebar { width: 22%; float: left; padding: 1%; margin: 1%; border: 1px solid darkgrey; } div.post { width: 45%; float: left; padding: 2%; } }

Agora que as caixas de posts têm um estilo diferente para telas com largura menor que 1395px, vamos ver como isso se reflete na ação:

Agradável!

Você notará que as coisas ainda estão ficando estranhas ao reduzir e depois de cruzar 760px de largura.

Para ordenar isso, podemos usar o mesmo truque que usamos para ir de 3 colunas para 2. Desta vez, usaremos um 'ponto de interrupção' de 760px e alteraremos nosso CSS div.post para 94%. Se fizermos isso, teremos três consultas de mídia CSS que devem se parecer com isso:

 @media screen and (min-width: 1396px) { } @media screen and (min-width: 761px) and (max-width: 1395px) { } @media screen and (max-width: 760px) { }

Nossa @media screen and (max-width: 760px) CSS incluirão nosso div.post editado, que ficará assim:

 div.post { width: 94%; float: left; padding: 2%; }

Se tudo correr bem, agora você deve ver algo como o seguinte quando reduzir a largura do seu navegador para menos de 760px de largura:

E é isso! Agora criamos uma página web responsiva que funciona em telas maiores, tablets e celulares!

Usando este modelo, você pode brincar e experimentar outros estilos CSS. Há muito a ser aprendido brincando com este exemplo e aplicando várias regras CSS que podem ser usadas posteriormente para construir sites bonitos e responsivos.

Hospede seu site com a Pressidium

GARANTIA DE DEVOLUÇÃO DO DINHEIRO DE 60 DIAS

VEJA NOSSOS PLANOS

Conclusão

Se você estiver usando um CMS como o WordPress, pode estar se perguntando por que é necessário pesquisar o CSS subjacente e as consultas de mídia que alimentam uma página da Web responsiva. Afinal, qualquer tema WordPress decentemente codificado já deve ter um design responsivo embutido. Embora isso seja verdade, entender por que um site age da maneira que age com base em determinadas larguras de navegador pode ser extremamente útil. Pode haver momentos em que, por algum motivo, o design responsivo inicial adicionado pelo autor do tema não está funcionando como você precisa também. Ao saber como aplicar consultas de mídia para alterar qual CSS é exibido em determinados pontos de interrupção, você está livre para seguir em frente e aplicar as alterações que resultam na aparência e na função de que você precisa.

E se você planeja construir seu próprio tema WordPress, então uma sólida compreensão das consultas de mídia é uma necessidade absoluta! Espero que este artigo tenha lhe dado um vislumbre do que acontece nos bastidores dos sites responsivos de hoje. Boa codificação responsiva!