responsive web design @ semcomp 2013

RESPONSIVE WEB DESIGN

RICARDO TORRES

QUEM?

twitter.com/ricardotorres0

fb.com/ricardo.rictorres

ricardo@agenciagira.com.br

github.com/rictorres

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