O documento discute os princípios do Mobile First e do Design Responsivo. Ele explica que o Mobile First força o foco no conteúdo essencial e nas melhores práticas de UX, enquanto o Design Responsivo cria layouts e conteúdos flexíveis para diferentes telas. O autor argumenta que o Design Responsivo não é apenas uma questão técnica, mas de adaptação a diferentes contextos.

1. //UX.BLOG
Mobile First &
Responsive Design

2. //UX.BLOG
Edu Agni / Designer e Consultor
Trabalha há nove anos com projetos nas áreas de
direção de arte, usabilidade, design de interfaces e
front-end. Criador e editor do UX.BLOG e curador da
área de Design da Campus Party Brasil.
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni

3. Inclusão Digital

6. Não.

7. Não.
http://www.youtube.com/watch?v=ndkIP7ec3O8

11. Existem 5 vezes mais telefones
celulares no mundo do que PCs.
!
http://slidesha.re/QAHdFU

14. Há 6,8 bilhões de pessoas no planeta.
4 bilhões delas usam telefone celular.
3,5 bilhões delas usam uma escova de dentes.
!
http://bit.ly/o03mRg

22. 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 (http://bit.ly/nLrEdy)

23. Cultura da Interface

24. Interface: zona entre o
meio e a mensagem

25. Designing Natural Interfaces
Darren David & Nathan Moody, 2008
Interface Gráfica do Usuário
•
•
Interface de linha de comando
•
Gráfica
Indireta
Mouse / Ponteiro
Interface Natural do Usuário
•
•
•
http://bit.ly/H2rZtl
Textual
Abstrata
Teclado QWERTY
•
•
•
Física
Direta
Gestual

26. Designing Natural Interfaces
Darren David & Nathan Moody, 2008
Interface Gráfica do Usuário
Interface Natural do Usuário
1. Controle mediado;
1. Manipulação direta;
2. Maior precisão, menor imersão;
2. Menor precisão, maior imersão;
3. Aproveita a familiaridade e
experiência computacional;
3. Aproveita as suposições do
usuário e conclusões lógicas;
4. Associações emocionais com o
trabalho;
4. Associações emocionais com o
entretenimento;
5. Perfeito para produtividade e
eficiência nas tarefas;
5. Perfeito para tarefas sociais e
colaborativas;
6. A interface é visível e gráfica.
6. A interface é física e invisível.
http://bit.ly/H2rZtl

28. Projetar para
pessoas
Compartilhar
boas histórias
de
se
jo
us
ab
ili
da
de
<
<
Tríade da
Experiência
Digital
>
< utilidade >
>
Estimular os
sentidos

29. Essas metaformas, esses mapeamentos
de bits virão para ocupar praticamente
todas as facetas da sociedade
contemporânea: trabalho, divertimento,
amor, família, arte elevada, cultura
popular, política.
(Cultura da Interface, de Steven Johnson)

30. Essas metaformas, esses mapeamentos
de bits virão para ocupar praticamente
todas as facetas da sociedade
contemporânea: trabalho, divertimento,
amor, família, arte elevada, cultura
popular, política.
(Cultura da Interface, de Steven Johnson)
http://youtu.be/6Cf7IL_eZ38

31. Mobile First

32. http://www.abookapart.com/products/mobile-first

34. O excesso de informação em grande
parte dos sites se dá porque é
relativamente fácil adicionar conteúdo
na versão desktop.

36. Desenhe sua solução primeiro para mobile,
depois para desktop.

39. O mobile não deixa espaço para nenhum
conteúdo de relevância duvidosa. Você precisa
saber o que realmente importa. Para fazer isso
você precisa conhecer bem os seus usuários e
o seu mercado.

41. Mobile First
!
★
A versão mobile te força a ter foco. Afinal, são
apenas 320 pixels de largura para você brincar.
★
A atenção em áreas como Arquitetura de
Informação, Usabilidade e Acessibilidade é
aumentada.
★
Mobile expande suas capacidades técnicas:
GPS, user orientation, multi-touch,
acelerômetro etc.

42. Responsive Design

44. Criar sites com layouts e conteúdos flexíveis e
adaptáveis a uma ampla variedade de
resoluções de tela e dispositivos.

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

46. O que inspirou o
Responsive
Web Design?

47. Arquitetura Responsiva
Condições do espaço e ambientes podem mudar e
se adaptar a condições pre-definidas ou
desejáveis , por meio de sensores, alterando as
características de forma, cores, espaços e todos os
elementos que compõem o espaço arquitetônico de
modo responsivo. (Wikipedia)

48. Arquitetura Responsiva
Condições do espaço e ambientes podem mudar e
se adaptar a condições pre-definidas ou
desejáveis , por meio de sensores, alterando as
características de forma, cores, espaços e todos os
elementos que compõem o espaço arquitetônico de
modo responsivo. (Wikipedia)
http://www.youtube.com/watch?v=WwzCfKvFxRQ

50. Layout Responsivo
★ Grids Fluidos
★ Design Adaptatívo e Conteúdo Flexível
★ Otimização de desempenho

51. Criando uma
Estrutura Fluida

52. Tamanho ÷ contexto = resultado

53. Estrutura Fluida: Fontes
★ O tamanho padrão da fonte na maioria em praticamente
todos os sites é de 16px
★ As medidas devem ser convertidas de medidas
absolutas (px) para medidas relativas (em)
★ Utilizamos para essa conversão a formula
tamanho ÷ contexto = resultado

54. 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 */!

55. Estrutura Fluida: Grid
width: 900px
20px
180px
360px
540px
720px

56. Estrutura Fluida: Grid
max-width: 900px; width: 90%;
2,222222%
20%
40%
60%
80%

57. Estrutura Fluida: Margin & Padding
800px
20px
40px
500px
40px
20px
margin: 5% (40 ÷ 800 = 0,05)
-
padding: 4% (20 ÷ 500 = 0,04)

58. Estrutura Fluida: Imagens
width: 45%
max-width: 100%

59. Criando um
Design Adaptável

60. Design Adaptável: Breakpoints

61. 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

67. 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

68. Otimização de
Desempenho

69. Renomeie ou remova elementos não-semânticos
do seu HTML, e remova seletores ineficientes do CSS.

70. Reduza o número de requisições do site,
principalmente de Javascript.

71. Otimize suas imagens com o uso de sprites, compressores,
Base64 encode, ou substituindo-as por CSS3.

72. http://browserdiet.com/pt/

73. https://developers.google.com/speed/pagespeed/insights?hl=pt-br

75. Design Responsivo não é apenas uma
questão tecnológica de adaptação para
diferentes dispositivos, mas sim uma
adaptação para diferentes contextos.

76. //UX.BLOG
Obrigado ;)
Edu Agni / Designer e Consultor
!
!
www.uxdesign.blog.br
www.twitter.com/eduagni
www.linkedin.com/in/eduagni