Responsive Design

Introdução

Atualmente, a web é acessada de qualquer lugar, em qualquer dispositivo.

• Anos 90: PC/Desktop
• Anos 2000: Primeiros smartphones, navegação WAP
• 2007-Atualmente: iPhones, iPads, TVs, wearables, IoT

Responsive Web Design

Conceito que busca universalizar o acesso a páginas web

• Técnicas para melhoria da acessibilidade
• Foco em User Experience

Responsive Web Design

Baseia-se em três técnicas principais:

1. Grids Flexíveis
2. Media flexível
3. Media queries

Quer entender o potencial do design responsivo?? Veja em http://mediaqueri.es

Grids Flexíveis

Ideia: Mapear o espaço da página em um canvas independente da tela

• Ajuda a organizar o conteúdo da página
• Alinhamento/Padronização dos elementos da página
• Página possuirá mesmo aspecto, porém em dimensões diferentes

Grids Flexíveis: Passos

1. Definir tamanho do canvas
2. Alterar tamanho dos elementos para se tornarem relativos ao canvas
• Fontes em pontos (em)
• Elementos em percentual (%)

Grids Flexíveis -- Fontes

Para alterar o tamanho das fontes, primeiro define-se o tamanho padrão e então calcula-se o tamanho das demais fontes

          
body {
  background-color: #2A5D7F;
  color: #FFFFFF;
  font-size: 100%; /* tamanho padrão */
  font-family: Arial;
}
          
        

Grids Flexíveis -- Fontes

Definindo o tamanho proporcional das fontes:

              
h1 {
  font-size: 30px;
}
              
            

              
h1 {
  /* 16px / 30px = 1.875em */
  font-size: 1.875em;
}
              
            

Grids Flexíveis -- Elementos

Para alterar o tamanho dos elementos, deve-se definir qual vai ser o tamanho do canvas, e então definir o tamanho relativo de cada um dos elementos

Importante!! O tamanho dos elementos deve ser calculado com base em seu container

Grids Flexíveis -- Elementos

Definindo os tamanho dos elementos:

          
/* css que sera atribuido ao canvas */
#page {
  margin-top: 35px;
  margin-bottom: 35px;
  width: 90%; /* tamanho deve ser preferencialmente relativo */
}
          
        

Grids Flexíveis -- Elementos

Definindo o tamanho proporcional das fontes:

              
.main {
  width: 576px;
}

.insidemain {
  width: 432px;
}
              
            

              
.main {
  width: 60%; /* 576px / 960px */
}

.insidemain {
  width: 75%; /* 432px / 576px */
}
              
            

Grids Flexíveis -- Margins & Paddings

margin e padding devem respeitar seu próprio parentesco ao se calcular o tamanho relativo

              .element {
  width: 800px;
  padding: 40px;
}
.subelement {
  margin: 60px;
}
              
            

              .element {
  width: 800px;
  padding: 5%; /* 40/800 */
}
.subelement {
  margin: 7.5%; /* 60/800 */
}
              
            

Imagens Flexíveis

Elementos de media devem ser limitadas ao tamanho de seu container por padrão.

          
img, embed, object, video {
  max-width: 100%; /* restringe o tamanho da media ao seu container */
}
          
        

Media Queries

Media Queries é um recurso presente no CSS3 que permite definir um estilo com base em características físicas do dispositivo

Desenvolvedor informa o tipo de media e uma determinada restrição. O navegador então valida os parâmetros da media query no momento da renderização.

Media Queries

          
/* Estilo aplicado para telas maiores que 1024px de largura*/            
@media screen and (min-width: 1024px) {
  body {
    font-size: 100%;
  }
}
          
        

Media Queries

Media queries podem ser aplicadas tanto em CSS quanto em HTML

          <link rel="stylesheet" href="desktop.css" media="screen and (min-width: 1024px)"  />
          
        

          @media screen and (min-width: 1024px) {
  /* ... */
}
          
        

Sidebar: A propriedade viewport

Alguns aparelhos renderizam a página em uma resolução diferente de seu tamanho.

Resultado: Muitas das media queries criadas não funcionavam nos aparelhos

Sidebar: A propriedade viewport

Solução: Inserir uma meta tag para verificar qual dimensão deverá ser carregada

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

Referências

Responsive Web Design, Ethan Marcotte, A Book Apart, 2011.

Introdução ao Responsive Web Design, Diego Eis

Introdução sobre Media Queries, Diego Eis