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

Responsive Webdesign

Avatar for Tom Claus Tom Claus
January 12, 2013
Education
230
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
60
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
150
VikingSpots NG
Avatar for Tom Claus tomclaus
1
82
Budget Travelling
Avatar for Tom Claus tomclaus
4
130
Moderne Web Technologieën
Avatar for Tom Claus tomclaus
1
99
Inventis Stages
Avatar for Tom Claus tomclaus
1
81
HTML5 & CSS3
Avatar for Tom Claus tomclaus
2
390

Other Decks in Education

See All in Education
共感から、つくる: 変わり続ける自分と、誰かのための創造
Avatar for Mick Etoh micknerd
1
330
計算物理におけるGitの使い方 / 01-c-compphys
Avatar for kaityo256 kaityo256
PRO
2
610
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.2k
【セーフィー】テクニカルライティング&コミュニケーション実践講座（26新卒エンジニア向け研修資料）
Avatar for 山崎麻衣子 ymzaki_m4
0
100
From Days to Minutes: How We Taught an AI to Onboard 50+ Tenants on our AI Features
Avatar for Miguel Cabrera mfcabrera
0
110
View Manipulation and Reduction - Lecture 9 - Information Visualisation (4019538FNR)
Avatar for Beat Signer signer
PRO
1
2.6k
Measuring what matters
Avatar for Jono Alderson jonoalderson
0
280
アントレプレナーシップ教育機構 概要
Avatar for Science Tokyo （東京科学大学） / Science Tokyo (Institute of Science Tokyo) sciencetokyo
PRO
0
2.8k
Liberalism's Last Man and Asia
Avatar for Vikash Yadav vyadav
0
110
P3NFEST 2026 Spring ハンズオン「ハッキング・ラブ！はじめてのハッキングをやってみよう」資料
Avatar for Nomizo Nomizo nomizone
0
450
[2026前期火５] 論理学（京都大学文学部 前期 第4回）「 ならば（→）の導入と証明ネット」
Avatar for Shunsuke Yatabe yatabe
0
260
生成AIを授業の相棒にするデータサイエンス入門（「デジタル✕探究」イノベーターズフォーラム テクニカルセッション講演資料）
Avatar for The Japan DataScientist Society datascientistsociety
PRO
0
190

Featured

See All Featured
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
180
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
100
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.3k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.4k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
140
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
540
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
530
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
690

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