Desde o início, a World Wide Web foi projetada para ser independente. Não importa qual hardware você tem. Não importa qual sistema operacional seu dispositivo esteja executando. Se você puder se conectar à Internet, a World Wide Web estará acessível.
Nos primórdios da Web, a maioria das pessoas usava computadores desktop. Atualmente, a Web está disponível em computadores, laptops, tablets, smartphones dobráveis, geladeiras e carros. As pessoas esperam, com razão, que os sites tenham uma boa aparência, independentemente do dispositivo usado. O design responsivo possibilita isso.
O design responsivo não é a primeira abordagem para projetar sites. Nos anos anteriores ao design responsivo, web designers e desenvolvedores tentaram muitas técnicas diferentes.
Design de largura fixa
No início dos anos 1990, quando a Web estava se tornando popular, a maioria dos monitores tinha dimensões de tela de 640 pixels de largura por 480 pixels de altura. Eles eram tubos de raios catódicos convexos, não como as telas planas de cristal líquido que temos agora.
No início do Web design, era uma aposta segura projetar 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 Web designs mudaram de acordo. 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 por 768 se tornou o padrão. Parecia uma corrida armamentista entre web designers e fabricantes de hardware.
Seja 640, 800 ou 1024 pixels, escolher uma largura específica para projetar foi chamado de design de largura fixa.
Se você especificar uma largura fixa para o layout, seu layout só ficará bom nessa largura específica. Se um visitante do seu site tiver uma tela maior do que a largura que você escolheu, haverá desperdiçar espaço na tela. Você pode centralizar o conteúdo das páginas para distribuir esse espaço de maneira mais uniforme (em vez de ter espaço vazio de um lado), mas ainda não aproveitaria plenamente 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 caberá horizontalmente. 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 torná-los 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 se parece apenas com um tamanho específico.
Esses eram chamados de layouts líquidos. Embora um layout líquido pareça bom em várias larguras, ele vai 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 reduzir esses problemas usando min-width e max-width no layout.
No entanto, em qualquer tamanho abaixo da largura mínima ou acima da largura máxima, você tem os mesmos problemas que teria com um layout de largura fixa.
Em telas widescreen, o espaço não utilizado seria 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 liquid (liquid) é apenas um dos termos usados para descrever esse tipo de layout. Esses tipos de designs também eram chamados de layouts fluidos ou flexíveis. A terminologia era tão fluida quanto a técnica.
Telas pequenas
No século 21, a web continuou a crescer cada vez mais. Assim como os monitores. Mas chegaram novas telas menores do que qualquer computador. Com a chegada dos celulares com navegadores da web completos, os designers enfrentaram um dilema. Como ele pode garantir que os designs tenham uma boa aparência em um computador desktop e em um celular? A empresa precisava de uma maneira de estilizar o conteúdo em telas de até 240 pixels de largura e de milhares de pixels.
Sites diferentes
Uma opção é criar um subdomínio separado para visitantes que usam dispositivos móveis. No entanto, você precisa manter duas bases de código e designs separados. Para redirecionar visitantes em dispositivos móveis, você precisaria fazer interceptação de user agent, que pode não ser confiável e facilmente falsificar. O Chrome vai descontinuar a string do user agent por motivos de privacidade. Além disso, não há uma linha clara entre celular e não móvel. Para qual site você envia os tablets?
Layouts adaptáveis
Em vez de ter sites separados em subdomínios diferentes, você poderia ter um único site com dois ou três layouts de largura fixa.
Quando as consultas de mídia chegaram pela primeira vez ao CSS, elas abriram a porta para tornar os layouts mais flexíveis. Mas 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 pareciam bons em alguns tamanhos diferentes, mas o design nunca parecia muito bom quando visto 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.
Usando consultas de mídia CSS, você pode fornecer às pessoas o layout mais próximo da largura do navegador. Mas, devido à variedade de tamanhos de dispositivo, é provável que o layout não seja perfeito para a maioria das pessoas.
Web design responsivo
Se os layouts adaptáveis forem uma combinação de consultas de mídia e layouts de largura fixa, o Web design responsivo será uma combinação de consultas de mídia e layouts líquidos.
O termo foi cunhado por Ethan Marcotte em um artigo da 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 funcionam bem em qualquer dispositivo. Mas havia um problema.
Um elemento meta para viewport
Os navegadores em celulares tinham que lidar com sites que eram projetados com layouts de largura fixa para telas mais largas. Por padrão, os navegadores móveis presumiram 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 aplicaria uma largura de 980 pixels e, em seguida, ajustaria a página renderizada à largura real da tela.
Se usar um design responsivo, você precisará dizer ao navegador para não fazer esse escalonamento.
É possível fazer isso com um elemento meta no head da página da Web:
<meta name="viewport" content="width=device-width, initial-scale=1">
Há dois valores, separados por vírgulas.
A primeira é width=device-width.
Isso diz ao navegador para presumir que a largura do site é a mesma do dispositivo
(em vez de presumir que a largura do site é de 980 pixels).
O segundo valor é initial-scale=1.
Isso informa ao navegador qual o tamanho do escalonamento necessário.
Com um design responsivo, você não quer que o navegador faça nenhum escalonamento.
Com esse elemento meta, suas páginas da Web estarão prontas para serem responsivas.
Design responsivo moderno
Hoje, é possível criar sites responsivos que vão muito além dos tamanhos da janela de visualização.
Os recursos de mídia dão aos desenvolvedores acesso às preferências do usuário e permitem experiências personalizadas.
As consultas em contêineres permitem que os componentes tenham as próprias informações responsivas.
O elemento picture permite que os designers tomem decisões sobre a direção da arte com base nas proporções da tela.
Teste seu conhecimento
Teste seus conhecimentos sobre Web design responsivo
Em 2021, seria seguro criar páginas da Web com largura fixa?
Layouts líquidos geralmente têm dificuldades em que tipos de tamanhos de tela?
Quais são os três critérios originais para o design responsivo?
O design responsivo é um mundo de possibilidades empolgante e crescente. No restante deste curso, você aprenderá sobre essas tecnologias e como usá-las para criar aplicativos sites responsivos para todos.