SlideShare une entreprise Scribd logo
1  sur  82
Télécharger pour lire hors ligne
Os cuidados e os limites do
Responsive Web Design
ou: O blá blá blá do Responsive Web Design
DIEGO EIS
slideshare.net/diegoeis
bit.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 velho. 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 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.
Manter um código é uma
faca de dois gumes
Como fica a performance para manter um código grande que
se adapta?
Fluxo de navegação
Usuários usando dispositivos móveis sofrem mais com fluxos
complexos e longos.
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.
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.
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 para
Se você quiser ajustes finos de layout.
Otimização de performance a nível de componente.
UNIVERSIDADE DE
NOTRE DAME
TELAS GRANDES
136 requests - 3.00MB
TELAS PEQUENAS
23 requests - 291.94KB
Cases ruins
Eles mudam o site inteiro em vez de mudar apenas algunas
componentes.
SEARS
SEARS
MOBILEDESKTOP
HONDA uk
SEARS
MOBILEDESKTOP
Ainda está começando
Ninguém usa de verdade, por isso, ninguém tem ideia da
melhor forma de se fazer.
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.
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 Design
RESS
Adaptive
Delivery
ETC…
GRIDS
Design
atômico
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údo
HTML
formatação básica
CSS
formatação avançada
CSS
comportamento
interaçõ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
alguns cuidados
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?
Comportamentos similares
Unifique o comportamento.
Minimize comportamentos diferentes entre os dispositivos.
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.
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.
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.
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
"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
Amplexos!
Perguntas?
slideshare.net/diegoeis
bit.ly/locawebstyle
@diegoeis
@tableless
tableless.com.br
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design
Os cuidados e os limites do Responsive Web Design

Contenu connexe

Tendances

Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Sérgio Souza Costa
 
SENAI - Segurança firewall
SENAI - Segurança   firewall SENAI - Segurança   firewall
SENAI - Segurança firewall
Carlos Melo
 
Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta Fidelidade
Erico Fileno
 
Aula 2 marco civil da internet - parte 1
Aula 2   marco civil da internet - parte 1Aula 2   marco civil da internet - parte 1
Aula 2 marco civil da internet - parte 1
Márcia Rodrigues
 

Tendances (20)

As fake news e os influenciadores construídos
As fake news e os influenciadores construídosAs fake news e os influenciadores construídos
As fake news e os influenciadores construídos
 
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
 
Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25
Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25
Marketing por Conteúdo - Plataformas Digitais - Aulas 24 e 25
 
Módulo 1 - Design gráfico
Módulo 1 - Design gráficoMódulo 1 - Design gráfico
Módulo 1 - Design gráfico
 
Segmentação de rede
Segmentação de redeSegmentação de rede
Segmentação de rede
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
Gestão de Redes Sociais - Aula 1 - Algoritmo e Planejamento
Gestão de Redes Sociais - Aula 1 - Algoritmo e PlanejamentoGestão de Redes Sociais - Aula 1 - Algoritmo e Planejamento
Gestão de Redes Sociais - Aula 1 - Algoritmo e Planejamento
 
Historia da internet
Historia da internetHistoria da internet
Historia da internet
 
Aula 5 midias sociais
Aula 5   midias sociaisAula 5   midias sociais
Aula 5 midias sociais
 
Exercício de criação: Sonho de Valsa
Exercício de criação: Sonho de ValsaExercício de criação: Sonho de Valsa
Exercício de criação: Sonho de Valsa
 
A influencia da mídia
A influencia da mídiaA influencia da mídia
A influencia da mídia
 
Topologia modelo arvore
Topologia modelo arvoreTopologia modelo arvore
Topologia modelo arvore
 
SENAI - Segurança firewall
SENAI - Segurança   firewall SENAI - Segurança   firewall
SENAI - Segurança firewall
 
Briefing
BriefingBriefing
Briefing
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
Aula - Internet
Aula - InternetAula - Internet
Aula - Internet
 
Prototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta FidelidadePrototipos de Baixa e Alta Fidelidade
Prototipos de Baixa e Alta Fidelidade
 
