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

4.
Não.

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

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

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

8.
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)

9.
Cultura da Interface

10.
Interface: zona entre o
meio e a mensagem

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

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

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

14.
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)

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

16.
Mobile First

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

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

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

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

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

22.
Responsive Design

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

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

25.
O que inspirou o
Responsive
Web Design?

26.
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)

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

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

29.
Criando uma
Estrutura Fluida

30.
Tamanho ÷ contexto = resultado

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

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

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

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

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

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

37.
Criando um
Design Adaptável

38.
Design Adaptável: Breakpoints

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

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

41.
Otimização de
Desempenho

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

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

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

45.
http://browserdiet.com/pt/

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

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

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