Este artigo é a introdução do tutorial sobre Web Design com Flex Box Model.

Websites responsivos, ou Responsive Web Design (RWD), foi a resposta encontrada pelos desenvolvedores para a demanda de visualizações de páginas web através dos mais variados dispositivos, desde desktops com enorme capacidade gráfica, até os menores e mais modestos dentre os aparelhos celulares.

Páginas desenvolvidas, com o emprego desta técnica, avaliam o tamanho da tela onde estão sendo visualizadas e se adaptam convenientemente ao seu formato. Isso proporciona uma experiência agradável, ao invés do simples enquadramento por redução do tamanho da tela.

Essa abordagem justifica-se por três aspectos principais: o aumento exponencial de smartfones para acessar a web, notadamente desde 2009, o custo de manutenção de sites com diferentes versões dedicadas a cada tipo de dispositivo e a disponibilidade de ferramentas de desenvolvimento, totalmente gratuitas, como o HTML5, CSS3, JavaScript e editores de códigos tipo Visual Studio Code.

Neste artigo vamos explorar a construção de uma página responsiva utilizando apenas linguagens padrão, através do layout flexível, ou ‘Flex Box Model’ introduzido com o CSS3.

Boa leitura!

Web Design

Vamos utilizar o Social Media Template, da W3schools, como base para nosso tutorial.

Faça uma visita a essa página utilizando o Firefox. Tecle Ctrl + Shift + M para entrar no modo responsivo e arraste a marca no canto inferior direito com o mouse para verificar o comportamento em diferentes tamanhos de tela.

Em uma página web, ninguém se importa em rolar a tela para baixo ou para cima. O mesmo não pode ser dito sobre a rolagem horizontal, essa opção não deve ser considerada já que os usuários não estão habituados. Por esse motivo, a definição da distribuição do layout se relaciona principalmente com a largura da tela do dispositivo que pode ser utilizada para selecionar a melhor visualização entre as disponíveis.

Primeiro decidimos em quais larguras faremos os pontos de corte, estabelecendo o número de estruturas necessárias, que será o número de pontos de corte + 1, em nosso exemplo, três estruturas serão criadas.

A figura 4, abaixo, mostra as principais resoluções de telas do mercado e os nossos pontos de corte, break-points, que definem as 3 estruturas de exibição:

Assim como os pontos de corte, estabelecer as larguras mínima e máxima de exibição também é conveniente.

A largura mínima irá ajudar no planejamento das estruturas de visualização. Não adianta querer otimizar para larguras muito pequenas, abaixo de 320, se no mercado não existem, ou existem poucos, dispositivos com resolução menor.

Larguras muito grandes causarão dispersão visual cujo exemplo mais famoso é o da ‘primeira fila no cinema’, obrigando o deslocamento horizontal da cabeça para que se perceba toda a tela. O ideal é que essa percepção se dê apenas com o movimento dos olhos.

Referência significativa é dada a esse assunto no StackExchange que decidi seguir, fugindo nesse aspecto ao design do site da W3Schools, aumentando significativamente as larguras das colunas laterais.

Fontes

Para manter a escalabilidade, utilizar unidades fixas como pixel pode ser um problema. Adotando ‘em’ mantemos as relações com a fonte padrão, garantindo a proporcionalidade desejada, independentemente da fonte efetivamente utilizada pelo navegador.

O cálculo é simples, considerando a fonte Roboto, 16px como padrão, temos:

1440px = 90em, portanto 1px = 0,0625em. Resultando:

A correlação entre 1440px = 90em é totalmente empírica. Simplesmente, em um documento html qualquer, defina a fonte que irá utilizar e a largura máxima em em, entre no modo responsivo e descubra a equivalência em pixels. Utilize essa relação de forma direta, como mostrado na figura 5.

Imagens

Um ponto importante é a definição das imagens que serão utilizadas em cada estrutura de visualização. Embora as imagens sejam escaláveis, utilizar o mesmo tamanho para todos os dispositivos irá causar problemas de definição e/ou tempo de carregamento da página. O ideal é ter uma imagem para cada estrutura, ou ao menos, duas imagens com uma delas sendo reutilizada.

O Html possui atributos que permitem a seleção de imagens para essa finalidade, como veremos no desenvolvimento deste tutorial.

Medias Queries são regras em CSS aplicadas de acordo com critérios definidos pelo desenvolvedor, como por exemplo, alterar a apresentação da tela em função da largura do dispositivo de exibição da forma mostrada na figura 8, acima.

Executando o mesmo arquivo que vimos anteriormente, sem empregarmos as medias queries, o aspécto da página não se altera (figura 9).

Verifique o comportamento sem a utilização deste recurso, executando o arquivo neste link.