Aula 2 marco civil da internet - parte 1
Aula 2   marco civil da internet - parte 1Aula 2   marco civil da internet - parte 1
Aula 2 marco civil da internet - parte 1
 
Redação para o Instagram 2 - Técnicas de Redação em RP
Redação para o Instagram 2 - Técnicas de Redação em RPRedação para o Instagram 2 - Técnicas de Redação em RP
Redação para o Instagram 2 - Técnicas de Redação em RP
 
Compactadores de Arquivos
Compactadores de ArquivosCompactadores de Arquivos
Compactadores de Arquivos
 

En vedette

Structuring apps in Scala
Structuring apps in ScalaStructuring apps in Scala
Structuring apps in Scala
Phil Calçado
 
Evolutionary Architecture at Work
Evolutionary  Architecture at WorkEvolutionary  Architecture at Work
Evolutionary Architecture at Work
Phil Calçado
 

En vedette (20)

Structuring apps in Scala
Structuring apps in ScalaStructuring apps in Scala
Structuring apps in Scala
 
APIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog FoodAPIs: The Problems with Eating your Own Dog Food
APIs: The Problems with Eating your Own Dog Food
 
CSS 4 - What's coming up
CSS 4 - What's coming upCSS 4 - What's coming up
CSS 4 - What's coming up
 
Cloud Reliability Patterns
Cloud Reliability PatternsCloud Reliability Patterns
Cloud Reliability Patterns
 
Desafio dos testes em uma arquitetura de micro serviços
Desafio dos testes em uma arquitetura de micro serviçosDesafio dos testes em uma arquitetura de micro serviços
Desafio dos testes em uma arquitetura de micro serviços
 
ScalaItaly 2015 - Your Microservice as a Function
ScalaItaly 2015 - Your Microservice as a FunctionScalaItaly 2015 - Your Microservice as a Function
ScalaItaly 2015 - Your Microservice as a Function
 
Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015
Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015
Three Years of Microservices at SoundCloud - Distributed Matters Berlin 2015
 
Evolutionary Architecture at Work
Evolutionary  Architecture at WorkEvolutionary  Architecture at Work
Evolutionary Architecture at Work
 
Rhein-Main Scala Enthusiasts — Your microservice as a Function
Rhein-Main Scala Enthusiasts — Your microservice as a FunctionRhein-Main Scala Enthusiasts — Your microservice as a Function
Rhein-Main Scala Enthusiasts — Your microservice as a Function
 
Vida longa para SOA com microservices
Vida longa para SOA com microservicesVida longa para SOA com microservices
Vida longa para SOA com microservices
 
Microservices - Quebrando gigantes em pequenos
Microservices - Quebrando gigantes em pequenosMicroservices - Quebrando gigantes em pequenos
Microservices - Quebrando gigantes em pequenos
 
Amadurecendo Equipes com Microservices
Amadurecendo Equipes com MicroservicesAmadurecendo Equipes com Microservices
Amadurecendo Equipes com Microservices
 
Um pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoftUm pequeno estudo sobre a microsoft
Um pequeno estudo sobre a microsoft
 
Integração utilizando REST API e Microservices
Integração utilizando REST API e MicroservicesIntegração utilizando REST API e Microservices
Integração utilizando REST API e Microservices
 
Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Flexbox and Grid Layout: How you will structure layouts tomorrow.
Flexbox and Grid Layout: How you will structure layouts tomorrow.
 
Microservices
MicroservicesMicroservices
Microservices
 
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render PathDOM, CSSOM e RenderThree - Introdução ao Browser Render Path
DOM, CSSOM e RenderThree - Introdução ao Browser Render Path
 
Introdução à Microservices
Introdução à MicroservicesIntrodução à Microservices
Introdução à Microservices
 
Workshop soa, microservices e devops
Workshop soa, microservices e devopsWorkshop soa, microservices e devops
Workshop soa, microservices e devops
 
Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)
Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)
Microservices: uma abordagem para arquitetura de aplicações (Devcamp 2015)
 

Similaire à Os cuidados e os limites do Responsive Web Design

Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
Claudio Toldo
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 

Similaire à Os cuidados e os limites do Responsive Web Design (20)

