Responsive Web Design

ProfessorAdriano Teixeira de Souza

Quem sou eu?

Adriano Teixeira de Souza Fasul: Professor nas disciplinas de

Estrutura de Dados, Paradigmas de Linguagens de Programação, Sistemas Distribuídos

C.Vale: Analista de sistemas sênior e líder técnico de desenvolvimento de sistemas em ambiente web e desktop

Quando a vida era simples

1280 x 800

Photo: Steve Rhodes

1280 x 800

1280 x 800

Photo: Steve Rhodes

16 : 9

1280 x 800

Photo: Steve Rhodes

Netbook tela de 8.9”

Title

Várias telas

Title

Mais é melhor 5120 x 1600

Title

Flickr: photographer

2006 Smart Phones

Title

Flickr: photographer

9 de Janeiro de 2007

Title

Flickr: photographer

2008 Smart Phones

Title

Flickr: photographer

2009 Smart Phones

Title

Flickr: photographer

Android, BlackBerry

Title

Flickr: photographer

2010 iPad – Vendas de 3 milhões de dispositivos em 80 dias

Title

Flickr: photographer

iPhone 4 – 960 x 640 @ 326 ppi “Retina Display”

Title

Flickr: photographer

Muitas telas

W3C diz:

A web deve ser acessível por qualquer pessoa em qualquer

lugar.

O que encontramos pela frente? 1 em 5 usuários acessam a internet de

dispositivos móveis todo os dias O tráfego de dados móveis quase

triplicou em 2010. Mantendo a tendências dos últimos 3 anos.

Acesso a internet por dispositivos móveis deve ultrapassar a de desktops entre 3 a 5 anos.

Vídeo-games e televisões atuais estão vindo com acesso a internet.

O que fazer então?

Design Web Responsivo Trabalhar com um layout que se adapta

as diferentes telas onde será apresentado

A mesma página web poderia ser apresentada de forma diferente em diversos dispositivos

Responsive Web Design é

“Uma grid flexível, com imagens flexíveis e que incorpore media

queries para criar um layout adaptável e responsivo”

Ethan Marcotte (@beep)http://www.alistapart.com/articles/responsive-web-design/

Responsive Web Design não é

Mobile design

Recapitulando

Grid Flexível

Imagens Flexíveis

Media Queries

Web Design Responsivo

Grid flexível Definindo tamanho em proporção▪ % em vez de px, cria o fluid layout▪ imagens também podem utilizar esta técnica

CSS3 Media Queries Estilo condicional Permite a você definir apresentações para

específicos tamanhos de tela, dispositivos e mais

Jeffrey Zeldman: “It’s what some of us were going for with ‘liquid’ web design back in the 1990s, only it doesn’t suck.”

Grid Flexível

Utilize Eric Meyer CSS Reset

Divida o site em módulos, ou partes, de forma que possam ser movidas e redimensionadas conforme a necessidade

Utilize em’s e % para dimensionar tamanhos e larguras

Elemento / contexto = resultado

Não arredonde casas decimais

Elemento/Contexto = Resultado

Elemento/Contexto = Resultado

Elemento/Contexto = Resultado

Elemento/Contexto = Resultado

Margin e Padding

Imagens Flexíveis

Esta regra diz para a imagem não exceder a largura do container. Overflow: hidden também funciona.

Imagens Flexíveis

Use Javascript para carregar imagens no tamanho apropriado https://github.com/filamentgroup/respon

sive-images

Problemas de redimensionamento http://unstoppablerobotninja.com/entry/f

luid-images

CSS3 Media Queries

min-width: referência as dimensões do viewport (área que o web site aparece)

min-device-width referencia as dimensões de tela do dispositivos (talvez a forma mais segura para identificar dispositivos, iPad, iPhone, etc.)

É possível selecionar baseado em dpi não somente width

É possível selecionar baseado em profundidade de cores

CSS3 Media Queries

Exemplo de tamanhos para definição de Media Queries

Mais sobre Media Queries

O que nós podemos testar

width height device-width device-height orientation aspect-ratio device-aspect-ratio

http://www.w3.org/TR/css3-mediaqueries/

• color• color-index• monochrome• resolution• scan• grid

Viewport

Antes de iniciar com smartfones, precisamos adicionar isto na seção head do nosso HTML.

A propriedade Initial-scale configura o nível de zoom para 1.0 ou 100%, então o browsers viewport sabe que irá mostrar um website igual a largura da tela do dispositivo e não no seu layout padrão.

Nós podemos passar por isso

Consolidação Web browsers são mais

compatíveis com padrões de mercado Google Chrome: Webkit Safari: Webkit Firefox: Gecko IE8 é muito bom em relação aos

anteriores

Browser Support

Opera 9.5+ Firefox 3.5+ Safari 3 Chrome Mobile Webkit Opera Mobile

A bala de prata

code.google.com/p/css3-mediaqueries-js/

IE8 e anteriores Firefox 1 & 2 Safari 2

Browser em mobile convergem

Android: Chrome: Webkit

iOS: Safari: Webkit

Blackberry: Webkit (últimas versões)

Design: Fatores à considerar

Faixa de dispositivos que o conteúdo será visto

Como o layout será apresentado de forma eficiente em diferentes plataformas

O tamanho padrão de imagens não deve estar baseado no layout alvo padrão (você pode ter algumas imagens diferentes para dispositivos diferentes).

Tenha um plano para uma diversidade de largura de telas