Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Ricardo Torres Ricardo Torres
June 08, 2013
Technology
1
100

Responsive Web Design

Apresentação realizada no 2º encontro Frontend Bahia (https://www.facebook.com/events/481352118626380/).
Original em: http://goo.gl/9wrpl5

Avatar for Ricardo Torres

Ricardo Torres

June 08, 2013
Tweet

More Decks by Ricardo Torres

See All by Ricardo Torres
The Road to Serverless RESTish APIs
Avatar for Ricardo Torres rictorres
2
82
React and Redux Love Web APIs
Avatar for Ricardo Torres rictorres
0
61
WebRTC - Comunicação na web em tempo real
Avatar for Ricardo Torres rictorres
1
190
Responsive Web Design @ Semcomp 2013
Avatar for Ricardo Torres rictorres
1
160

Other Decks in Technology

See All in Technology
類似画像検索モデルの開発ノウハウ
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
4
1k
開発組織の課題解決を加速するための権限委譲 -する側、される側としての向き合い方-
Avatar for daitasu daitasu
5
300
AIエージェント・エコノミーの幕開け 〜 オープンプロトコルが変えるビジネスの未来 〜
Avatar for Shu Kobuchi shukob
0
110
Ultra Ethernet (UEC) v1.0 仕様概説
Avatar for Masayuki Kobayashi markunet
3
220
OpenClawで回す組織運営
Avatar for Kazuto Kusama jacopen
3
630
Dr. Werner Vogelsの14年のキーノートから紐解くエンジニアリング組織への処方箋@JAWS DAYS 2026
Avatar for Hiroshi Hayakawa (p0n) p0n
1
110
越境する組織づくり ─ 多様性を前提にしたチームビルディングとリードの実践知
Avatar for hrpnx kido_engineer
2
130
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.5k
Shifting from MCP to Skills / ベストプラクティスの変遷を辿る
Avatar for Okuto Oyama yamanoku
4
660
白金鉱業Meetup_Vol.22_Orbital Senseを支える衛星画像のマルチモーダルエンベディングと地理空間のあいまい検索技術
Avatar for BrainPad brainpadpr
2
250
Evolution of Claude Code & How to use features
Avatar for Oikon oikon48
1
510
Kaggleの経験が実務にどう活きているか / kaggle_findy
Avatar for Sansan R&D sansan_randd
6
1.2k

Featured

See All Featured
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Designing for Timeless Needs
Avatar for Cassini Nazir cassininazir
0
150
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
190
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
86
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
240
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
250
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k

Transcript

  1. RESPONSIVE WEB DESIGN RICARDO TORRES

  2. QUEM? @RICARDOTORRES0 /RICARDO.RICTORRES [email protected]

  3. None
  4. None

  5. ANOS 90...

  6. 640 x 480

  7. 2000...

  8. None

  9. http://alistapart.com/article/fluidgrids

  10. RESPONSIVE WEB DESIGN?

  11. None
  12. None

  13. MUITO ALÉM DAS MEDIA-QUERIES

  14. NÃO ESCONDA CONTEÚDO

  15. POR QUÊ?

  16. None
  17. None
  18. None
  19. None

  20. EXEMPLOS

  21. None

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

  23. None
  24. None
  25. None
  26. None

  27. http://mediaqueri.es

  28. MAS LEMBRE-SE...

  29. NÃO ESCONDA CONTEÚDO

  30. VAMOS AO QUE INTERESSA!

  31. COMO DESENHAR?

  32. None

  33. USE AS FERRAMENTAS QUE MAIS LHE AGRADAM!

  34. ACESSIBILIDADE USABILIDADE

  35. None
  36. None

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

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

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

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

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

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

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

  44. VALE LEMBRAR QUE...

  45. None

  46. POR ONDE COMEÇAR?

  47. UM PASSO DE CADA VEZ!

  48. MODULAÇÃO

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

  50. HTML

  51. VIEWPORT

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

  53. None
  54. None

  55. GRIDS

  56. TEXTO

  57. DEVICE ORIENTATION

  58. DEVICE ORIENTATION

  59. DEVICE ORIENTATION

  60. RESPONSIVE IMAGES*

  61. RETINA IMAGES (HDPI)

  62. None

  63. CASE

  64. CASE

  65. LER MENOS E FAZER MAIS!

  66. COM OU SEM FRAMEWORK?

  67. None

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

  69. NÃO PODEMOS EXAGERAR!

  70. E FAZ O QUÊ COM O CONTEÚDO?

  71. MOBILE FIRST

  72. http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

  73. RESPONSIVE IMAGES

  74. None

  75. PROPOSTAS

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

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

  78. None
  79. None
  80. None

  81. PERFORMANCE

  82. Devtools

  83. http://coding.smashingmagazine. com/2013/01/15/off-canvas-navigation-for- jQuery Animation

  84. http://coding.smashingmagazine. com/2013/01/15/off-canvas-navigation-for- CSS Transitions

  85. None
  86. None
  87. None

  88. TRUQUES...

  89. GENERATED CONTENT

  90. COMO DETECTAR?

  91. None

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

  93. COMO TESTAR?

  94. None

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

  96. None

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

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

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

  100. None

  101. • OPERA MOBILE EMULATOR • XCODE IOS SIMULATOR • ANDROID

    SIMULATOR • MOBILEXWEB.COM/EMULATORS EMULADORES/SIMULADORES

  102. POLYFILLS?

  103. O QUE NÃO FAZER

  104. None
  105. None
  106. None
  107. None

  108. https://managewp.com/5-reasons-why-responsive-design-is-not-worth-it

  109. http://moz.com/ugc/responsive-web-design-the-ultimate-guide-for-online-marketers

  110. OBRIGADO! ;) rictorres.com