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
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
1014
Avatar for cbtlibrary cbtlibrary
0
520
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
360
コマンドラインを見直そう（1995年からタイムリープ）
Avatar for sapi_kawahara sapi_kawahara
0
660
【dip】「なりたい自分」に近づくための、「自分と向き合う」小さな振り返り
Avatar for ディップ株式会社 dip_tech
PRO
0
220
TypeScript初心者向け完全ガイド
Avatar for MIKIO KUBO mickey_kubo
1
120
【洋書和訳：さよならを待つふたりのために】第1章　出会いとメタファー
Avatar for 柳沼諒平 yaginumatti
0
220
20251119 如果是勇者欣美爾的話, 他會怎麼做? 東海資工
Avatar for Phil Huang pichuang
0
170
学習指導要領と解説に基づく学習内容の構造化の試み / Course of study Commentary LOD JAET 2025
Avatar for Masao Takaku masao
0
120
0121
Avatar for cbtlibrary cbtlibrary
0
120
子どもが自立した学習者となるデジタルの活用について
Avatar for Naoki Kato naokikato
PRO
0
180
1216
Avatar for cbtlibrary cbtlibrary
0
140
160人の中高生にAI・技術体験の講師をしてみた話
Avatar for ShuntaToda shuntatoda
0
290

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
510
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
Avatar for Tech SEO Connect techseoconnect
PRO
0
80
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
0
170
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.6k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
61k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Designing for Performance
Avatar for Lara Hogan lara
610
70k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
180
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k

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