Web Design Responsivo

Victor Melo Programação para Internet I ADS - Senac

1. Introdução

O que é web design responsivo

Web Design Responsivo é uma abordagem de web design destinada a elaborar sites para fornecer uma ótima experiência de visualização, fácil leitura e navegação com um mínimo de redimensionamento e visionamento, para uma ampla gama de dispositivos (de monitores de computador a telefones celulares).

“Wikipédia”

O que é web design responsivo

Site

Design

Conteúdo

Diversos Dispositivos

Ou seja:

O que é web design responsivo

Case Revista W

Antes:

http://revistaw.com.br/

Case Revista W

http://revistaw.com.br/

Depois:

2. Na prática

• Fundação Flexível

• Media Queries

• Grids Fluídos

• Mobile First

• Otimização

Tópicos

Fundação Flexível

É o esqueleto básico do layout:

Fundação Flexível

• Na mão, com medidas relativas e um pouco de matemática

• Grids Fluídos

Pode ser feita de duas formas:

Fundação Flexível - Medidas

(Quase) tudo é relativo

• PX para definir altura ou largura máxima

• EM ou REM para definir tamanho de fonte

max-width: 1200px;

height: 700px;

• % para definir largura

width: 70%;

Font-size: 1.2em;

Font-size: 1.2rem;

Fundação Flexível - Fonte

PX:

Medida na fonte :

• Medida absoluta. Usuário não pode alterar o tamanho da fonte através de configurações do browser.

EM/REM: Adaptável,Flexível, melhor acessibilidade

• Medida relativa. Usuário pode alterar o tamanho da fonte através de configurações do browser.

Preciso, inflexível, acessibilidade ruim

Fundação Flexível - Fonte

html { font-size: 62.5%; }

EM passa a ser em base 10, ou seja: 1.5em = 15px; 1.2em = 12px; 2.5em = 25px;

target ÷ context = result

1em equivale ao tamanho do font-size do body, que em geral é 16px.

1.5em = 24px

Truque:

Exemplos:

24 ÷ 16 = 1.5

2em = 32px 32 ÷ 16 = 2

Fórmula EM:

OBS: • Com EM, pode-se aplicar o font-

size no body. • Com REM, apenas no html

Fundação Flexível - Fonte

EM é relativo ao font-size do contâiner REM é relativo ao font-size do elemento html

body { font-size: 20%; }

html { font-size: 62.5%; }

Body .p1 { font-size: 1rem; }

Não afetado pelo font-size do body

Body .p2 { font-size: 1.6rem; }

Afetado pelo font-size do body

Font-size REM: * { font-size: 1.6rem; line-height:1.6rem; }

Fundação Flexível - Fonte

Exemplo EM vs REM

Fundação Flexível – Containers e Imagens

• Largura em porcentagem;

• Usar max-width ou min-width quando necessário.

#container{ width: 90%; max-width: 850px; }

<section id=“container”>

</section>

2 Regras

Media Queries

“consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color.”

Developer.mozilla.org

Media Queries

Ex: • All: Para todos os dispositivos.

• Braille: Para dispositivos táteis. • Handheld: Para dispositivos portáteis, geralmente com telas pequenas e

banda limitada.

• Print: Para impressão em papel.

• Screen: Para monitores ou dispositivos com telas coloridas e resolução adequada.

<link rel="stylesheet" media="Handheld"

href="example.css" />

Media Types: definem para que tipo de media um certo código CSS é direcionado.

Media Queries

Handheld ou Screen? Screen

Problema: Falta de padronização de aparelhos.

Media Queries

<link rel="stylesheet" media="only screen and (max-

width: 800px)" href="example.css" />

No HTML:

@media screen and (max-width: 600px) { p { font-size: 20px; color: red; } }

No CSS:

Estas definições são conhecidas como breakpoints.

Dica:

Solução: Definir estilo por tamanho de tela, e não por dispositivo utilizado.

Media Queries

@media only screen and (max-width: 480px) {

body{ font-size:25em; }

}

Fundação Flexível - Viewport

Viewport é o quanto de conteúdo cabe na tela, em CSS pixels, não device pixels.

Existem 3 tipos de pixels:

• Pixel do dispositivo: corresponde ao tamanho da tela do seu aparelho.

• CSS pixel: medida definida no CSS.

• Dpi pixel: quantidade de pixels que cabe em uma polegada.

A equivalência entre estes varia, dependendo do aparelho.

Fundação Flexível - Viewport

Sem tela retina: 163dpi

Com tela retina:

326dpi

• Dois aparelhos • mesmo tamanho de tela • Dpis diferentes

Resoluções diferentes

Por isso, devemos nos preocupar com o pixel do dispositivo, e não a sua resolução.

Coloque no <head> o seguinte trecho:

<meta name="viewport" content="width=device-

width,initial-scale=1">

Fundação Flexível - Viewport

Como definir que o parâmetro é o pixel do dispositivo:

Exemplo Site Responsivo

Responsivo na mão

Frameworks como Bootstrap utilizam classes para definir grids:

Grids Fluídos

http://getbootstrap.com/

Exemplo Site Responsivo Bootstrap

Responsivo com Bootstrap

Mobile First

Mobile First - Características

Capacidades técnicas mais interessantes

• acelerometro

• GPS

• multitouch

• giroscópio

• etc.

Mobile First - Características

Foco

Focar nas ações essenciais do usuário.

Mobile First - Características

Atenção dobrada com:

Em mobiles, decidir onde cada botão vai ser posicionado é tão essencial quanto a programação server-side ou um HTML bem feito.

• Arquitetura de Informação • Usabilidade • Acessibilidade

Otimização

Pensar na experiência do usuário não é apenas fazer seu site responsivo. Mas também, torná-lo acessível.

http://browserdiet.com

http://browserdiet.com

Otimização

Algumas dicas do BrowserDiet:

• Evite código inline/incorporado

• Prefira <link> a @import

• Comprima sua folha de estilo (CSS)

• Combine vários arquivos CSS em um só

http://browserdiet.com

3. Internet além dos sites

Internet é um ambiente de desenvolvimento de aplicações, e não apenas de sites comerciais.

Você pode usar as tecnologias web pra desenvolver aplicativos e serviços.

Internet além dos sites

Internet além dos sites

http://www.html5gamedevelopment.com/

http://browserquest.mozilla.org/

Internet além dos sites

http://bjork.com/

Outros cenários

Sites mobile são só o começo!

Referências

http://blog.popupdesign.com.br/desenvolvimento-responsivo-e-viewport/

http://browserdiet.com/pt/

http://tableless.com.br/

http://sergiolopes.org/responsive-web-design/

Obrigado!

Victor Melo

victordossantosmelo@gmail.com

fb.com/victormelooo