responsive web design @ semcomp 2013
DESCRIPTION
Apresentação realizada na Semcomp 2013 em Salvador, Bahia. (http://semcomp.com.br) Versão original com gifs animados: http://goo.gl/DKOOvI O que você precisa saber para começar a desenvolver seu site/app de forma responsiva. Como definir breakpoints? Desenhar no Photoshop ou no navegador? Devo usar framework? Qual? Como mensurar e melhorar a performance? Progressive enhancement e/ou graceful degradation? Todas essas perguntas são respondidas nessa apresentação!TRANSCRIPT
RESPONSIVE WEB DESIGN
RICARDO TORRES
O QUE É?
http://alistapart.com/article/"uidgrids
http://alistapart.com/article/responsive-web-design
POR QUÊ?
http://goo.gl/8aJytI
http://bradfrostweb.com/
EXEMPLOS
AH! MAS ESSE É PEIXE PEQUENO...
:(
QUANDO?
CONSIDERAÇÕES
● Tempo e Dinheiro ● Browser support ● Performance ● Conteúdo ● Mobile Website?
VAMOS AO QUE INTERESSA!
COMO DESENHAR?
USE AS FERRAMENTAS QUE MAIS LHE AGRADAM!
ACESSIBILIDADE
USABILIDADE
PADRÕES DE NAVEGAÇÃO
NAVIGATION PATTERNS
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
POR ONDE COMEÇAR?
UM PASSO DE CADA VEZ!
http://goo.gl/SOswo
GRIDS
MOBILE FIRST
http://bradfrostweb.com/blog/web/mobile-#rst-responsive-web-design/
MEDIA QUERIES (BREAKPOINTS)
http://alistapart.com/article/designing-for-breakpoints
DEVICE ORIENTATION
DEVICE ORIENTATION
NÃO ESCONDA CONTEÚDO
COM OU SEM FRAMEWORK?
NÃO PODEMOS EXAGERAR!
http://responsive.vermilion.com/compare.php
RESPONSIVE IMAGES
RESPONSIVE IMAGES*
RETINA IMAGES (HDPI)
http://usecases.responsiveimages.org
ART DIRECTION
PERFORMANCE
Devtools
3 LIMITES IMPORTANTES
● 0,1 segundo
● 1 segundo
● 10 segundos
http://goo.gl/AOTXu
https://github.com/ftlabs/fastclick
COMO DETECTAR?
MESMO QUE VOCÊ TENHA TODO O CUIDADO DO MUNDO
COMO TESTAR?
http://goo.gl/7F4py
https://gist.github.com/rictorres/3521351
https://gist.github.com/rictorres/5734585
REFERÊNCIAS
http://mediaqueri.es
http://bradfrost.github.io/this-is-responsive/
OBRIGADO! ;)
rictorres.com