Embed Size (px)
DESCRIPTION
Apresentação realizada no 2º Encontro Frontend Bahia. Original em: http://goo.gl/9wrpl5
Citation preview
RESPONSIVE WEB DESIGN
RICARDO TORRES
ANOS 90...
640 x 480
2000...
http://alistapart.com/article/fluidgrids
RESPONSIVE WEBDESIGN?
MUITO ALÉM DAS MEDIA-QUERIES
NÃOESCONDACONTEÚDO
POR QUÊ?
EXEMPLOS
AH!MAS ESSE É PEIXE PEQUENO...
:(
http://mediaqueri.es
MASLEMBRE-SE...
NÃOESCONDACONTEÚDO
VAMOSAO QUEINTERESSA!
COMODESENHAR?
USE AS FERRAMENTAS QUE MAIS LHE AGRADAM!
ACESSIBILIDADE
USABILIDADE
PADRÕES DENAVEGAÇÃ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/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
VALELEMBRAR QUE...
POR ONDE COMEÇAR?
UM PASSO DE CADA VEZ!
MODULAÇÃO
http://goo.gl/SOswo
GRIDS
HTML
VIEWPORT
MEDIA QUERIES(BREAKPOINTS)
http://alistapart.com/article/designing-for-breakpoints
GRIDS
TEXTO
DEVICE ORIENTATION
DEVICE ORIENTATION
DEVICE ORIENTATION
RESPONSIVE IMAGES*
RETINA IMAGES(HDPI)
CASE
CASE
LER MENOSE FAZER MAIS!
COM OU SEM FRAMEWORK?
http://responsive.vermilion.com/compare.php
NÃO PODEMOS EXAGERAR!
E FAZ O QUÊ COM O CONTEÚDO?
MOBILEFIRST
http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/
RESPONSIVE IMAGES
PROPOSTAS
http://usecases.responsiveimages.org
ART DIRECTION
http://usecases.responsiveimages.org
ART DIRECTION
PERFORMANCE
Devtools
http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
jQuery Animation
http://coding.smashingmagazine.com/2013/01/15/off-canvas-navigation-for-responsive-website/
CSS Transitions
TRUQUES...
GENERATED CONTENT
COMO DETECTAR?
https://github.com/ftlabs/fastclick
COMOTESTAR?
MESMO QUE VOCÊ TENHA TODO O CUIDADO DO MUNDO
https://gist.github.com/rictorres/3521351
https://gist.github.com/rictorres/5734585
http://goo.gl/7F4py
● OPERA MOBILE EMULATOR
● XCODE IOS SIMULATOR
● ANDROID SIMULATOR
● MOBILEXWEB.COM/EMULATORS
EMULADORES/SIMULADORES
POLYFILLS?
O QUENÃO FAZER
https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it
http://moz.com/ugc/responsive-web-design-the-ultimate-guide-for-online-marketers
OBRIGADO! ;)
rictorres.com
