os cuidados e os limites do responsive web design

Os cuidados com o Web Mobileaka: O blá blá blá do Responsive Web Design

DIEGO EIS

slideshare.net/diegoeisbit.ly/locawebstyle

@diegoeis@tableless

tableless.com.br

O que você sabe sobre o usuário?

Você tem uma ideia das resoluções que o usuário usa. Não existe uma resolução matadora.

Qual a resolução?

#WTF

Não pense no browser, pense no motor de renderização.

Qual browser?

O que você sabe é que o mouse existe.

Todos usam mouse?

O cara pode estar em um feature phone ou um computador que foi rápido semana passada. Nunca existirão apenas computadores rápidos.

Computadores rápidos?

3G? Banda larga com upload de 2Mb? A Conexão nunca será rápida o bastante.

Conexão rápida?

De qual maioria você está falando?

Mito: a maioria define os padrões. Será?

alguns dados interessantes

usam vários dispositivos para terminar uma tarefa

90%

http://bit.ly/google-multi-screen-2012

iniciam a compra no smartphone e depois terminam em outro dispositivo

65%

http://bit.ly/google-multi-screen-2012

usam a TV e o celular simultaneamente todos os dias

81%

http://bit.ly/google-multi-screen-2012

das interações de media são feitas em telas.

90%

http://bit.ly/google-multi-screen-2012

responsive web design

o que é?É uma forma de apresentar bem seu layout para um grande número de dispositivos meios de acesso, usando, principalmente, o mesmo código HTML.

DESKTOP

título

título

TABLET

título

título

DESKTOP

TABLET

MOBILE

título

título

MOBILE

As vantagens

Nenhum redirecionamento. Nenhuma URL nova para o usuário aprender

Uma url

Você mantém um código.

Um código

Você faz apenas UM deploy.

Um deploy

Você não tem vários lugares para atualizar seu conteúdo.

Um conteúdo para gerenciar

Mas o Responsive não resolve tudoEle não é a solução para todos os problemas dos sites mobiles. Aliás, o termo "site mobile" está bem fora de moda.

Manter um código é uma faca de dois gumesComo fica a performance para manter um código grande que se adapta?

Fluxo de navegaçãoUsuários usando dispositivos móveis sofrem mais com fluxos complexos e longos.

ConteúdoO Responsive não resolve seu problema de conteúdo. Isso NÃO significa que você precisa servir conteúdos diferentes para mobile e desktop.

Elementos adaptadosNem todos os elementos usados no desktop são funcionam bem em outros meios de acesso. Nesse caso, você precisa de uma alternativa.

TABS

RESS

o que é RESS?Para começar é um acrônimo que ninguém entende: REsponsive Web Design + Server Side Components

É combinar a força do RWD servindo pedaços do site (componentes) otimizados de acordo com o contexto que o usuário se encontra.

É bom paraSe você quiser ajustes finos de layout. Otimização de performance a nível de componente.

UNIVERSIDADE DE NOTRE DAME

TELAS GRANDES136 requests - 3.00MB

TELAS PEQUENAS23 requests - 291.94KB

Cases ruinsEles mudam o site inteiro em vez de mudar apenas algunas componentes.

SEARS

SEARS

MOBILEDESKTOP

HONDA uk

SEARS

MOBILEDESKTOP

Ainda está começandoNinguém usa de verdade, por isso, ninguém tem ideia da melhor forma de se fazer.

Detectar dispositivos é e sempre será um problemaTanto que empresas como a DeviceAtlas, WURFL e Handset Detection tem ganhado algum dinheiro tentando resolver esse problema.

adaptive web design

Adaptive Web Design são várias soluções e metodologias usadas, ao contrário do que vejo por aí, ele não é concorrente do Responsive. Na verdade o Responsive está contido no AWD.

AWD é um pacote de soluções

HONDA ukRWD

Adaptive Web DesignRESS

Adaptive Delivery

ETC…GRIDS

Design atômico

http://bradfrostweb.com/blog/post/the-principles-of-adaptive-design/

Você escreve código nivelando por baixo e assim adiciona camadas de funcionalidades, tendo certeza de que tudo funciona em todos os meios de acesso, mesmo quando eles não tem suporte.

Progressive enhancement

conteúdoHTML

formatação básicaCSS

formatação avançadaCSS

comportamentointerações

JS / CSS

É a habilidade do sistema continuar em operação mesmo quando erros acontecem. A natureza inteira trabalha dessa forma. Os browsers trabalham dessa forma. É por isso que você consegue fazer coisas maravilhosas com CSS3 e HTML5

Fault tolerance

Mobile First

Restrições• Tamanho da tela • Velocidade das redes • Modos de uso (Contextos)

Estruture primeiro o conteúdoIsso faz com que todo mundo se foque exclusivamente em como o conteúdo vai se comportar e como será sua hierarquia e prioridade.

Planeje os contextosOtimizar a experiência pensando nos contextos é algo novo. Você precisa entender que o usuário vai usar seu site/sistema em pé no ônibus ou sentado confortavelmente no sofá.

Suportar e otimizarVocê não precisa suportar ou otimizar seu sistema para todos os aparelhos e contextos existentes. É impossível. Mas você pode estudar seu usuário e entender quais os dispositivos usados e suas features.

Reduza requests e tamanho de arquivosElimine redirects, use poucas imagens, otimize e trate os assets de produção, reduza dependências (principalmente de JavaScript).

Inicie pelo mobileE essa prática não é fácil. Não é apenas o design que precisa iniciar pelo Mobile, mas todo o processo. Desde o planejamento até a codificação.

//// Primeiro Mobile, depois o resto//

a {color: blue;}

@media screen and (min-width: 768px) { a {color: yellow;}}

@media screen and (min-width: 992px) { a {color: green;}}

@media screen and (min-width: 1200px) { a {color: black;}}

alguns cuidados

Se o fluxo é longo, diminuaPor que precisamos ter um fluxo longo complexo no desktop? Só por causa do espaço, por causa do conforto? Não seria mais confortável dar menos cliques e ter um fluxo menor?

Comportamentos similaresUnifique o comportamento. Minimize comportamentos diferentes entre os dispositivos.

Não perca tempo com as imagensContinue usando imagens do jeito que você sempre usou. Claro, tente otimizar o máximo possível, mas não fique louco tentando usar versões diferentes para vários dispositivos.

Não abuse da adaptaçãoTanto no back-end quanto no front-end. Você vai ter problemas em manter dois códigos e isso pode sair do controle.

Trabalhe com design e estruturas similaresCriar um layout parecido entre as plataformas diminui o aprendizado do usuário, diminuir código e você mantém melhor o controle.

outras preocupações

Você começa a preencher um formulário no desktop, mas precisa terminá-lo no smartphone, como sincronizar essa tarefa?

Como controlar a sincronização de conteúdo?

Touch, Mouse, Gestures etc… Como garantir que todas a execução de tarefas em qualquer dispositivo?

Como padronizar as interações de eventos?

Como seu produto pode interagir com diversos dispositivos ao mesmo tempo?

Exemplo: http://g.co/racer

Como melhorar a interação entre dispositivos

Pense no usuário não na tecnologia

http://bit.ly/no-mobile-web

Amplexos! Perguntas?

slideshare.net/diegoeisbit.ly/locawebstyle

@diegoeis@tablelesstableless.com.br