//UX.BLOG Mobile First &Responsive Design

Edu Agni / Designer e ConsultorTrabalha 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

//UX.BLOG

Inclusão Digital

Não.

Não.

http://www.youtube.com/watch?v=ndkIP7ec3O8

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

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

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)

Cultura da Interface

Interface: zona entre o meio e a mensagem

Interface de linha de comando

• Textual • Abstrata • Teclado QWERTY

Interface Gráfica do Usuário

• Gráfica • Indireta • Mouse / Ponteiro

Interface Natural do Usuário

• Física • Direta • Gestual

http://bit.ly/H2rZtl

Designing Natural Interfaces Darren David & Nathan Moody, 2008

http://bit.ly/H2rZtl

Designing Natural Interfaces Darren David & Nathan Moody, 2008

Interface Gráfica do Usuário Interface Natural do Usuário

1. Controle mediado;

2. Maior precisão, menor imersão;

3. Aproveita a familiaridade e experiência computacional;

4. Associações emocionais com o trabalho;

5. Perfeito para produtividade e eficiência nas tarefas;

6. A interface é visível e gráfica.

1. Manipulação direta;

2. Menor precisão, maior imersão;

3. Aproveita as suposições do usuário e conclusões lógicas;

4. Associações emocionais com o entretenimento;

5. Perfeito para tarefas sociais e colaborativas;

6. A interface é física e invisível.

Tríade da Experiência

Digital

Projetar para pessoas

Compartilhar boas histórias

Estimular os sentidos

< usabilidade > < desejo >

< utilidade >

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)

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

Mobile First

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

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

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

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.

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.

Responsive Design

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

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

O que inspirou o Responsive Web Design?

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)

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

Layout Responsivo

★ Grids Fluidos

★ Design Adaptatívo e Conteúdo Flexível

★ Otimização de desempenho

Criando uma Estrutura Fluida

Tamanho ÷ contexto = resultado

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

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

Estrutura Fluida: Grid

width: 900px

20px

180px

360px

540px

720px

Estrutura Fluida: Grid

max-width: 900px; width: 90%;

2,222222%

20%

40%

60%

80%

Estrutura Fluida: Margin & Padding

500px 40px

margin: 5% (40 ÷ 800 = 0,05) - padding: 4% (20 ÷ 500 = 0,04)

800px

40px

20px

20px

Estrutura Fluida: Imagens

width: 45%

max-width: 100%

Criando um Design Adaptável

Design Adaptável: Breakpoints

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

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

Otimização de Desempenho

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

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

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

http://browserdiet.com/pt/

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

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

//UX.BLOG

Obrigado ;)

Edu Agni / Designer e Consultor !!

www.uxdesign.blog.br

www.twitter.com/eduagni

www.linkedin.com/in/eduagni