Há alguns anos, era relativamente fácil projetar e construir sites. Os sites eram mais simples e eram vistos em desktops e laptops com pouca variação nos tamanhos de tela. Hoje, com dispositivos móveis ocupando o tempo de navegação dos espectadores, um site pode ser visto em uma tela de smartphone de 4,8 ”, um phablet de 5”, um tablet de 7 ”ou qualquer tamanho entre eles.
Então, como você garante que seu website seja exibido corretamente em todos os tipos de dispositivos e tamanhos de tela?
A solução foi proposta pela primeira vez por Ethan Marcotte, quando ele explorou maneiras de tornar os designs de sites responsivos, ou seja, alterá-los de acordo com o tamanho da tela. Um design de site responsivo é aquele que faz uso inteligente de CSS para garantir que as páginas da Web sejam bem distribuídas em uma ampla variedade de tamanhos de tela - sem recorrer ao redirecionamento de URL ou dinamicamente a diferentes códigos HTML e CSS, dependendo do UserAgent. Não é realmente uma tecnologia ou um padrão, mas sim um conjunto de princípios de design que ajudam a alcançar o resultado.
Nos últimos anos, muitos modelos responsivos, frameworks CSS e temas WordPress surgiram. É, por exemplo, possível criar um site responsivo no WordPress sem escrever uma única linha de código.
Mas um web designer real não está satisfeito apenas em usar os modelos. Ela fará o esforço para entender os elementos do design da Web responsivo, a fim de usá-los de maneira eficaz.
Então hoje, vamos olhar para as 3 técnicas fundamentais que você precisa dominar, você será um designer responsivo eficaz.
As consultas de mídia permitem projetar diferentes layouts para diferentes tipos de mídia, como tela, impressão, TV, dispositivos portáteis, etc. Dependendo do tipo de mídia, você pode configurar o estilo, a fonte e outros elementos da página.
Introduzidas em CSS3, as consultas de mídia permitem que um designer personalize a apresentação do conteúdo para se adequar a um intervalo específico de tipos de dispositivos de saída. Eles consistem em uma declaração de tipo de mídia e uma ou mais expressões de recurso de mídia que são avaliadas como verdadeiras ou falsas.
A variedade de tipos de mídia inclui portátil, tela, tv, impressão e projeção. Os recursos de mídia incluem, mas não se limitam a, altura, largura e proporção do dispositivo, resolução, índice de cor, altura e largura da janela do navegador.
Vamos dar um exemplo básico; imagine que você queira que seu tamanho de texto diminua em dispositivos menores, como telefones. A consulta para isso seria algo como:
p {font-size:1em;}@media all and (max-width:400px) {p {font-size:0.8em;}}Agora, o tamanho da fonte de seus parágrafos será definido como 1em, a menos que a largura do navegador seja menor que 400px, caso em que diminuirá para 0.8em.
Na minha experiência, a melhor maneira de criar um layout responsivo é primeiro criar uma folha de estilos mestre padrão com os principais elementos estruturais. Em seguida, você pode adicionar consultas de mídia para personalizar elementos com base no layout ou em outros elementos do dispositivo. Se for mais do que um punhado de regras, talvez seja melhor movê-las para uma planilha separada - que você pode carregar seletivamente depois. Veja como isso funcionaria:
Essa parte do código verifica se o dispositivo é um dispositivo portátil no modo paisagem com largura de dispositivo menor que 720px e, em caso afirmativo, carrega a folha de estilo tablet_layout.css .
Observe que os recursos width, height, min / max-width e min / max-height se referem à largura e altura da janela do navegador. A largura e a altura do dispositivo são controladas pela largura do dispositivo, altura do dispositivo, largura mínima / máxima do dispositivo, altura mínima / máxima do dispositivo . Se você gostaria de procurar mais exemplos usando consultas de mídia O MDN tem uma boa rodada.
"Grade de fluido" é um termo usado para descrever um layout que é codificado em proporções relativas dos vários elementos, em vez de com valores de pixel fixos.
Os layouts CSS tradicionais usavam grades de largura fixa para posicionar os elementos. A abordagem de largura fixa não funciona mais hoje, agora que temos telas de dispositivos que variam de 3 polegadas a alguns pés. Em um projeto de grade fluida, tudo é codificado em termos de sua proporção relativa ao elemento de base, ou seja, em vez de especificar a altura e a largura de cada elemento; é dada uma porcentagem ou tamanho relativo.
Imagine que você tenha quatro colunas. Para fazer esse fluido, em vez de especificar cada um com 200 pixels de largura, você deve especificá-los em 0,2083% (ou seja, 200/960). Pelo menos, esse é o princípio. Criar uma grade totalmente fluida requer muito cuidado. É um daqueles casos raros que eu recomendaria usar ferramentas personalizadas. Grade Fluida Minúscula , Sistema de Grade Variável e Grade de linha de base fluida Existem algumas ótimas alternativas para escrever sua própria grade fluida a partir do zero.
As imagens são consideradas flexíveis quando a imagem é renderizada em tamanho nativo, contanto que o contêiner HTML a suporte, mas quando a janela do navegador diminui, a imagem é dimensionada para ajustá-la.
Mesmo que o restante do design seja fluido e responsivo, ele não será renderizado corretamente se todos os componentes não forem dimensionados. Isso pode ficar complicado com imagens e vídeos. Uma imagem com 700 pixels de largura ficará ótima em uma área de trabalho, mas será cortada quando visualizada em um tablet de 320 pixels. A maioria dos designs modernos e responsivos usam a propriedade CSS max-width para aumentar a escala das imagens. (Este método foi primeiro proposto por Richard Butler .)
img {max-width: 100%;}Essas poucas linhas garantem que a imagem não seja cortada, definindo a largura máxima da imagem para 100% do contêiner. Se a janela ou tela do navegador ficar menor, essa parte do código CSS diminuirá a imagem proporcionalmente. A altura é ajustada automaticamente, mantendo a taxa de proporção bloqueada.
Você pode, em vez disso, bloquear a imagem para ocupar uma determinada proporção de tela vertical como esta
img {max-height: 75%;}(Certifique-se de não usar as propriedades max-height e max-width juntas.)
O tamanho da imagem também pode ser vinculado ao tamanho do texto em vez do elemento pai usando em , assim:
img {width: 30em;}Se a imagem contiver texto, convém limitar o tamanho mínimo / máximo para garantir que o texto seja legível. Você pode especificá-lo assim:
img {width: 30em;max-width: 500px;min-width: 100px;}As mesmas técnicas podem ser usadas para escalar vídeos, por exemplo:
.video embed, .video object, .video iframe { width: 100%; height: auto; }O design responsivo é o futuro da nossa indústria, mas com tantas técnicas diferentes voando por aí, muitas vezes é difícil acompanhar. Domine estas 3 técnicas simples, e você será 90% do caminho para ser um designer responsivo.
Imagem em destaque / miniatura, imagem elástica via Shutterstock.