As Media Queries são só um detalhe!

As Media Queries são só um detalhe

…não, pera!

Associar os esforços para o desenvolvimento de uma interface responsiva a etapa de Front-End é um dos maiores equívocos atuais do desenvolvimento web.

http://alistapart.com/article/responsive-web-design

http://alistapart.com/article/responsive-web-design

Responsive Design Workflow

Responsive Design Workflow

1. Pesquisa com usuários

2. Estratégia de conteúdo

3. Design de Interação

4. Design Visual

5. Implementação

Pesquisacom usuários1

Compreender o contexto de uso

Contexto Desktop (Interface Gráfica de Usuário)

1. Atenção elevada

2. Tela grande e controle mediado

3. Maior precisão, menor imersão

4. Produtividade e eficiência nas tarefas

5. Conexão rápida

6. Posição estática

Contexto Mobile (Interface Natural de Usuário)

1. Pouca atenção

2. Tela pequena e manipulação direta

3. Menor precisão, maior imersão

4. Tarefas sociais e colaborativas

3. Conexão lenta

4. Posição dinâmica

Design Centrado no Usuário é o processo onde mantemos o foco nas necessidades, desejos e limitações dos usuários durante todo o projeto, a cada tomada de decisão, desde a concepção até o lançamento do produto.

Estratégiade conteúdo2

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

Repensar a hierarquia e a pertinência de apresentação dessas informações em diferentes contextos e dispositivos.

# Conteúdo Site atual Novo site

1 Links úteis √ √2 Informações de Perfil √ √3 Navegação Primária √ √4 Botão de Login √ √5 Meus Eventos √ √6 Minhas tarefas √ √7 Publicidade √ √8 Qualificações √ √9 Áreas de destaque √ √

10 Informações de mercado √ X11 Arquivos para Download √ X12 Rodapé √ √13 Atividades Recentes X √

1

2

3

4

5

6

7

8

9

10

11

12

13

1

2

3 4

5 67

8

9 10

11

12

1

2

3 4

5

6

7

8

9

12

Design de Interação3

http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

5mm 7mm 10mm

#sqn

5mm 7mm 10mm

Mínimo

5mm 7mm 10mm

Ideal

Crie Protótipos Navegáveis. Eles ajudam a simular a experiência de navegação, a detalhar o fluxo de tarefas e a dimensionar o projeto de maneira mais eficiente.

Brad Frost “Repeat after me: Mobile Users will do

anything and everything desktop users will do, provided it's presented in a usable way.”

Design Visual4

Designing in the Browser

Style Tiles

HTML Style Guides

http://patternprimer.adactio.com/








Implementação Front-End5

https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF





Ethan Marcotte “Fluid grids, flexible images, and media queries

are the three technical ingredients for responsive web design, but it also requires a

different way of thinking.”

Obrigado! Edu Agni é consultor especialista em Experiência do Usuário. Possui 12 anos de experiência nas áreas de

design e usabilidade, e criador do UX.BLOG.