Introdução ao Design Responsivo

O Design Responsivo refere-se à abordagem de design web em que as páginas se adaptam automaticamente a diferentes tamanhos de tela e dispositivos, como smartphones, tablets e desktops. Ele permite que o conteúdo seja acessível e visualmente agradável em qualquer plataforma, sem a necessidade de criar versões diferentes para cada dispositivo.

Neste exemplo, usamos a meta tag viewport e media queries para tornar a página responsiva:

Layouts flexíveis - Multicolunas

Os Layouts Multicolunas são uma forma de dividir o conteúdo de uma página em várias colunas, utilizando a propriedade column do CSS. Isso é especialmente útil para textos longos ou conteúdos que você deseja dividir em seções verticais, semelhante a um layout de jornal.

Aqui, criamos um layout multicolunas onde o texto é dividido automaticamente em colunas. Se usarmos a propriedade column-count: 3; o texto fica em 3 colunas e seu tamanho muda com o tamanho da tela. enquanto que com a propriedade column-width: 200px; as colunas vão ter 200px de largura e a quantidade de colunas muda com o tamanho da tela.

Layouts flexíveis - Flexbox

O Flexbox é um modelo de layout CSS que facilita a criação de layouts flexíveis e adaptáveis. Ele organiza os elementos dentro de um contêiner em várias direções, facilitando o alinhamento e distribuição de espaço entre os itens.

Neste exemplo, usamos Flexbox para alinhar três caixas lado a lado, com ajuste automático de espaço entre elas.

O exemplo abaixo utilizou o Unsplash para baixar as imagens.

Layouts flexíveis - Grid

O CSS Grid Layout é um sistema de layout bidimensional que permite criar layouts complexos com facilidade. Ele oferece controle sobre as linhas e colunas, permitindo uma organização mais precisa dos elementos na página.

Este exemplo usa o Grid para criar a estrutura de uma página html.

Meta tag viewport

A meta tag viewport irá informar para os navegadores que eles devem utilizar a largura da janela do dispositivo para exibir a página web, fazendo com que os navegadores as redimensionem melhor, ajudando na responsividade.

• width=device-width: sobrescreve a configuração padrão dos navegadores para a largura da janela
• initial-scale: define zoom inicial da página
• height: define altura específica para a viewport
• minimum-scale: define o nível mínimo de zoom
• user-scalable: impede que o usuário aplique zoom na página caso tenha o valor definido como no.

Atenção: deve-se evitar o uso do minimum-scale; maximum-scale e user-scalable=no

Media Queries

Media Queries são uma técnica do CSS3 que permite aplicar estilos condicionais a uma página, dependendo das características do dispositivo, como a largura da tela, altura, ou orientação.

A estrutura básica de uma media query consiste em utilizar a regra @media, especificando as condições para a aplicação do estilo, seguidas pelos estilos aplicados.

@media(at rule)

Regra usada para identificar o tipo de mídia que uma página está sendo visualizada, informando os recursos que esse tipo de mídia suporta e os operadores que podem ser combinados para misturar algumas condições.

Media Types

Media types definem o tipo de dispositivo ao qual a media query será aplicada. Os mais comuns são:

• all: corresponde a todos os dispositivos, é o default;
• print: corresponde a documentos que são uma pré-visualização de impressão, ou em qualquer mídia que será voltada para imprimir;

  @media print{
    body{
      background: black;
      color:white;
    }
  }

• screen corresponde a dispositivos com telas integradas;
• speech: corresponde a dispositivos que leem o conteúdo de forma audível, como um leitor de tela, por exemplo.

Media Features (Recursos de Mídia)

Media features são as características específicas do dispositivo, como largura, altura, resolução, orientação, entre outras. Elas são usadas dentro das media queries para aplicar estilos condicionalmente.

• min-width/min-height/max-width/ max-height/width/height : detecta a largura e altura da viewport.

  Exemplo: Transforma o flex-direction para column quando a largura for menor que 900px.

  @media screen and (max-width: 900px) {
    .container-example{
      flex-direction: column;
    }
  }

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat recusandae sunt at magni? Perferendis quaerat autem, porro modi dolores temporibus voluptate enim ipsum, voluptatem beatae eum corporis repellat tenetur voluptatum.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat recusandae sunt at magni? Perferendis quaerat autem, porro modi dolores temporibus voluptate enim ipsum, voluptatem beatae eum corporis repellat tenetur voluptatum.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat recusandae sunt at magni? Perferendis quaerat autem, porro modi dolores temporibus voluptate enim ipsum, voluptatem beatae eum corporis repellat tenetur voluptatum.

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat recusandae sunt at magni? Perferendis quaerat autem, porro modi dolores temporibus voluptate enim ipsum, voluptatem beatae eum corporis repellat tenetur voluptatum.
• orientation : detecta se o dispositivo está em modo retrato ou paisagem.
• hover : indica que a página está sendo acessada através de um mecanismo de ponteiro, como um mouse;
• pointer : detecta quão preciso é o ponteiro (grosso, fino, etc), ajudando a detectar touchscreen, mouse, etc.

Para saber mais sobre Media Queries acesse os links abaixo:

CSS Media Queries Guide

Using media queries

Operadores lógicos

Os operadores permitem combinar múltiplas condições em uma media query. Existem operadores como and, not, e only.

• and : deve atender a todas media features (recursos de mídia);
• or : deve atender, no mínimo, uma das media features (recursos de mídia). Pode colocar vírgula no lugar de or;
• nor : nega as condições aplicadas, invertendo todo o significado do media query.

As media queries podem ser aplicadas de três maneiras: no arquivo CSS, diretamente na tag <style> no HTML ou usando a tag <link> para carregar arquivos CSS específicos.

Exemplos:

Working with JavaScript Media Queries

Breakpoints

Breakpoints são os pontos em que o layout da página muda com base no tamanho da tela. Eles são usados para ajustar o design em diferentes dispositivos.

Devemos sempre usar as Media Queries?

Não é obrigatório usar media queries em todos os projetos, mas elas são uma ferramenta poderosa para garantir que o design funcione bem em vários dispositivos.

Design Acessível x Design Universal

“Um design acessível irá criar uma porta larga para as pessoas de cadeiras de rodas entrarem, enquanto um design universal irá produzir uma entrada onde qualquer um se entraria, desconsiderando suas habilidades.” Laura Kalbag

Imagens Responsivas

Imagens responsivas são ajustadas automaticamente para se adaptarem ao tamanho da tela. Isso pode ser feito com o uso de max-width ou srcset no HTML.

Deve-se usar sempre o max-width: 100% e não o width: 100%; para que o tamanho da imagem não ultrapasse seu tamanho original, o que prejudica a resolução.

img {
  max-width: 100%;
  display:block;
}

Exemplos:

Responsive images

Tipografias Responsivas

As tipografias responsivas ajustam seu tamanho com base na largura da tela. Podemos usar vw (view width) para dimensionar o texto conforme o tamanho da janela e rem para dimensionar em múltiplos do tamanho de fonte padrão do navegador.

O uso do vw sozinho para tamanho de fonte não é muito interessante, pois caso o usuário altere o tamanho da fonte padrão do navegador aquele texto não vai acompanhar.

h1 {
  font-size: calc(2rem + 5vw);
}

Mobile First

Mobile First é uma abordagem de design onde o layout e os estilos são primeiro definidos para dispositivos móveis, e depois se expandem para telas maiores com media queries.