Os cuidados e os limites do Responsive Web Design
-
date post
21-Oct-2014 -
Category
Technology
-
view
1.473 -
download
5
description
Transcript of Os cuidados e os limites do Responsive Web Design
![Page 1: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/1.jpg)
Os cuidados com o Web Mobileaka: O blá blá blá do Responsive Web Design
![Page 2: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/2.jpg)
DIEGO EIS
slideshare.net/diegoeisbit.ly/locawebstyle
@diegoeis@tableless
tableless.com.br
![Page 3: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/3.jpg)
![Page 4: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/4.jpg)
O que você sabe sobre o usuário?
![Page 5: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/5.jpg)
Você tem uma ideia das resoluções que o usuário usa. Não existe uma resolução matadora.
Qual a resolução?
![Page 6: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/6.jpg)
![Page 7: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/7.jpg)
#WTF
![Page 8: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/8.jpg)
Não pense no browser, pense no motor de renderização.
Qual browser?
![Page 9: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/9.jpg)
![Page 10: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/10.jpg)
O que você sabe é que o mouse existe.
Todos usam mouse?
![Page 11: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/11.jpg)
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?
![Page 12: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/12.jpg)
3G? Banda larga com upload de 2Mb? A Conexão nunca será rápida o bastante.
Conexão rápida?
![Page 13: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/13.jpg)
De qual maioria você está falando?
Mito: a maioria define os padrões. Será?
![Page 14: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/14.jpg)
alguns dados interessantes
![Page 15: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/15.jpg)
usam vários dispositivos para terminar uma tarefa
90%
http://bit.ly/google-multi-screen-2012
![Page 16: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/16.jpg)
iniciam a compra no smartphone e depois terminam em outro dispositivo
65%
http://bit.ly/google-multi-screen-2012
![Page 17: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/17.jpg)
usam a TV e o celular simultaneamente todos os dias
81%
http://bit.ly/google-multi-screen-2012
![Page 18: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/18.jpg)
das interações de media são feitas em telas.
90%
http://bit.ly/google-multi-screen-2012
![Page 19: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/19.jpg)
responsive web design
![Page 20: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/20.jpg)
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.
![Page 21: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/21.jpg)
DESKTOP
título
título
TABLET
título
título
DESKTOP
TABLET
MOBILE
título
título
MOBILE
![Page 22: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/22.jpg)
As vantagens
![Page 23: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/23.jpg)
Nenhum redirecionamento. Nenhuma URL nova para o usuário aprender
Uma url
![Page 24: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/24.jpg)
Você mantém um código.
Um código
![Page 25: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/25.jpg)
Você faz apenas UM deploy.
Um deploy
![Page 26: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/26.jpg)
Você não tem vários lugares para atualizar seu conteúdo.
Um conteúdo para gerenciar
![Page 27: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/27.jpg)
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.
![Page 28: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/28.jpg)
Manter um código é uma faca de dois gumesComo fica a performance para manter um código grande que se adapta?
![Page 29: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/29.jpg)
Fluxo de navegaçãoUsuários usando dispositivos móveis sofrem mais com fluxos complexos e longos.
![Page 30: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/30.jpg)
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.
![Page 31: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/31.jpg)
Elementos adaptadosNem todos os elementos usados no desktop são funcionam bem em outros meios de acesso. Nesse caso, você precisa de uma alternativa.
![Page 32: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/32.jpg)
TABS
![Page 33: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/33.jpg)
![Page 34: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/34.jpg)
![Page 35: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/35.jpg)
![Page 36: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/36.jpg)
RESS
![Page 37: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/37.jpg)
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.
![Page 38: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/38.jpg)
É bom paraSe você quiser ajustes finos de layout. Otimização de performance a nível de componente.
![Page 39: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/39.jpg)
UNIVERSIDADE DE NOTRE DAME
![Page 40: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/40.jpg)
![Page 41: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/41.jpg)
![Page 42: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/42.jpg)
TELAS GRANDES136 requests - 3.00MB
TELAS PEQUENAS23 requests - 291.94KB
![Page 43: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/43.jpg)
Cases ruinsEles mudam o site inteiro em vez de mudar apenas algunas componentes.
![Page 44: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/44.jpg)
SEARS
![Page 45: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/45.jpg)
SEARS
MOBILEDESKTOP
![Page 46: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/46.jpg)
HONDA uk
![Page 47: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/47.jpg)
SEARS
MOBILEDESKTOP
![Page 48: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/48.jpg)
Ainda está começandoNinguém usa de verdade, por isso, ninguém tem ideia da melhor forma de se fazer.
![Page 49: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/49.jpg)
Detectar dispositivos é e sempre será um problemaTanto que empresas como a DeviceAtlas, WURFL e Handset Detection tem ganhado algum dinheiro tentando resolver esse problema.
![Page 50: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/50.jpg)
adaptive web design
![Page 51: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/51.jpg)
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
![Page 52: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/52.jpg)
HONDA ukRWD
Adaptive Web DesignRESS
Adaptive Delivery
ETC…GRIDS
Design atômico
http://bradfrostweb.com/blog/post/the-principles-of-adaptive-design/
![Page 53: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/53.jpg)
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
![Page 54: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/54.jpg)
conteúdoHTML
formatação básicaCSS
formatação avançadaCSS
comportamentointerações
JS / CSS
![Page 55: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/55.jpg)
É 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
![Page 56: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/56.jpg)
![Page 57: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/57.jpg)
![Page 58: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/58.jpg)
![Page 59: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/59.jpg)
Mobile First
![Page 60: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/60.jpg)
Restrições• Tamanho da tela • Velocidade das redes • Modos de uso (Contextos)
![Page 61: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/61.jpg)
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.
![Page 62: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/62.jpg)
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á.
![Page 63: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/63.jpg)
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.
![Page 64: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/64.jpg)
Reduza requests e tamanho de arquivosElimine redirects, use poucas imagens, otimize e trate os assets de produção, reduza dependências (principalmente de JavaScript).
![Page 65: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/65.jpg)
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.
![Page 66: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/66.jpg)
![Page 67: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/67.jpg)
//// 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;}}
![Page 68: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/68.jpg)
alguns cuidados
![Page 69: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/69.jpg)
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?
![Page 70: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/70.jpg)
Comportamentos similaresUnifique o comportamento. Minimize comportamentos diferentes entre os dispositivos.
![Page 71: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/71.jpg)
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.
![Page 72: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/72.jpg)
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.
![Page 73: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/73.jpg)
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.
![Page 74: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/74.jpg)
![Page 75: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/75.jpg)
outras preocupações
![Page 76: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/76.jpg)
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?
![Page 77: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/77.jpg)
Touch, Mouse, Gestures etc… Como garantir que todas a execução de tarefas em qualquer dispositivo?
Como padronizar as interações de eventos?
![Page 78: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/78.jpg)
Como seu produto pode interagir com diversos dispositivos ao mesmo tempo?
Exemplo: http://g.co/racer
Como melhorar a interação entre dispositivos
![Page 79: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/79.jpg)
![Page 80: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/80.jpg)
Pense no usuário não na tecnologia
![Page 81: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/81.jpg)
http://bit.ly/no-mobile-web
![Page 82: Os cuidados e os limites do Responsive Web Design](https://reader033.fdocuments.us/reader033/viewer/2022051816/5445bf85afaf9fdf2a8b4659/html5/thumbnails/82.jpg)
Amplexos! Perguntas?
slideshare.net/diegoeisbit.ly/locawebstyle