Princípios de Web Design Responsivo

Hoje em dia, é prática comum construir um site ou aplicativo que ajusta sua interface de usuário dependendo do navegador ou dispositivo. Existem duas abordagens para atingir esse objetivo. O primeiro envolve a criação de diferentes versões de seu site ou aplicativo para diferentes dispositivos. Mas é ineficiente e pode levar a erros imprevisíveis.

Em uma busca por uma abordagem confiável e preparada para o futuro, o design responsivo - ou adaptativo - foi cunhado. Ele se concentra na construção de uma única versão de seu layout que se adapta a diferentes navegadores ou dispositivos automaticamente.

Neste artigo, aprenderemos sobre web design responsivo e os princípios fundamentais que o ajudarão a fazer um site incrível.

Ingredientes de Web Design Responsivo

Web design responsivo não é tão complicado quanto parece. É um conjunto de práticas que você pode usar ao escrever CSS, não uma tecnologia separada que você terá que aprender do zero. Você já pode estar seguindo vários desses princípios sem perceber. Você pode entender o web design responsivo explorando seus quatro ingredientes: layouts fluidos, unidades responsivas, imagens flexíveis e consultas de mídia.

Layouts fluidos

Com um layout fluido, você pode criar páginas da web que se adaptam à largura e altura da viewport atual. A prática comum inclui o uso do largura máxima propriedade em vez de dar uma largura fixa a um elemento. Além disso, usando a porcentagem (%), altura da janela de visualização (vh) ou largura da janela de visualização (vw) ajuda a melhorar a adaptabilidade que não é possível com pixels (px). Então, da próxima vez que você estiver construindo um layout, certifique-se de introduzir essas pequenas mudanças e comece a se beneficiar das técnicas de design responsivo.

Unidades Responsivas

Conforme você muda para um CSS mais avançado, frequentemente verá o uso de rem e em unidades de comprimento em vez de px unidades. Isso ocorre porque o rem unidade torna super fácil dimensionar todo o layout. Por padrão, 1rem é igual a 16px porque é proporcional ao o tamanho da fonte do elemento, normalmente 16px. No entanto, você pode definir 1rem igual a 10px (ou qualquer outro valor) para cálculos mais fáceis, ajustando o tamanho da fonte de nível superior.

Imagens Flexíveis

As imagens são uma preocupação primordial ao projetar até mesmo o layout mais básico. Você sempre deve tomar cuidado para dimensioná-los corretamente para que se encaixem no design. Além disso, por padrão, eles não são redimensionados com as mudanças na janela de visualização. Então, você deve usar % para as dimensões de suas imagens, junto com o largura máxima propriedade.

Você pode dar vida a sites responsivos usando consultas de mídia. As grades fluidas são boas para começar, mas você descobrirá que existem alguns pontos onde o layout começa a quebrar. Adicionar pontos de interrupção para essas larguras de viewport ajusta o layout para diferentes dispositivos. As consultas de mídia ajudam a aplicar CSS seletivamente com base nos resultados dos testes de recursos de mídia. Você pode explorar novos Recursos CSS para fazer um site responsivo em menos tempo.

Princípios de Web Design Responsivo

Embora o design responsivo da Web seja um salvador quando se trata de problemas com várias telas, você pode não ter uma restrição física fixa a que se referir. Portanto, existem seis princípios básicos de web design responsivo para começar ao projetar um layout responsivo.

Use pontos de interrupção baseados em conteúdo

Um dos princípios fundamentais do design afirma que o design do seu site deve apoiar o conteúdo, e não o contrário. O conteúdo de mídia, como vídeos, fotografias e conteúdo de texto, como uma cópia longa e curta da web, deve ser renderizado de maneira ideal em todas as telas. A chave para um web design responsivo é usar pontos de interrupção baseados em conteúdo, em vez de baseados em dispositivo.

Escolha Web Fonts e System Fonts com sabedoria

