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

Responsive Webdesign

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Tom Claus Tom Claus
January 12, 2013
Education
240
4

Responsive Webdesign

Responsive Webdesign presentation at KHLim on 11 january 2013

Avatar for Tom Claus

Tom Claus

January 12, 2013

More Decks by Tom Claus

See All by Tom Claus
Infosessions testgroup - New Platform
Avatar for Tom Claus tomclaus
0
68
Modern Technologies
Avatar for Tom Claus tomclaus
2
370
Social Media
Avatar for Tom Claus tomclaus
5
210
Responsive & Content
Avatar for Tom Claus tomclaus
2
160
VikingSpots NG
Avatar for Tom Claus tomclaus
1
85
Budget Travelling
Avatar for Tom Claus tomclaus
4
130
Moderne Web Technologieën
Avatar for Tom Claus tomclaus
1
110
Inventis Stages
Avatar for Tom Claus tomclaus
1
83
HTML5 & CSS3
Avatar for Tom Claus tomclaus
2
400

Other Decks in Education

See All in Education
データマネジメント試験対策教材１〜データマネジメント基礎〜
Avatar for よしむら＠データマネジメント担当 yoshimura_datam
1
670
25-26 CBT Library top items
Avatar for cbtlibrary cbtlibrary
0
120
プログラミング言語において文字列を複数行にわたって だらだらと記載するアレ
Avatar for sapi_kawahara sapi_kawahara
0
210
医師がスタッフに AI を教えるとき、どんな内容を話しているか
Avatar for osawa-ux osawaux
1
110
Info Session MSc Computer Science & MSc Applied Informatics
Avatar for Beat Signer signer
PRO
0
310
2026年度春学期　統計学　第11回　分布の「型」を考える － 確率分布モデルと正規分布 (2026. 6. 11)
Avatar for Akira Asano akiraasano
PRO
0
170
2026年度春学期　統計学　第15回　分布についての仮説を検証する ― 仮説検定（２） (2026. 7. 9)
Avatar for Akira Asano akiraasano
PRO
0
120
[2026前期火５] 論理学（京都大学文学部 前期 第4回）「 ならば（→）の導入と証明ネット」
Avatar for Shunsuke Yatabe yatabe
0
560
FA26 CLU MS Clinical Psychology New Student Orientation
Avatar for Jamie D. Bedics, PHD, ABPP jdbedics
0
160
子どものためのプログラミング道場『CoderDojo』〜法人提携例〜 / Partnership with CoderDojo Japan
Avatar for CoderDojo Japan coderdojojapan
PRO
4
19k
プロポーザルを書く技術とアンチパターン/proposal-writing-and-antipatterns
Avatar for moriyuya moriyuya
14
3.7k
AIには考えられないことを考えられる人になるために
Avatar for IQBocchi iqbocchi
1
240

Featured

See All Featured
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
480
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
260
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
63k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
340
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
2k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
63
45k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
310
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
390
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
Avatar for Tech SEO Connect techseoconnect
PRO
0
400

Transcript

  1. Responsive

  2. None
  3. None

  4. The future of Mobile

  5. The number of people using the web on mobile devices

    is set to surpass desktop by 2015
  6. None
  7. None
  8. None
  9. None

  10. Mobile should never be an afterthought

  11. Separate mobile websites

  12. None
  13. None

  14. Not a solution!

  15. Separate mobile applications

  16. None

  17. (some cases) A possible solution

  18. Responsive webdesign

  19. None
  20. None
  21. None
  22. None
  23. None

  24. http://mediaqueri.es

  25. Become responsive!

  26. 1. Adaptive Grids, Images & Media 2. Media Queries 3.

    Testing, Crying & Tweaking 4. ??? 5. Profit

  27. Grids

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None

  34. CSS Frameworks

  35. None
  36. None
  37. None

  38. Video Solutions

  39. None
  40. None
  41. None
  42. None

  43. max-width: 100% Flexible Media

  44. Adaptive Images

  45. EDGE is the new dial-up

  46. None
  47. None
  48. None
  49. None

  50. Network Link conditioner

  51. ViewPort

  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None

  63. MediaQueries

  64. None
  65. None
  66. None
  67. None
  68. None
  69. None

  70. Mobile First

  71. 1. Default browser style 2. Desktop CSS 3. Tablet CSS

    4. Mobile CSS Desktop first (mobile)

  72. 1. Default browser style 2. Mobile CSS Mobile first (mobile)

  73. 1. Default browser style 2. Mobile CSS 3. Tablet CSS

    Mobile first (tablet)

  74. 1. Default browser style 2. Mobile CSS 3. Tablet CSS

    4. Desktop CSS Mobile first (desktop)

  75. Crying / Testing

  76. None
  77. None
  78. None
  79. None
  80. None