Responsive Web Design

RESPONSIVE WEB DESIGN

RICARDO TORRES

QUEM?

@RICARDOTORRES0

/RICARDO.RICTORRES

RICARDO@AGENCIAGIRA.COM.BR

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