Campus Party: Desing Responsivos

Ou Quase

Priscila Mayumi Sato5 anos como desenvolvedora@mayogaxhttp://dev.ayogax.me/

Jucinei Pereira dos Santos3 anos como desenvolvedor@jucineihttp://jucineisantos.com/

Como acessávamos a web a alguns anos?

Como acessamos a web hoje?

O que nos aguarda no futuro?

O que é Responsive Design?

Responsive Web Design é um nome bonito para um conceito antigo. Hoje seus usuários utilizam diversos dispositivos e meios

de acesso para encontrar informação e por isso o conteúdo precisa se adaptar.

“O número total de pessoas acessando a web através de dispositivos móveis irá superar o acesso via desktop em 2015.”International Data Corporation (IDC)

Layout Fixo

Estrutura definida com

medidas absolutas, não

possui qualquer flexibilidade

X

Layout Fluido

Estrutura definida com

medidas relativas, possui uma

flexibilidade sem critérios

X

Layout Adaptativo

Capaz de se reconfigurar de

acordo com a resolução da tela

ou tamanho da janela

X

Layout Responsivo

Grids FluidosDesign AdaptativoConteúdo FlexívelOtimização de desempenho

V

O Google recomenda,e também te recompensa.

“Sites que usam Web Design Responsivo, isto é, sites que funcionam em todos os dispositivos com o mesmo conjunto de URLs, com cada URL fornecendo o mesmo HTML a todos os dispositivos e usando apenas CSS para alterar como a página é processada no dispositivo. Essa é a configuração recomendada pelo Google.”

https://developers.google.com/webmasters/smartphone-sites/details

Arquitetura de informação

★ Estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site

★ Repensar a pertinência de apresentação dessas

informações em diferentes contextos e dispositivos

Arquitetura de informação

Criando umaEstrutura Fluída

Tamanho ÷ contexto = resultado

Estrutura Fluida: Fontes

★ O tamanho padrão da fonte na maioria em praticamente todos os sites é de 16px

★ As medidas devem ser convertidas de medidasabsolutas (px) para medidas relativas (em)

★ Utilizamos para essa conversão a formulatamanho ÷ contexto = resultado

Estrutura Fluida: Fontes

h1 { font-size: 24px; }

h1 span { font-size: 18px; }

___________________________________________

h1 { font-size: 1.5em; }

/* 24 ÷ 16 = 1.5 */

h1 span { font-size: 0.75em; }

/* 18 ÷ 24 = 0.75 */

Estrutura Fluida: Grid

Estrutura Fluida: Grid

Estrutura Fluida: Margin & Padding

Estrutura Fluida: Imagens

Criando umDesign Adaptável

Design Adaptável: Media Queries★ Expressões condicionais para aplicar diferentes regras CSS dependendo da largura do viewport, orientação da tela e/ou aspect ratio:

★ @media screen and (max-width:480px)(resolução máxima no viewport de 480px)

★ @media all and (orientation:landscape)Orientação “paisagem”

★ @media screen and (device-aspect-ratio: 16/9)Monitores 16:9 (ex.: resolução de 1280 x 720px)

★ @media screen and (min-width: 400px) and (max-width: 700px)Tela com resolução mínima de 400px e máxima de 700px

Design Adaptável: Breakpoints

Design Adaptável: Viewport

★ Viewport é a aréa de visualização do dispositivo aonde o site deve aparecer

★ A customização do viewport serve para definir aresolução inicial de visualização do site, e evitar aminiaturização do mesmo

★ Seus parâmetros são: width/height, initial-scale, userscalable e minimum/maximum-scale

<name="viewport" content=“width=device-width,initial-scale=1, maximum-scale=1.5">

Design Adaptável: ViewportUma coleção de diferentes recursos e ferramentas para se trabalhar com Web Design Responsivo:

★ http://bradfrost.github.io/this-is-responsive/resources.html

ObrigadaPriscila Sato e Jucinei Santos

(slides feitos por Thiago Chaves)