SRGIO

LOPES
Desenvolvedor Web, focado em front-end,
mobile e otimizaes.Saiba mais sobre
mim.

livro "A Web
Mobile cresce como nunca
como oferecer uma boa experincia na nova Web?
Pgina 1 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
E assim nasceram os sites mobile
viewport
at desktops e
notebooks!
Como, ento, atacar o mundo mvel
de hoje e de amanh?
[insira
tecnologia do futuro]
Pgina 2 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
Incontveis dispositivos
adaptar a experincia
vrios bons exemplos
Livro Arquitetura Java design responsivo
responsive
web
design
Pgina 3 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
se adapta a todo tipo de resoluo
melhor experincia para o
usurio
como?
So trs ingredientes principais:
Media Queries
resolues
de tela especficas
@media (maxwidth: 500px) {
body { fontsize: 87.5%; }
}
@media (maxwidth: 390px) {
body { fontsize: 80%; }
}
Pgina 4 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
vrios frameworks
breakpoints
device
driven breakpoints
content driven breakpoints
esse meu post
Layout fludo
layout fluir entre os breakpoints
no usar pixels nas medidas
porcentagens e ems
Pgina 5 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
Imagens flexveis
imagens que se adaptem
porcentagens para dimensionar
imagens
background-image
Pgina 6 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
<img>
alguns projetos produtos
responsive images
workgroup
efeitos CSS3
SVG
responsivo,
mas...
Pgina 7 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
Desenvolver para mobile tm vrios outros desafios
O contedo que importa
queremos
contedo mais focado e pginas mais simples e diretas
priorizao de contedo
completa reestruturao de contedo
cortando coisas secundrias
priorizando o importante
Responsive design
jamais corte contedo dos usurios mobile
Pgina 8 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
significa focar
Otimizar essencial
resultados fantsticos
E isso mais verdade ainda no
mundo mobile.
Otimizar o carregamento do seu site imprescindvel
Responsive design
Otimize o
carregamento do seu site a funcionalidade mobile mais importante
mobile
Pgina 9 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
first
comear pelo mobile muito melhor
Mobile First
priorizar o contedo
Comece pelo layout mobile simples e incremente
e ajuste as coisas para resolues maiores
progressive enhancement
base simples e slida,
contedo puro e simples
por fim
Pgina 10 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
Criar um site responsivo no fcil.
designs resposivos so o futuro
Web nica
bala de prata
Faa um site responsivo
novo livro A Web
Mobile: programe para um mundo de muitos dispositivos
links para posts, palestras, livros, cursos e exemplos de
sites responsivos
Pgina 11 de 12 Design Responsivo Por Uma Web nica - sergiolopes.org
01/07/2014 http://sergiolopes.org/responsive-web-design/
ERROR: undefined
OFFENDING COMMAND: f~
STACK: