os cuidados e os limites do responsive web design
Post on 21-Oct-2014
1.473 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related