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

Responsive Webdesign

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
63
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
84
Budget Travelling
Avatar for Tom Claus tomclaus
4
130
Moderne Web Technologieën
Avatar for Tom Claus tomclaus
1
100
Inventis Stages
Avatar for Tom Claus tomclaus
1
82
HTML5 & CSS3
Avatar for Tom Claus tomclaus
2
400

Other Decks in Education

See All in Education
Πλουτοκρατία: Η Τυραννία του Μαμμωνά και η Μεταανθρώπινη Δουλεία
Avatar for Amethystos amethyst1
0
260
Alumnote inc. Company Deck
Avatar for Alumnote yukinumata
1
19k
Gitがない時代 インターネットがない時代の 開発話
Avatar for sapi_kawahara sapi_kawahara
0
200
Measuring what matters
Avatar for Jono Alderson jonoalderson
0
350
Data Physicalisation - Lecture 9 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
1
1k
自己紹介 / who-am-i
Avatar for Yohei Yasukawa yasulab
6
6.8k
AIには考えられないことを考えられる人になるために
Avatar for IQBocchi iqbocchi
1
130
Catecismo 26 #1 - Aula inaugural
Avatar for Congregação Mariana da Imaculada Conceição e Santo Afonso de Ligório cm_manaus
0
160
Implicit and Cross-Device Interaction - Lecture 10 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
2
2.3k
Managing Complexity: India’s Semiconductor Ambitions & New Industrial Policy
Avatar for Vikash Yadav vyadav
0
160
AWS Certified Generative AI Developer - Professional Beta 不合格体験記
Avatar for amarelo_n24 amarelo_n24
1
280
면접관 눈에 띄는 데이터 분석 포트폴리오 만드는 법 | 2026년 5월 세미나
Avatar for 데이터리안 datarian
0
500

Featured

See All Featured
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
810
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
930
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
140
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.8k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
1
130
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.5k

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