Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Responsive Webdesign

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
86
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
410

Other Decks in Education

See All in Education
2026年度春学期　統計学　第11回　分布の「型」を考える － 確率分布モデルと正規分布 (2026. 6. 11)
Avatar for Akira Asano akiraasano
PRO
0
180
CLASSIFICATION OF CRUDE DRUGS
Avatar for Pawan Kumar Sahu pawan5505
0
160
2026年度春学期　統計学　第13回　不確かな測定の不確かさを測る ― 不偏分散とt分布 (2026. 6. 25)
Avatar for Akira Asano akiraasano
PRO
1
180
[2026前期火５] 論理学（京都大学文学部 前期 第5回）「 ならばの問題演習・proof net・かつの規則」
Avatar for Shunsuke Yatabe yatabe
0
420
Visionary Initiative: Materials-Positive Society — Evolving “Things,” empowering a positive society | Science Tokyo
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
250
セキュリティ担当がいない中小医療機関を院外のRISSはどう支えるべきか / How External RISS Can Help Small Medical Institutions
Avatar for Kengo TODA eller86
0
190
0526
Avatar for cbtlibrary cbtlibrary
0
270
中小規模私大の教学IRを支えるデータマネジメント ― データ基盤構築の取り組みと実務の現在地 ―
Avatar for Takeo Terazawa terazawa
0
110
Plano urbano de Madrid desde el Ensanche al s. XXI (2ª parte).
Avatar for Juan Martín Martín juanmartin2026
1
61k
Data Management and Analytics Specialisation
Avatar for Beat Signer signer
PRO
0
2k
AI時代のセキュリティ監査
Avatar for shogo matsumoto matshogo
PRO
0
110
Visionary Initiative: Future Intelligence 「未来の知性と社会の礎を築く」｜Science Tokyo（東京科学大学）
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
1.6k

Featured

See All Featured
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
310
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
6.2k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
56
3.5k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
300
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
230
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.2k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
370
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.8k

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