This document discusses responsive web design. It defines responsive web design as building websites that detect user's screen size and orientation and change the layout accordingly. It emphasizes using grids, mobile-first design, media queries, and responsive images to build sites that work across devices. It also provides considerations for performance, accessibility, and testing responsive sites.

1. RESPONSIVE WEB DESIGN
RICARDO TORRES

2. QUEM?
ricardo@agenciagira.com.br
twitter.com/ricardotorres0
fb.com/ricardo.rictorres
github.com/rictorres

5. O QUE É?

6. http://alistapart.com/article/"uidgrids

8. http://alistapart.com/article/responsive-web-design

9. POR QUÊ?

11. http://goo.gl/8aJytI

12. http://bradfrostweb.com/

14. EXEMPLOS

16. AH!
MAS ESSE É PEIXE PEQUENO...
:(

21. QUANDO?

22. CONSIDERAÇÕES
●
●
●
●
●
Tempo e Dinheiro
Browser support
Performance
Conteúdo
Mobile Website?

23. VAMOS
AO QUE
INTERESSA!

24. COMO
DESENHAR?

26. USE AS
FERRAMENTAS
QUE MAIS LHE
AGRADAM!

28. ACESSIBILIDADE
USABILIDADE

29. PADRÕES DE
NAVEGAÇÃO
NAVIGATION PATTERNS

30. http://bradfrostweb.com/blog/web/responsive-nav-patterns/

31. http://bradfrostweb.com/blog/web/responsive-nav-patterns/

32. http://bradfrostweb.com/blog/web/responsive-nav-patterns/

33. http://bradfrostweb.com/blog/web/responsive-nav-patterns/

36. POR ONDE COMEÇAR?

37. UM PASSO DE CADA VEZ!

38. GRIDS
http://goo.gl/SOswo

39. MOBILE
FIRST

40. http://bradfrostweb.com/blog/web/mobile-#rst-responsive-web-design/

41. MEDIA QUERIES
(BREAKPOINTS)
http://alistapart.com/article/designing-for-breakpoints

43. DEVICE ORIENTATION

44. DEVICE ORIENTATION

45. NÃO
ESCONDA
CONTEÚDO

46. COM OU SEM
FRAMEWORK?

48. NÃO PODEMOS
EXAGERAR!

49. http://responsive.vermilion.com/compare.php

50. RESPONSIVE
IMAGES

51. RESPONSIVE IMAGES*

53. RETINA IMAGES
(HDPI)

54. ART DIRECTION
http://usecases.responsiveimages.org

56. PERFORMANCE

58. Devtools

59. 3 LIMITES IMPORTANTES
● 0,1 segundo
● 1 segundo
● 10 segundos
http://goo.gl/AOTXu

60. https://github.com/ftlabs/fastclick

61. COMO DETECTAR?

62. MESMO QUE VOCÊ
TENHA TODO O
CUIDADO DO
MUNDO

64. COMO
TESTAR?

66. http://goo.gl/7F4py

67. https://gist.github.com/rictorres/3521351

68. https://gist.github.com/rictorres/5734585

69. REFERÊNCIAS

70. http://mediaqueri.es

71. http://bradfrost.github.io/this-is-responsive/

73. OBRIGADO! ;)
rictorres.com