Os sites nem sempre foram tão adaptáveis como são hoje. Para os designers modernos , a “responsividade” é um dos fatores mais significativos para definir um bom design. Afinal, agora estamos atendendo a uma série de usuários que frequentemente alternam entre dispositivos móveis e desktops com tamanhos de tela variados.
No entanto, a mudança para o design responsivo não aconteceu da noite para o dia. Durante anos, aprimoramos o conceito de “design responsivo da web” para chegar ao estágio em que estamos hoje.
Hoje, vamos dar uma olhada mais de perto na história do web design responsivo.
Onde o Web Design começou?
Quando os primeiros sites foram criados, ninguém estava preocupado com a capacidade de resposta em uma variedade de telas. Todos os sites foram projetados para se adequarem aos mesmos modelos, e os desenvolvedores não gastaram muito tempo em conceitos como design, layout e tipografia.
Mesmo quando começou a adoção mais ampla da tecnologia CSS, a maioria dos desenvolvedores não precisava se preocupar muito em adaptar o conteúdo a diferentes tamanhos de tela. No entanto, eles ainda encontraram algumas maneiras de trabalhar com diferentes tamanhos de monitor e navegador.
LAYOUTS LÍQUIDOS
As duas principais opções de layout disponíveis para os desenvolvedores nos primeiros dias eram de largura fixa ou layout líquido.
Com layouts de largura fixa, era mais provável que o design quebrasse se o monitor não tivesse exatamente a mesma resolução daquele em que o site foi projetado. Você pode ver um exemplo aqui .
Alternativamente, layouts líquidos , cunhados por Glenn Davis, foram considerados um dos primeiros exemplos revolucionários de web design responsivo.
Os layouts líquidos podem se adaptar a diferentes resoluções de monitores e tamanhos de navegadores. No entanto, o conteúdo também pode transbordar e o texto frequentemente quebra em telas menores.
LAYOUTS DEPENDENTES DE RESOLUÇÃO
O layout dependente de resolução basicamente funcionava como uma versão inicial dos pontos de interrupção CSS, antes que eles existissem. A desvantagem foi que os desenvolvedores tiveram que criar diferentes folhas de estilo para cada resolução de destino e garantir que o JavaScript funcionasse em todos os navegadores.
Com tantos navegadores a serem considerados na época, o jQuery tornou-se cada vez mais popular como uma forma de abstrair as diferenças entre as opções do navegador.
A ASCENSÃO DOS SUBDOMÍNIOS MÓVEIS
A introdução de conceitos como designs dependentes de resolução estava acontecendo mais ou menos na mesma época em que muitos dispositivos móveis estavam se tornando mais habilitados para a Internet. As empresas estavam criando navegadores para seus smartphones e, de repente, os desenvolvedores também precisavam considerar isso.
Embora os subdomínios móveis tenham como objetivo oferecer aos usuários exatamente as mesmas funções que eles obteriam de um site de desktop em um smartphone, eles eram aplicativos totalmente separados.
Ter um subdomínio móvel, embora complexo, trouxe alguns benefícios, como permitir que os desenvolvedores segmentassem especificamente o SEO para dispositivos móveis e direcionassem mais tráfego para variações de sites móveis. No entanto, ao mesmo tempo, os desenvolvedores precisavam gerenciar duas variações do mesmo site.
Na época em que a Apple tinha acabado de lançar seu primeiro iPad, inúmeros web designers ainda dependiam dessa estratégia antiquada e desajeitada para permitir o acesso a um site em todos os dispositivos. No final dos anos 2000, os desenvolvedores muitas vezes dependiam de vários truques para tornar os sites móveis mais acessíveis. Por exemplo, mesmo layouts simples usaram o truque max-width: 100% para imagens flexíveis.
Felizmente, tudo começou a mudar quando Ethan Marcotte cunhou o termo “Responsive Web Design” em A List Apart . Este artigo chamou a atenção para a exploração de princípios de arquitetura de web design de John Allsopp e abriu o caminho para sites completos, capazes de funcionar tão bem em qualquer dispositivo.
Uma Nova Era de Web Design Responsivo
O artigo de Marcotte apresentou três componentes cruciais que os desenvolvedores precisariam considerar ao criar um site responsivo: grades fluidas, consultas de mídia e imagens flexíveis.
REDES FLUIDAS
O conceito de grades fluidas introduziu a ideia de que os sites devem ser capazes de adotar uma variedade de colunas flexíveis que crescem ou diminuem dependendo do tamanho atual da tela.
Em dispositivos móveis, isso significava a introdução de uma ou duas colunas de conteúdo flexíveis, enquanto os dispositivos de desktop normalmente podiam mostrar mais colunas (devido ao maior espaço).
IMAGENS FLEXÍVEIS
As imagens flexíveis introduziram a ideia de que, assim como o conteúdo, as imagens devem ser capazes de crescer ou diminuir ao longo da grade fluida em que estão localizadas. Como mencionado acima, anteriormente, os desenvolvedores usaram algo chamado truque de “largura máxima” para habilitar isso.
Se você estivesse segurando uma imagem em um contêiner, ela poderia transbordar facilmente, principalmente se o contêiner fosse responsivo. No entanto, se você definir o “max-width” para 100%, a imagem será redimensionada com seu contêiner pai.
CONSULTAS DE MÍDIA
A ideia de “consultas de mídia” referia-se às consultas de mídia CSS, introduzidas em 2010, mas não amplamente adotadas até serem lançadas oficialmente como uma recomendação W3 2 anos depois. As consultas de mídia são essencialmente regras CSS acionadas com base em opções como tipo de mídia (impressão, tela etc.) e recursos de mídia (altura, largura etc.).
Embora fossem mais simples na época, essas consultas permitiram que os desenvolvedores implementassem essencialmente um tipo simples de ponto de interrupção – o tipo de ferramentas usadas no design responsivo hoje. Os pontos de interrupção referem-se a quando os sites alteram seu layout ou estilo com base na janela do navegador ou na largura do dispositivo.
As metatags de viewport precisam ser usadas na maioria dos casos para garantir que as consultas de mídia funcionem da maneira que os desenvolvedores de hoje esperam.
A ascensão do design mobile-first
Desde a introdução do Responsive Web Design por Marcotte , os desenvolvedores têm trabalhado em novas maneiras de implementar a ideia da maneira mais eficaz possível. A maioria dos desenvolvedores agora se divide em duas categorias, com base no fato de considerarem primeiro as necessidades do usuário do dispositivo desktop ou as necessidades do usuário do dispositivo móvel. A tendência está se acelerando cada vez mais para o último.
Ao projetar um site do zero em uma era de navegação mobile-first, a maioria dos desenvolvedores acredita que mobile-first é a melhor opção. Os designs para dispositivos móveis costumam ser muito mais simples e minimalistas, o que combina muito com as tendências do design da web atual.
Adotar a primeira rota móvel significa avaliar as necessidades do site a partir de uma perspectiva móvel primeiro. Você escreveria seus estilos normalmente, usando pontos de interrupção assim que começasse a criar layouts de desktop e tablet. Como alternativa, se você adotasse a abordagem de desktop em primeiro lugar, precisaria adaptá-la constantemente a dispositivos menores com suas opções de ponto de interrupção.
Explorando o futuro do web design responsivo
Web design responsivo ainda não é perfeito. Existem inúmeros sites por aí que ainda não oferecem a mesma experiência incrível em todos os dispositivos. Além disso, novos desafios continuam surgindo o tempo todo, como descobrir como projetar para novos dispositivos, como fones de ouvido AR e relógios inteligentes.