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
58
Modern Technologies
Avatar for Tom Claus tomclaus
2
360
Social Media
Avatar for Tom Claus tomclaus
5
210
Responsive & Content
Avatar for Tom Claus tomclaus
2
150
VikingSpots NG
Avatar for Tom Claus tomclaus
1
80
Budget Travelling
Avatar for Tom Claus tomclaus
4
120
Moderne Web Technologieën
Avatar for Tom Claus tomclaus
1
92
Inventis Stages
Avatar for Tom Claus tomclaus
1
76
HTML5 & CSS3
Avatar for Tom Claus tomclaus
2
390

Other Decks in Education

See All in Education
日本の情報系社会人院生のリアル -JAIST 修士編-
Avatar for Yuriko Kikuchi yurikomium
1
130
”育てる”から”育つ”仕組みへ！スクラムによる新入社員教育
Avatar for a-nakamura1015 arapon
0
160
令和政経義塾第2期説明会
Avatar for 一般財団法人 nxji
0
240
今の私を形作る４つの要素と偶然の出会い(セレンディピティ)
Avatar for Mamoru Ohashi mamohacy
2
100
質のよいアウトプットをできるようになるために～「読む・聞く、まとめる、言葉にする」を読んで～
Avatar for amarelo_n24 amarelo_n24
0
260
[FUN Open Campus 2025] 何でもセンシングしていいですか？
Avatar for Shigemi ISHIDA pman0214
0
240
Transición del Management al Neuromanagement
Avatar for José Vicente Pérez Cubias jvpcubias
0
240
2026 g0v 零時政府年會啟動提案 / g0v Summit 2026 Kickstart
Avatar for Poren Chiang rschiang
0
330
理想の英語力に一直線！最高効率な英語学習のすゝめ
Avatar for Takuto Nagami logica0419
6
420
尊敬語「くださる」と謙譲語「いただく」の使い分け
Avatar for marimari hysmrk
0
100
20250611_なんでもCopilot1年続いたぞ～
Avatar for ponponmikan ponponmikankan
0
200
DIP_1_Introduction
Avatar for Mohammed Hachama hachama
0
190

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
285
14k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
33
8.8k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
5
210
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
368
20k

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