Programação Web 2

Web Design Responsivo

Prof. Me. Danilo Bueno

Antes do Design Responsivo

• Web designers e devs tentaram diferentes técnicas
• Design de largura fixa (Fixed-witdh design)

Problema

• Se mudar o tamanho da tela, o design quebra

Responsive Web Design

• http://www.alistapart.com/
• em 25 de maio de 2010
• Ethan Marcotte com o título "Responsive Web Design"

"O controle que os designers têm no meio impresso e, muitas vezes, desejam ter no meio web, é simplesmente um reflexo da limitação da página impressa”

Exemplos

• https://www.dropbox.com/
• https://www.smashingmagazine.com/
• https://dribbble.com/
• https://github.com/
• https://www.shopify.com/

O problema das telas mobile

• Antes do RWD, os navegadores mobile tentavam "espremer" sites de desktop na tela do celular.
• Eles presumiam que a tela tinha 980 pixels de largura e aplicavam um "zoom out" artificial.
• O resultado? Textos minúsculos e links impossíveis de clicar com o dedo.
• Precisamos avisar o navegador para não fazer esse redimensionamento automático.

#

A Tag Meta Viewport

SEMPRE inclua esta tag no <head> do seu HTML antes de começar a fazer um design responsivo.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

• width=device-width: Diz ao navegador para assumir que a largura do site é exatamente igual à largura física da tela do dispositivo (ignorando os 980px falsos).
• initial-scale=1.0: Define o nível de zoom inicial. Diz ao celular para renderizar a página em 100% do seu tamanho real.

O tripé do RWD

• Layouts Fluídos
• Mídias Fluídas
• Media queries

Layouts fluídos

• Consiste em não usar medidas absolutas
• Importante saber sobre as unidades de dimensionamento

Introdução

• Imagine construir uma casa sem definir o tamanho dos cômodos. Ficaria bagunçado, né?
• Na Web, controlar o tamanho dos elementos é essencial para criar layouts organizados e esteticamente agradáveis.

O CSS (Cascading Style Sheets) é a linguagem que nos permite estilizar os elementos HTML, incluindo o controle de tamanho.

Números

• Os números são usados para definir algumas propriedades CSS, tais como opacity, line-height.
  • inteiros e decimais sem unidade (1, 2, 3, 100, 0.1, 0.2)
• Os números têm significado dependendo do contexto.
• Um número (sem unidade) representa uma proporção

p {
  font-size: 24px;
  line-height: 1.5;
}

Unidades Absolutas

• As unidades absolutas são fixas, ou seja, não se adaptam ao tamanho da tela ou do conteúdo.
• São mais previsíveis e úteis principalmente para materiais impressos.
  • px (pixels): 1 px é a menor unidade de medida em CSS, frequentemente usada para tamanhos pequenos e precisos.
  • cm (centímetros), mm (milímetros), in (polegadas), pt (pontos): Outras unidades raramente usadas em ambientes digitais, mas úteis em contextos de impressão.

Unidades Absolutas

• Exemplo

<header>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Unidades Absolutas

• Exemplo

header {
  background-color: orangered;
  width: 600px;
}

ul {
  display: flex;
  justify-content: space-around;
  list-style-type: none;
  padding: 10px;
}

Unidades Relativas

• Diferente dos pixels (px), as unidades relativas não são fixas. Elas se adaptam e reagem ao contexto.
• São essenciais para a criação de layouts responsivos (RWD).
• Para facilitar o entendimento, podemos dividi-las em três grandes grupos:

Unidades Relativas

1. Proporção (Espaço): - Calculadas com base nas dimensões do elemento "pai". Exemplo: % (Porcentagem).

2. Tipografia (Texto): - Calculadas com base no tamanho da fonte atual ou da raiz do documento.
   Exemplos: em, rem, ch.

3. Viewport (Janela/Tela): - Calculadas com base no tamanho exato da tela do dispositivo do usuário. Exemplos: vw, vh.

Relativas a Largura do Pai

• Porcentagem (%)
• Importante saber como é calculada
• width é calculado como uma porcentagem da largura do elemento pai.

.pai {
  width: 600px;
}

.filho {
  width: 50%;
}

Relativas ao Texto

• em: Baseado no tamanho da fonte do elemento. Se a fonte do elemento pai é 16px, 2em seria 32px.
• rem: Baseado no tamanho da fonte do elemento raiz (html). Se o tamanho da fonte raiz for 16px, 2rem seria 32px.
• ch: Baseado na largura do caractere "0" da fonte atual.

Unidade: em

Exemplo

.pai {
  font-size: 10px;
}

.filho {
  font-size: 2em;
  padding: 2em;
}

A "pegadinha" do em

• O em é poderoso, mas tem um comportamento que confunde: o Efeito Composto.
• Ele muda de referência dependendo de onde é usado!
  • No font-size: Olha para o tamanho da fonte do pai.
  • No padding, margin ou width: Olha para o tamanho da fonte do próprio elemento.

A Pegadinha da Unidade: em

Acompanhe a matemática do navegador:

.pai {
  font-size: 10px;
}

.filho {
  font-size: 2em; /* 2 * 10px (do pai) = 20px */
  padding: 2em;   /* 2 * 20px (do próprio filho) = 40px */
}

