as media queries são só um detalhe!
TRANSCRIPT
![Page 1: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/1.jpg)
As Media Queries são só um detalhe
![Page 2: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/2.jpg)
…não, pera!
![Page 3: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/3.jpg)
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.
![Page 4: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/4.jpg)
http://alistapart.com/article/responsive-web-design
![Page 5: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/5.jpg)
Responsive Design Workflow
![Page 6: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/6.jpg)
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
![Page 7: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/7.jpg)
Pesquisacom usuários1
![Page 8: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/8.jpg)
Compreender o contexto de uso
![Page 9: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/9.jpg)
![Page 10: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/10.jpg)
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
![Page 11: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/11.jpg)
![Page 12: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/12.jpg)
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
![Page 13: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/13.jpg)
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.
![Page 14: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/14.jpg)
![Page 15: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/15.jpg)
![Page 16: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/16.jpg)
Estratégiade conteúdo2
![Page 17: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/17.jpg)
Estabelecer uma escala hierárquica de importância das informações textuais e gráficas do site.
![Page 18: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/18.jpg)
Repensar a hierarquia e a pertinência de apresentação dessas informações em diferentes contextos e dispositivos.
![Page 19: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/19.jpg)
# 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
![Page 20: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/20.jpg)
1
2
3 4
5 67
8
9 10
11
12
![Page 21: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/21.jpg)
1
2
3 4
5
6
7
8
9
12
![Page 22: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/22.jpg)
Design de Interação3
![Page 23: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/23.jpg)
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php
![Page 24: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/24.jpg)
![Page 25: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/25.jpg)
![Page 26: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/26.jpg)
![Page 27: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/27.jpg)
![Page 28: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/28.jpg)
5mm 7mm 10mm
#sqn
![Page 29: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/29.jpg)
5mm 7mm 10mm
Mínimo
![Page 30: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/30.jpg)
5mm 7mm 10mm
Ideal
![Page 31: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/31.jpg)
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.
![Page 32: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/32.jpg)
![Page 33: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/33.jpg)
Brad Frost “Repeat after me: Mobile Users will do
anything and everything desktop users will do, provided it's presented in a usable way.”
![Page 34: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/34.jpg)
![Page 35: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/35.jpg)
Design Visual4
![Page 36: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/36.jpg)
Designing in the Browser
![Page 37: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/37.jpg)
![Page 38: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/38.jpg)
![Page 39: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/39.jpg)
Style Tiles
![Page 40: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/40.jpg)
![Page 41: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/41.jpg)
![Page 42: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/42.jpg)
![Page 43: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/43.jpg)
![Page 44: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/44.jpg)
![Page 45: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/45.jpg)
HTML Style Guides
![Page 50: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/50.jpg)
Implementação Front-End5
![Page 51: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/51.jpg)
https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
![Page 52: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/52.jpg)
https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
![Page 53: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/53.jpg)
https://dribbble.com/shots/978949-Responsive-Wireframe-Templates-GIF
![Page 54: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/54.jpg)
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.”
![Page 55: As Media Queries são só um detalhe!](https://reader033.vdocuments.net/reader033/viewer/2022051122/5882ef621a28ab3f1e8b55c9/html5/thumbnails/55.jpg)
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.