Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Responsive Webdesign

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
69
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
160
VikingSpots NG
Avatar for Tom Claus tomclaus
1
86
Budget Travelling
Avatar for Tom Claus tomclaus
4
130
Moderne Web Technologieën
Avatar for Tom Claus tomclaus
1
110
Inventis Stages
Avatar for Tom Claus tomclaus
1
86
HTML5 & CSS3
Avatar for Tom Claus tomclaus
2
410

Other Decks in Education

See All in Education
Another One Writes the Code
Avatar for Mine Cetinkaya-Rundel minecr
0
120
Sekolah Sabat - Triwulan 4 2026 - Pelajaran 3
Avatar for Adam hiola
0
7.1k
LP2627
Avatar for cbtlibrary cbtlibrary
0
170
20260908_ターゲットとスコープを決める発表法
Avatar for モブエンジニア masakiokuda
1
150
TISSUE
Avatar for Pawan Kumar Sahu pawan_pharm
0
300
Introduction to M&A
Avatar for Dr. Bharath V bvr7352
0
250
日本における応用言語学・言語教育学 これまでとこれから
Avatar for TerasawaT terasawat
0
190
The Dirty Dozen: 12 gala mistakes you don’t know you’re making
Avatar for Auctria auctria
PRO
0
230
El Geoparque Mundial UNESCO Volcanes de Calatrava de la Investigación Científica a la Transposición Didáctica en el aula
Avatar for Juan Martín Martín juanmartin2026
1
58k
2026年度秋学期　統計学　第5回　分布をまとめるー記述統計量（平均・分散など） (2026. 10. 27)
Avatar for Akira Asano akiraasano
PRO
0
150
人間関係に取り組む、その時に / step away to make space
Avatar for Aki spring_aki
0
180
【ainiチャット】2段階認証設定方法
Avatar for aini school小中等部 ainischool
0
150

Featured

See All Featured
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
23k
Visual Storytelling: How to be a Superhuman Communicator
Avatar for David Neal reverentgeek
2
730
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
600
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
14
40k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
490
Done Done
Avatar for chrislema chrislema
187
17k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
2
320
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k

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