Desde o início, a World Wide Web foi projetada para ser agnóstica. Não importa qual hardware você tenha. Não importa qual sistema operacional seu dispositivo está executando. Desde que você consiga se conectar à Internet, a World Wide Web está acessível para você.
No início da Web, a maioria das pessoas usava computadores desktop. Atualmente, a Web está disponível em computadores, laptops, tablets, telefones dobráveis, geladeiras e carros. As pessoas, com razão, esperam que os sites tenham uma boa aparência, independentemente do dispositivo usado. O design responsivo torna isso possível.
O design responsivo não é a primeira abordagem para criar sites. Nos anos antes do design responsivo, web designers e desenvolvedores experimentaram muitas técnicas diferentes.
Design com largura fixa
No início dos anos 1990, quando a Web ficou popular, a maioria dos monitores tinha dimensões de tela de 640 pixels de largura por 480 pixels de altura. Eram tubos convexos de raios cátodos, ao contrário das telas planas de cristal líquido que temos agora.
Nos primeiros dias de formação do web design, era uma aposta segura criar páginas da web com largura de 640 pixels. Mas enquanto outras tecnologias, como celulares e câmeras, estavam em miniatura, as telas estavam ficando maiores (e, eventualmente, mais planas). Em pouco tempo, a maioria das telas tinha dimensões de 800 por 600 pixels. Os designs da Web foram alterados adequadamente. Designers e desenvolvedores começaram a presumir que 800 pixels era um padrão seguro.
Então as telas ficaram maiores de novo. 1.024 x 768 se tornou o padrão. Parecia uma disputa entre web designers e fabricantes de hardware.
Seja com 640, 800 ou 1024 pixels, a escolha de uma largura específica para projetar foi chamada de design de largura fixa.
Se você especificar uma largura fixa para o layout, ele só terá uma boa aparência nessa largura específica. Se um visitante do site tiver uma tela mais larga do que a largura escolhida, haverá espaço desperdiçado na tela. É possível centralizar o conteúdo das páginas para distribuir esse espaço de maneira mais uniforme em vez de ter um espaço vazio de um lado, mas você não aproveitaria ao máximo o espaço disponível.
Da mesma forma, se um visitante chegar com uma tela mais estreita do que a largura escolhida, seu conteúdo não vai caber na horizontal. O navegador gera uma barra de rastreamento (o equivalente horizontal de uma barra de rolagem), e o usuário precisa mover a página inteira para a esquerda e para a direita para ver todo o conteúdo.
Layouts líquidos
Embora a maioria dos designers usasse layouts de largura fixa, alguns optaram por tornar os layouts flexíveis. Em vez de usar larguras fixas nos layouts, você pode criar um layout flexível usando porcentagens para as larguras das colunas. Esses designs funcionam em mais situações do que um layout de largura fixa, que só parece correto em um tamanho específico.
Esses eram chamados de layouts líquidos. Embora um layout líquido tenha uma boa aparência em várias larguras, ele começará a piorar nos extremos. Em uma tela ampla, o layout parece esticado. Em uma tela estreita, o layout parece comprimido. Ambos os cenários não são ideais.
É possível atenuar esses problemas usando min-width e max-width para o layout.
Mas, em qualquer tamanho abaixo da largura mínima ou acima da largura máxima, você terá os mesmos problemas de um layout de largura fixa.
Em uma tela ampla, haverá espaço não utilizado desperdiçado.
Em uma tela estreita, o usuário teria que mover a página inteira para a esquerda e para a direita para ver tudo.
A palavra líquido é apenas um dos termos usados para descrever esse tipo de layout. Esses tipos de designs também foram chamados de layouts fluidos ou flexíveis. A terminologia era tão fluida quanto a técnica.
Telas pequenas
No século XXI, a web continuou a crescer. Assim como os monitores. Mas chegou a hora de novas telas eram menores do que qualquer dispositivo desktop. Com a chegada dos celulares com navegadores da Web completos, os designers enfrentaram um dilema. O que ela poderia fazer para que os designs ficassem bem em um computador desktop e em um celular? Eles precisavam de uma maneira de personalizar o conteúdo para telas de até 240 pixels de largura e milhares de pixels de largura.
Sites diferentes
Uma opção é criar um subdomínio separado para os visitantes que usam dispositivos móveis. Mas você precisa manter duas bases de código e designs separados. E para redirecionar os visitantes em dispositivos móveis, você precisaria fazer a detecção do user agent, o que pode não ser confiável e facilmente falsificado. O Chrome descontinuará a string do user agent por motivos de privacidade. Além disso, não há uma linha clara entre dispositivos móveis e não móveis. Para qual site você envia tablets?
Layouts adaptáveis
Em vez de ter sites separados em subdomínios diferentes, você pode ter um único com dois ou três layouts de largura fixa.
Quando as consultas de mídia apareceram pela primeira vez no CSS, eles abriram a porta para tornar os layouts mais flexíveis. No entanto, muitos desenvolvedores ainda se sentiam mais à vontade para criar layouts de largura fixa. Uma técnica envolvia alternar entre alguns layouts de largura fixa em larguras especificadas. Algumas pessoas chamam isso de design adaptável.
O design adaptável permitiu que os designers fornecessem layouts que ficavam bons em alguns tamanhos diferentes, mas o design nunca parecia certo quando visualizado entre esses tamanhos. O problema do excesso de espaço persistia, embora não fosse tão ruim quanto em um layout de largura fixa.
Com consultas de mídia CSS, é possível fornecer às pessoas o layout mais próximo da largura do navegador delas. Mas, considerando a variedade de tamanhos de dispositivo, é provável que o layout não seja perfeito para a maioria das pessoas.
Web design responsivo
Se layouts adaptáveis são uma mistura de consultas de mídia e layouts de largura fixa, o Web design responsivo é uma mistura de consultas de mídia e layouts líquidos.
O termo foi cunhado por Ethan Marcotte em um artigo do A List Apart em 2010.
Ethan definiu três critérios para o design responsivo:
- Grades fluidas
- Mídia fluida
- Consultas de mídia
O layout e as imagens de um site responsivo funcionariam bem em qualquer dispositivo. Mas havia um problema.
Um elemento meta para viewport.
Navegadores em celulares precisavam lidar com sites projetados com layouts de largura fixa para telas mais largas. Por padrão, os navegadores de dispositivos móveis presumiam que 980 pixels era a largura para a qual as pessoas estavam projetando (e isso não estava errado). Portanto, mesmo que você use um layout líquido, o navegador vai aplicar uma largura de 980 pixels e redimensionar a página da Web renderizada até a largura real da tela.
Se você estiver usando o design responsivo, precisará informar ao navegador para não fazer esse dimensionamento.
Para isso, use um elemento meta no head da página da Web:
<meta name="viewport" content="width=device-width, initial-scale=1">
Existem dois valores, separados por vírgulas.
A primeira é width=device-width.
Isso informa ao navegador que a largura do site é igual à do dispositivo (em vez de presumir que a largura do site é de 980 pixels).
O segundo valor é initial-scale=1.
Isso informa ao navegador o quanto o dimensionamento deve ser feito.
Com um design responsivo, o navegador não precisa fazer nenhum dimensionamento.
Com esse elemento meta, suas páginas da Web estão prontas para serem responsivas.
Design responsivo moderno
Hoje, conseguimos criar sites responsivos de maneiras muito além dos tamanhos das janelas de visualização.
Os recursos de mídia dão aos desenvolvedores acesso às preferências dos usuários e permitem experiências personalizadas.
As consultas de contêiner permitem que os componentes sejam proprietários das próprias informações responsivas.
O elemento picture permite que os designers tomem decisões de direção de arte com base nas proporções da tela.
Teste seu conhecimento
Teste seus conhecimentos sobre web design responsivo
Em 2021, é seguro criar páginas da Web com largura fixa?
Os layouts líquidos geralmente têm dificuldade em que tipo de tamanhos de tela?
Quais são os três critérios originais para o design responsivo?
O design responsivo é um mundo empolgante e crescente de possibilidades. No restante deste curso, você aprenderá sobre essas tecnologias e como usá-las para criar sites bonitos e responsivos para todos.