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

Responsive Webdesign

Avatar for Tom Claus Tom Claus
January 12, 2013
Education
4
230

Responsive Webdesign

Responsive Webdesign presentation at KHLim on 11 january 2013
Avatar for Tom Claus

Tom Claus

January 12, 2013
Tweet

More Decks by Tom Claus

See All by Tom Claus
Infosessions testgroup - New Platform
Avatar for Tom Claus tomclaus
0
56
Modern Technologies
Avatar for Tom Claus tomclaus
2
350
Social Media
Avatar for Tom Claus tomclaus
5
200
Responsive & Content
Avatar for Tom Claus tomclaus
2
140
VikingSpots NG
Avatar for Tom Claus tomclaus
1
77
Budget Travelling
Avatar for Tom Claus tomclaus
4
120
Moderne Web Technologieën
Avatar for Tom Claus tomclaus
1
90
Inventis Stages
Avatar for Tom Claus tomclaus
1
74
HTML5 & CSS3
Avatar for Tom Claus tomclaus
2
390

Other Decks in Education

See All in Education
Education-JAWS #3 ~教育現場に、AWSのチカラを~
Avatar for モブエンジニア masakiokuda
0
160
新卒研修に仕掛ける 学びのサイクル / Implementing Learning Cycles in New Graduate Training
Avatar for takashi takashi_toyosaki
1
140
ふりかえり研修2025
Avatar for pokotyamu pokotyamu
0
1.1k
2025年度春学期　統計学　第5回　分布をまとめるー記述統計量（平均・分散など） (2025. 5. 8)
Avatar for Akira Asano akiraasano
PRO
0
110
ビジネスモデル理解
Avatar for リスナビ takenawa
0
4.2k
小さなチャレンジが生んだチームの大きな変化 -私のふりかえり探求の原点
Avatar for Ryo Tanaka callas1900
0
520
IMU-00 Pi
Avatar for kanaya kanaya
0
360
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
1.7k
Info Session MSc Computer Science & MSc Applied Informatics
Avatar for Beat Signer signer
PRO
0
180
Design Guidelines and Principles - Lecture 7 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
0
2.4k
サンキッズゾーン 春日井駅前 ご案内
Avatar for Sanyo Homes sanyohomes
0
290
社外コミュニティと「学び」を考える
Avatar for Ryotaro Harada alchemy1115
2
160

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
92
6.1k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
181
53k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
350
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.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