As fontes da Web parecem impressionantes! Você tem várias opções para modificar seu design com fontes da web de aparência bacana. Mas você deve saber que os navegadores precisarão baixar cada fonte da web. Mais fontes da web, mais tempo de download. Em contraste, as fontes do sistema são extremamente rápidas. Se o usuário não tiver uma fonte nomeada do sistema em seu dispositivo local, ele voltará para a próxima fonte em a pilha da família de fontes. Portanto, certifique-se de considerar o tempo de carregamento e a demanda de design ao escolher as fontes.

Otimize imagens e vetores de bitmap

Você tem ícones diferentes em seu site, apoiando o conteúdo? Muitas vezes, é uma boa prática usar um formato de bitmap se seus ícones tiverem muitos detalhes. Por outro lado, os formatos vetoriais são a melhor opção para ícones que aumentam e diminuem de maneira satisfatória. Os vetores costumam ser minúsculos, mas a desvantagem é que alguns navegadores mais antigos podem não suportá-los. Além disso, há casos em que os vetores são mais pesados ​​do que os bitmaps, como quando a imagem é muito detalhada. Portanto, certifique-se sempre de otimizar suas imagens de bitmap e vetores antes que fiquem on-line.

Conduzir testes para a primeira dobra responsiva

A primeira dobra de um site é a exibição que os visitantes veem quando ele é carregado pela primeira vez, antes de qualquer rolagem. Muitas vezes inclui uma seção de herói com um barra de navegação responsiva, cópia introdutória e mídia e um CTA. A capacidade de resposta não se limita apenas a dispositivos móveis. Você deve considerar tablets, consoles de jogos e outras telas também. Portanto, a chave é realizar testes frequentes, pelo menos para a primeira visualização do site. Você pode usar o Chrome DevTools (Farol) para testar a qualidade da página da web.

Não esconda o conteúdo em telas menores

Muitas pessoas costumavam presumir que os usuários móveis estão sempre com pressa, procurando informações pequenas, enquanto os usuários de desktop procuram mais conteúdo de formato longo. Agora reconhecemos que isso não é verdade no mundo de hoje. As pessoas estão usando dispositivos móveis em todos os lugares, em busca de conteúdo completo e acesso total a todos os serviços. Você deve garantir que, em vez de ocultar o conteúdo, esteja gerenciando o layout e os pontos de interrupção para apresentá-lo da maneira mais fácil e fácil possível.

Gerenciar o layout usando objetos aninhados

Construir um layout de site e posicionar os elementos corretamente exige uma quantidade razoável de esforço. Você também pode ter tido dificuldade em gerenciar muitos elementos que dependem uns dos outros. Portanto, você deve considerar envolver os elementos relacionados em um contêiner ou. Isso ajuda a reduzir a tarefa de fazer o layout de vários elementos a um em que você está fazendo o layout de apenas um único elemento.

Design responsivo: você deve escolher primeiro o desktop ou os dispositivos móveis?

A primeira abordagem da área de trabalho significa que você escreverá CSS para telas grandes e, em seguida, aplicará consultas de mídia para reduzir o design para telas menores. Em contraste, a primeira abordagem móvel envolve escrever CSS para dispositivos móveis, com telas menores, e depois aplicar consultas de mídia para expandir o design para telas maiores. O foco principal é reduzir o site e os aplicativos ao essencial.

Se você está apenas começando com o desenvolvimento da web responsivo, você deve ir para a área de trabalho primeiro abordagem, pois no final do dia, você terá que empilhar o contêiner um após o outro no celular dispositivos. Embora seja uma decisão totalmente pessoal, a primeira abordagem móvel ajuda você a estruturar o HTML de uma maneira melhor, enquanto a abordagem que prioriza a área de trabalho o ajudará com o layout e espaçamento técnicas.

Os 6 principais cursos para aprender design UX

Se você está procurando aprender design UX ou melhorar suas habilidades, aqui estão os seis melhores cursos online que você pode fazer.

Leia a seguir

Sobre o autor