Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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
93
Inventis Stages
Avatar for Tom Claus tomclaus
1
77
HTML5 & CSS3
Avatar for Tom Claus tomclaus
2
390

Other Decks in Education

See All in Education
20251119 如果是勇者欣美爾的話, 他會怎麼做? 東海資工
Avatar for Phil Huang pichuang
0
140
The World That Saved Me: A Story of Community and Gratitude
Avatar for hashimo2 _hashimo2
3
360
HTML5 and the Open Web Platform - Lecture 3 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
2
3.1k
1008
Avatar for cbtlibrary cbtlibrary
0
110
NUTMEG紹介スライド
Avatar for Mugicha mugiiicha
0
280
仏教の源流からの奈良県中南和_奈良まほろば館‗飛鳥・藤原DAO/asuka-fujiwara_Saraswati
Avatar for Tomohiro Kimura tkimura12
0
160
今の私を形作る４つの要素と偶然の出会い(セレンディピティ)
Avatar for Mamoru Ohashi mamohacy
2
130
とある長岡高専卒のおっさんがIT企業のマネージャーになるまで / journey-from-nagaoka-kosen-grad-to-it-manager
Avatar for TAKANO Sho / @masaru_b_cl masaru_b_cl
0
170
～キャラ付け考えていますか？～　AI時代だからこそ技術者に求められるセルフブランディングのすゝめ
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
7
540
2025年度伊藤正彦ゼミ紹介
Avatar for imash imash
0
130
沖ハック~のみぞうさんとハッキングチャレンジ☆~
Avatar for Nomizo Nomizo nomizone
1
520
【ZEPメタバース校舎操作ガイド】
Avatar for aini school小中等部 ainischool
0
680

Featured

See All Featured
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
174
15k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
58
6.2k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.3k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
390
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.7k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k

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