Aplicacoes responsivas
Aplicacoes responsivasAplicacoes responsivas
Aplicacoes responsivas
 
Responsive Web Design - Introdução
Responsive Web Design - IntroduçãoResponsive Web Design - Introdução
Responsive Web Design - Introdução
 
Design Responsivo
Design ResponsivoDesign Responsivo
Design Responsivo
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuaisJavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
JavaScript e o perfil do desenvolvedor front end das atualidades mais atuais
 
Responsive wordpress
Responsive wordpressResponsive wordpress
Responsive wordpress
 
Capitulo 3 Livro Nielsen
Capitulo 3 Livro NielsenCapitulo 3 Livro Nielsen
Capitulo 3 Livro Nielsen
 
Ap iii
Ap iiiAp iii
Ap iii
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Primeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-endPrimeiros passos para estruturar uma equipe front-end
Primeiros passos para estruturar uma equipe front-end
 
Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02Dica fundao-sites-responsivos-140528101304-phpapp02
Dica fundao-sites-responsivos-140528101304-phpapp02
 
Sites responsivos
Sites responsivosSites responsivos
Sites responsivos
 
Programador (front|back) end moderno, por Leonardo Hackin
Programador (front|back) end moderno, por Leonardo HackinProgramador (front|back) end moderno, por Leonardo Hackin
Programador (front|back) end moderno, por Leonardo Hackin
 
Hello Bootstrap!
Hello Bootstrap!Hello Bootstrap!
Hello Bootstrap!
 
O que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-endO que você precisa saber para se tornar um dev front-end
O que você precisa saber para se tornar um dev front-end
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
 
Arquitetura no Android, realmente importa? - TDC 2011
Arquitetura no Android, realmente importa? - TDC 2011Arquitetura no Android, realmente importa? - TDC 2011
Arquitetura no Android, realmente importa? - TDC 2011
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?Front-end: O que é necessário saber ?
Front-end: O que é necessário saber ?
 

Plus de Diego Eis

Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
Diego Eis
 

Plus de Diego Eis (16)

Carreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutosCarreira de Product Manager em 18 minutos
Carreira de Product Manager em 18 minutos
 
Service Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos DigitaisService Dominant Logic - S-D Logic em Produtos Digitais
Service Dominant Logic - S-D Logic em Produtos Digitais
 
Métricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística BásicaMétricas para times Ágeis usando Estatística Básica
Métricas para times Ágeis usando Estatística Básica
 
O básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked DataO básico sobre Web Semântica, JSON-LD e Linked Data
O básico sobre Web Semântica, JSON-LD e Linked Data
 
UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?UX, Front-end and Back-end: How front-end can help these guys?
UX, Front-end and Back-end: How front-end can help these guys?
 
WAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na webWAI-ARIA - Interações acessíveis na web
WAI-ARIA - Interações acessíveis na web
 
Construindo seu framework CSS
Construindo seu framework CSSConstruindo seu framework CSS
Construindo seu framework CSS
 
Construindo um framework CSS
Construindo um framework CSSConstruindo um framework CSS
Construindo um framework CSS
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
HTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidadeHTML5 e CSS3 - A nova novidade
HTML5 e CSS3 - A nova novidade
 
Manual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor EmpreendedorManual de Sobrevivência do Desenvolvedor Empreendedor
Manual de Sobrevivência do Desenvolvedor Empreendedor
 
Acessibilidade para web
Acessibilidade para webAcessibilidade para web
Acessibilidade para web
 
CSS3 - Novo contexto
CSS3 - Novo contextoCSS3 - Novo contexto
CSS3 - Novo contexto
 
Padrões Web passado, presente, futuro
Padrões Web passado, presente, futuroPadrões Web passado, presente, futuro
Padrões Web passado, presente, futuro
 
Padrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designerPadrões Web e algumas vantagens para o designer
Padrões Web e algumas vantagens para o designer
 
Padrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedorPadrões Web - Um elogio ao ócio do desenvolvedor
Padrões Web - Um elogio ao ócio do desenvolvedor
 

Os cuidados e os limites do Responsive Web Design