Os cuidados e os limites do
Responsive Web Design
ou: O blá blá blá do Responsive Web Design
Slide 2
Slide 2 text
DIEGO EIS
slideshare.net/diegoeis
bit.ly/locawebstyle
@diegoeis
@tableless
tableless.com.br
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
O que você sabe sobre o
usuário?
Slide 5
Slide 5 text
Você tem uma ideia das resoluções que o usuário usa. Não
existe uma resolução matadora.
Qual a resolução?
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
#WTF
Slide 8
Slide 8 text
Não pense no browser, pense no motor de renderização.
Qual browser?
Slide 9
Slide 9 text
O que você sabe é que o mouse existe.
Todos usam mouse?
Slide 10
Slide 10 text
O cara pode estar em um feature phone ou um
computador velho. Nunca existirão apenas
computadores rápidos.
Computadores rápidos?
Slide 11
Slide 11 text
3G? Banda larga com upload de 2Mb?
A Conexão nunca será rápida o bastante.
Conexão rápida?
Slide 12
Slide 12 text
De qual maioria você está falando?
Mito: a maioria define os
padrões. Será?
Slide 13
Slide 13 text
alguns dados
interessantes
Slide 14
Slide 14 text
usam vários dispositivos para
terminar uma tarefa
90%
http://bit.ly/google-multi-screen-2012
Slide 15
Slide 15 text
iniciam a compra no smartphone e
depois terminam em outro dispositivo
65%
http://bit.ly/google-multi-screen-2012
Slide 16
Slide 16 text
usam a TV e o celular
simultaneamente todos os dias
81%
http://bit.ly/google-multi-screen-2012
Slide 17
Slide 17 text
das interações de media são
feitas em telas.
90%
http://bit.ly/google-multi-screen-2012
Slide 18
Slide 18 text
responsive
web design
Slide 19
Slide 19 text
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.
Slide 20
Slide 20 text
DESKTOP
título
título
TABLET
título
título
DESKTOP
TABLET
MOBILE
título
título
MOBILE
Slide 21
Slide 21 text
As vantagens
Slide 22
Slide 22 text
Nenhum redirecionamento. Nenhuma URL nova para o
usuário aprender
Uma url
Slide 23
Slide 23 text
Você mantém um código.
Um código
Slide 24
Slide 24 text
Você faz apenas UM deploy.
Um deploy
Slide 25
Slide 25 text
Você não tem vários lugares para atualizar seu conteúdo.
Um conteúdo para gerenciar
Slide 26
Slide 26 text
Mas o Responsive
não resolve tudo
Ele não é a solução para todos os problemas dos sites
mobiles. Aliás, o termo "site mobile" está bem fora de moda.
Slide 27
Slide 27 text
Manter um código é uma
faca de dois gumes
Como fica a performance para manter um código grande que
se adapta?
Slide 28
Slide 28 text
Fluxo de navegação
Usuários usando dispositivos móveis sofrem mais com fluxos
complexos e longos.
Slide 29
Slide 29 text
Conteúdo
O Responsive não resolve seu problema de conteúdo. Isso
NÃO significa que você precisa servir conteúdos diferentes
para mobile e desktop.
Slide 30
Slide 30 text
Elementos adaptados
Nem todos os elementos usados no desktop são funcionam
bem em outros meios de acesso. Nesse caso, você precisa
de uma alternativa.
Slide 31
Slide 31 text
TABS
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
RESS
Slide 36
Slide 36 text
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.
Slide 37
Slide 37 text
É bom para
Se você quiser ajustes finos de layout.
Otimização de performance a nível de componente.
Cases ruins
Eles mudam o site inteiro em vez de mudar apenas algunas
componentes.
Slide 43
Slide 43 text
SEARS
Slide 44
Slide 44 text
SEARS
MOBILE
DESKTOP
Slide 45
Slide 45 text
HONDA uk
Slide 46
Slide 46 text
SEARS
MOBILE
DESKTOP
Slide 47
Slide 47 text
Ainda está começando
Ninguém usa de verdade, por isso, ninguém tem ideia da
melhor forma de se fazer.
Slide 48
Slide 48 text
Detectar dispositivos é e
sempre será um problema
Tanto que empresas como a DeviceAtlas, WURFL e
Handset Detection tem ganhado algum dinheiro tentando
resolver esse problema.
Slide 49
Slide 49 text
adaptive
web design
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
HONDA uk
RWD
Adaptive Web Design
RESS
Adaptive
Delivery
ETC…
GRIDS
Design
atômico
Slide 52
Slide 52 text
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
É 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
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
alguns cuidados
Slide 59
Slide 59 text
Se o fluxo é longo, diminua
Por 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?
Slide 60
Slide 60 text
Comportamentos similares
Unifique o comportamento.
Minimize comportamentos diferentes entre os dispositivos.
Slide 61
Slide 61 text
Não perca tempo com as
imagens
Continue 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.
Slide 62
Slide 62 text
Não abuse da adaptação
Tanto no back-end quanto no front-end.
Você vai ter problemas em manter dois códigos e isso pode
sair do controle.
Slide 63
Slide 63 text
Trabalhe com design e
estruturas similares
Criar um layout parecido entre as plataformas diminui o
aprendizado do usuário, diminuir código e você mantém
melhor o controle.
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
outras preocupações
Slide 66
Slide 66 text
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?
Slide 67
Slide 67 text
Touch, Mouse, Gestures etc…
Como garantir que todas a execução de tarefas em qualquer
dispositivo?
Como padronizar as
interações de eventos?
Slide 68
Slide 68 text
Como seu produto pode interagir com diversos dispositivos
ao mesmo tempo?
!
Exemplo: http://g.co/racer
Como melhorar a interação
entre dispositivos
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
Pense no usuário
não na tecnologia
Slide 71
Slide 71 text
"There is no Mobile Web.
There is only the Web, which
we view in different ways.
There is also no Desktop
Web. Or Tablet Web."
http://bit.ly/no-mobile-web