Responsividade em página Web
O uso do HTML e do CSS3 na responsividade.
Responsividade é uma técnica de estruturação HTML e CSS, em que o site se adapta ao navegador do usuário sem precisar definir diversas folhas de estilos para cada resolução. Uma das principais vantagens do design responsivo também se gera um esforço para as agências digitais.
Se você quer que o seu site esteja adaptado aos celulares, smartphones, tablets, notebooks, desktops e TVs, você provavelmente teria que fazer pelo menos 5 sites diferentes. A evolução do design responsivo mudou bastante isto, conseguindo trazer a vantagens de ter diversos sites definidos em um único arquivo.
O design responsivo no CSS facilitou em muito a vida dos desenvolvedores front-end após o crescimento exorbitante no número de smartphones e tabletes, ajudando na adaptação de páginas inteiras para as dimensões do browser (Navegador) utilizado pelo usuário.
POR QUE USAR O DESIGN RESPONSIVO?
O desenvolvimento de sites responsivos é uma preocupação constante entre os desenvolvedores front-end. São vários quesitos à serem observados, tais como: medidas relativas, densidade de pixel, velocidade de conexão, largura do viewport, entre outros.
Nas imagens abaixo vemos o exemplo da mesma página, na versão para Desktop e na versão para dispositivos Mobile.
A grande diferença entre as duas imagens é que a primeira, está com a função “versão para desktop” habilitada.
Na imagem 1 (esquerda), a função “versão para desktop” está habilitada, dificultando a navegação do usuário, fazendo o mesmo a ter que utilizar a barra de rolagem horizontal para uma navegação mais ampla.
Na imagem 2 (direita), com a função “versão para desktop” habilitada, a página se adéqua às medidas dimensionais do browser utilizado pelo usuário, tornando a navegação mais agradável, e extinguindo o uso da barra de rolagem horizontal.
Esse cenário ilustrado da página o Github demonstra a importância das páginas Web se adaptarem ao meio em que são exibidos. Contudo, existem várias outras técnicas de design responsivo que facilitam na otimização de imagens, adequando-as à dispositivos de tamanhos diversos. A seguir iremos ver algumas observações de como usar o design responsivo.
MANIPULANDO O VIEWPORT
A área onde seu website aparece é denominada viewport. O viewport sempre vai ter o tamanho da janela. Mas a forma como os elementos são renderizados vai depender bastante do dispositivo.
Em máquinas Desktop não é necessária uma preocupação muito grande pois já estamos acostumados com um determinado tamanho de tela e resolução média utilizada pelos usuários.
Mas quando começamos a variar muito o tamanho das telas, a largura do viewport começa a ser uma preocupação porque afeta diretamente a forma como o usuário utiliza seu website, formas já explicadas anteriormente no artigo.
Há algum tempo que podemos manipular o viewport dos browsers para podermos entregar um website mais adequado e confortável para os usuários. Essa manipulação geralmente era feita diretamente por meio de uma metatag no head do documento, algo assim:
Isso é necessário por que você tem uma resolução gigante em aparelhos com a tela “relativamente” pequena, resolução é uma coisa, o tamanho da tela é outra. Um celular por exemplo, pode ter uma resolução de 900×640 mas o tamanho da tela é de 320×480.
Por isso que quando você abre um website sem manipulação de viewport, ele aparece miniaturizado. Por que embora você esteja vendo o site em uma tela pequena, o site aparece como se estivesse numa resolução alta.
IMAGEM RESPONSIVA
Na imagem acima temos um exemplo de “imagem responsiva” pois vemos como ela se adapta à cada tipo de resolução de tela, no código abaixo:
No código acima temos 2 situações que variam dependendo da resolução da tela.
Se a tela do dispositivo utilizado pelo usuário tiver a resolução até“400px”, será utilizada a imagem “oxford-p.jpg”.
Se a tela do dispositivo utilizado pelo usuário tiver a resolução entre “401px e 800px”, será utilizada a imagem “oxford-m.jpg”.
100 de %MAX-WIDTH
Uma técnica bastante simples é declarar no CSS que todas as imagens tenham largura máxima de 100%, automaticamente todos as imagens do seu layout vão se redimensionar de acordo com a proporção da largura do container.
Abaixo 2 exemplos de ajustes de acordo com a Imagem e o Browser (Navegador):
- Se a largura da tela do navegador for maior que a largura da imagem, ela será mostrada em seu tamanho real.
- Se a largura da tela do navegador for menor que a largura da imagem, ela terá sua largura reduzida para a largura da tela do browser (navegador).
ELEMENTO PICTURE
Utilizando o picture é possível declarar diferentes fontes em uma única imagem no HTML e controlar qual deve ser apresentada utilizando media queries. Isto ocorre quando é utilizada a “tag” picture em conjunto com o source, tornando possível especificar imagens diferentes de acordo com a altura e a largura da janela do navegador, densidade de pixels, orientação do dispositivo, layout para impressão e etc.
Esta especificação deve ser utilizada quando existir mais de uma imagem, optando pelo “img” quando tiver apenas uma. O “img” serve de fallback para navegadores que não aceitem o “picture”.
Foram usados 3 endereços no “source scrset”: img1x, img2x e img3x. Os atributos (1x,2x e 4x) são dicas para o user agent trocar a imagem de acordo com a densidade de pixels na tela, “1x” é a densidade padrão, “2x” é o dobro da densidade. Podemos tambem acrescentar um valor “Xh” e “Xw” referente a largura e altura do viewport.
CONSIDERAÇÕES FINAIS
Há uma certa divergência entre a utilização da responsividade nas páginas da web. Sites que utilizam publicidade para monetizar, podem achar desafiador incluir anúncios no design responsivo, mas é possível. revistas e Jornais como o Boston Globe, Time e Glamour já fizeram funcionar. A indústria de anúncios também está trabalhando nisso.
Devido à sua complexidade, o site responsivo tem um custo elevado em relação ao site exclusivo para desktop ou Mobile, os desenvolvedores precisam recriar a arquitetura do site, satisfazendo as necessidades dos usuários de diversos dispositivos, além de criar orientações que sejam possíveis utilizando um único arquivo de HTML.
Porém o site responsivo é carregado de acordo com a Largura e Altura do browser utilizado pelo usuário, facilitando na hora da navegação.
Um site com essa estrutura fortalece a experiência do usuário sem que a sua identidade visual seja prejudicada, além de tornar sua marca acessível em qualquer lugar.
Algumas pesquisas apontam que o carregamento de dados de um site responsivo é mais rápido em relação a sites criados não responsivos.