Atenção: Esse efeito bola de neve é o motivo pelo qual o mercado atual evita usar em para espaçamentos complexos.

A Solução: A Unidade "rem"

• O "r" vem de Root (Raiz).
• Ele ignora o tamanho da fonte dos elementos "pais" e olha sempre e unicamente para o html (a raiz do documento).
• É a unidade favorita do mercado para responsividade, pois é previsível e não vira uma bola de neve.

Unidade: rem

html {
  font-size: 10px; /* A Raiz */
}

.pai {
  font-size: 2rem; /* 2 * 10px (da raiz) = 20px */
}

.filho {
  font-size: 2rem; /* 2 * 10px (da raiz) = 20px */
  padding: 2rem;   /* 2 * 10px (da raiz) = 20px */
}

Relativas ao viewport

• vw (viewport width): 1% da largura da janela do navegador.
• vh (viewport height): 1% da altura da janela do navegador.

Exemplo

div {
  width: 50vw; /* 50% da largura da janela */
  height: 50vh; /* 50% da altura da janela */
}

Mídias Fluídas

• Costumam ser feitas de um número fixo de pixel.
• Costumam ser vilãs de um design fluído
• Solução mais simples:
• Usar a propriedade max-width na imagem com 100%

img {
  max-width: 100%;
}

Essa solução indica que as imagens podem ter qualquer largura até no máximo 100%, porém existem diversas soluções!

Mídias Fluídas

• SVG (Scalable Vector Graphics)
• Exemplo

Exemplo

<div>
  <img
    src="https://uploads.jovemnerd.com.br/wp-content/uploads/2022/02/john-dimaggio-bender-futurama-serie.jpg"
    alt="bender"
  />
</div>

<div>
  <img
    src="https://uploads.jovemnerd.com.br/wp-content/uploads/2022/02/john-dimaggio-bender-futurama-serie.jpg"
    class="img-responsive"
    alt="bender"
  />
</div>

Exemplo Midias Fluidas

Media queries

• Utilizar condições no CSS
• Ao usar as media queries o design pode se ajustar de acordo com algumas características do dispositivo
  • orientação, largura, etc..
• As condições são chamadas de media features
• Sintaxe:

@media (feature: value) {
}

Media features: orientation

• Vamos imaginar que você quer aplicar diferentes estilos de acordo com a orientação do dispositivo:
• paisagem (landscape) : a largura da viewport é maior do que a sua altura
• retrato (portrait): a altura da viewport é maior que a sua largura

@media (orientation: landscape) {
  /* estilos para o modo paisagem */
}
@media (orientation: portrait) {
  /* estilos para o modo retrato */
}

Exemplo orientation

@media (orientation: landscape) {
  .paisagem {
    display: flex;
  }
  .retrato {
    display: none;
  }
}

@media (orientation: portrait) {
  .paisagem {
    display: none;
  }
  .retrato {
    display: flex;
  }
}

Medias features: min-width

• Para aplicar estilos quando a janela do navegador for maior que uma certa largura, use min-width.

• Exemplo min-width

@media (min-width: 420px) {
  /* Aplica estilos para janelas mais */
  /*  largas que 420 pixels; */
}

@media (width >= 420px) {
  /* Forma mais nova de escrita */
}

Medias features: max-width

• Para aplicar estilos quando a janela do navegador for menor que uma certa largura, use max-width.

• Exemplo

@media (max-width: 420px) {
  /* Aplica estilos para janelas mais */
  /*  estreitas que 420 pixels; */
}

@media (width <= 420px) {
  /* Forma mais nova de escrita */
}

Exemplo: layout

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <header>header green</header>
    <main>
      <section>section red</section>
      <aside>aside blue</aside>
    </main>
    <footer>footer yellow</footer>
  </body>
</html>

Exemplo: layout

main {
  display: flex;
}

aside {
  flex-grow: 1;
}

@media (width <= 568px) {
  main {
    flex-direction: column;
  }
}

Exemplo: nav sticky

nav {
  background-color: red;
  height: 5rem;
}

@media (height >= 30rem) {
  nav {
    position: sticky;
    top: 0;
  }
}

Exemplo: dark mode

body {
  background-color: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

Estratégias de Responsividade

Agora que o celular está lendo o tamanho correto, como devemos escrever nosso CSS? Do menor para o maior, ou do maior para o menor?

Existem duas abordagens principais no mercado:

1. Desktop First (A abordagem tradicional)
2. Mobile First (O padrão moderno)

Desktop First

• O CSS "fora" das media queries é focado no computador.
• Conforme a tela diminui, você usa @media (max-width) para "quebrar", esconder ou empilhar o layout.

/* Padrão: Computador (ex: lado a lado) */
main { display: flex; flex-direction: row; }

/* Exceção: Telas menores que 768px (Celulares) */
@media (max-width: 768px) {
  main { flex-direction: column; }
}

Mobile First

• O CSS "fora" das media queries é focado no celular (mais simples e empilhado).
• Conforme a tela cresce, você usa @media (min-width) para adicionar complexidade (colunas, menus elaborados).

/* Padrão: Celular (ex: empilhado) */
main { display: flex; flex-direction: column; }

/* Exceção: Telas maiores que 768px (Tablets/PCs) */
@media (min-width: 768px) {
  main { flex-direction: row; }
}

Obrigado!

[email protected] · website/docs · github