Responsividade web
Criando Layouts modernos
Definição
Com o grande aumento do uso dos dispositivos móveis, houve-se a necessidade de adaptar os diferentes Layouts às mais diversas resoluções de telas.
A responsividade web refere-se exatamente à capacidade de um site adaptar-se a diferentes tamanhos de tela e assim fornecer uma experiência visualmente mais atraente e oferecer uma navegação mais agradável ao usuário em qualquer dispositivo.
Além de ajustar o conteúdo às mais variadas telas, a responsividade web se trata também de garantir que as páginas sejam otimizadas na velocidade de carregamento dos recursos, por exemplo imagens, vídeos, etc.
Também deve-se trabalhar com a estrutura do layout afim de garantir maior facilidade de navegação bem como a organização do conteúdo mostrado em tela.
Web design responsive vs Web design adaptive
O web design responsive e o web design adaptive são duas técnicas diferentes que tornam as páginas web responsivas.
O web design responsive utiliza uma grade flexível e elementos que se adaptam automaticamente ao mudarmos a resolução da tela. Podemos citar como exemplo definir o tamanho de containers e fontes utilizando porcentagem como métrica, assim, estes elementos se adequarão automaticamente à qualquer tipo de resolução.
Já o web design adaptive utiliza um conceito um pouco diferente, isso pois, neste caso existem várias versões do layout, cada um projetado para se ajustar em determinadas medidas de tela. Por exemplo, uma aplicação que faça uso dessa abordagem deverá ter um layout para desktop, outo para tablets, outro para smartphones e assim para todo tipo de resolução onde queira que sua aplicação seja executada.
Embora ambas as técnicas de responsividade sejam funcionais, utilizar o web design responsive é mais adequado pois esta abordagem é mais flexível e fácil de implementar, isso pois, se utilizar o web design adaptative, o programador terá que desenvolver múltiplos conjuntos de códigos, um para se adaptar a cada proporção de tela.
Sites responsivos
Para que se possa criar sites responsivos é necessário que se utilize de práticas que deixem o layout flexível, como o uso de um layout grid ou flex.
Utilizar imagens que se adequem ao tamanho da página é outra boa prática que se deve levar em conta na construção do site. Imagens que não sejam cortadas ao mudar a resolução de tela faz diferença na entrega da experiência de usuário. Usar fontes escaláveis também é importante neste aspecto pois além da experiência visual, ajudam na questão de acessibilidade.
Por fim, a utilização de media queries é de suma importância pois é a partir do uso dessa técnica que é possível realizar o redimensionamento das páginas às mais diversas escalas adaptando seu site. É como usar uma estrutura condicional onde o browser aplica uma alteração no layout assim que aquela condição for satisfeita.
Exemplo
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-size: 16px;
color: #f8f8f2;
}
.container {
display: flex;
justify-content: space-evenly;
}
p {
min-height: 60vmin;
padding: 5%;
border: 1px solid #d9d9d9;
}
@media only screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
@media only screen and (max-width: 576px) {
body {
font-size: 12px;
}
.container {
display: block;
}
}
</style>
<title>web design resonsive</title>
</head>
<body>
<div class="container">
<p style="background-color: brown;">Bloco da coluna a esquerda.</p>
<p style="background-color: chocolate;">Bloco da coluna a direita.</p>
</div>
</body>
</html>No html acima, pode-se notar que utilizou-se das técnicas de responsividade citadas anteriormente. Dentro da tag style, definimos um tamanho de fonte padrão, ou seja, 16px aplicado ao corpo do documento html.
Em seguida, na classe container, definimos um display flex. Isso quer dizer que a nossa página terá uma grade flexível onde poderemos utilizar das propriedades do flexbox para alinhar, posicionar e organizar o elemento a qual aplicamos a propriedade.
Por fim, foi aplicado media queries nesta página. Como pode ser observado, quando a resolução de tela for menor ou igual a 768px, a página modificará o tamanho da fonte para 14px. Ao mudar o tamanho da tela para 576px(ou menor que isso), a página satisfará a outra media querie que reduzirá a fonte para 12px e mudará o display da página para block, o que fará com que os blocos se adaptem para telas menores, por exemplo de um smartwatch.
Conclusão
Como visto, a responsividade é um conceito extremamente necessário nos dias atuais pois através deste recurso pode-se alcançar seu público nos mais diversos dispositivos desde computadores gamers até utilitários vestíveis como no caso dos smartwatches. Sendo assim, aplicar estas técnicas garantem um sistema mais acessível e flexível.