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
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
94
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
HyRead2526
Avatar for cbtlibrary cbtlibrary
1
220
演習：Gitの基本操作 / 04-git-basic
Avatar for kaityo256 kaityo256
PRO
0
340
Leveraging LLMs for student feedback in introductory data science courses (Stats Up AI)
Avatar for Mine Cetinkaya-Rundel minecr
1
240
IHLヘルスケアリーダーシップ研究会17期説明資料
Avatar for IHLヘルスケアリーダーシップ研究会 ihlhealthcareleadership
0
2k
次期バージョン 14.5.1 Early Access Program が始まりました
Avatar for Haruyuki Nakano harunakano
1
120
Pen-based Interaction - Lecture 4 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2.1k
Avoin jakaminen ja Creative Commons -lisenssit
Avatar for Matleena Laakso matleenalaakso
0
2.1k
Security, Privacy and Trust - Lecture 11 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
Railsチュートリアル × 反転学習の事例紹介
Avatar for YassLab yasslab
PRO
3
170k
東大１年生にJulia教えてみた
Avatar for Yusuke Matsui matsui_528
7
12k
Multimodal Interaction - Lecture 3 - Next Generation User Interfaces (4018166FNR)
Avatar for Beat Signer signer
PRO
0
2k
2026 Medicare 101 Presentation
Avatar for Robin Lee robinlee
PRO
0
190

Featured

See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
1
1.9k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
86
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
440
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
220
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.8k
SEO for Brand Visibility & Recognition
Avatar for Aleyda Solis aleyda
0
4.4k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k

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