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
92
Inventis Stages
Avatar for Tom Claus tomclaus
1
76
HTML5 & CSS3
Avatar for Tom Claus tomclaus
2
390

Other Decks in Education

See All in Education
Online Privacy
Avatar for Takahito Sakamoto takahitosakamoto
1
120
Transición del Management al Neuromanagement
Avatar for José Vicente Pérez Cubias jvpcubias
0
240
相互コミュニケーションの難しさ
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
0
270
H5P-työkalut
Avatar for Matleena Laakso matleenalaakso
4
40k
吉岡研究室紹介(2025年度）
Avatar for Yoshioka Lab (Keio CSG) kentaroy47
0
350
Técnicas y Tecnología para la Investigación Neurocientífica en el Neuromanagement
Avatar for José Vicente Pérez Cubias jvpcubias
0
170
高校におけるプログラミング教育を考える
Avatar for Naoki Kato naokikato
PRO
0
160
株式会社アイエスエイ 会社概要
Avatar for recruit_ISA recruit_isa
0
110
情報科学類で学べる専門科目38選
Avatar for Mutsuha Asada momeemt
0
630
EVOLUCIÓN DE LAS NEUROCIENCIAS EN LOS CONTEXTOS ORGANIZACIONALES
Avatar for José Vicente Pérez Cubias jvpcubias
0
180
20250830_MIEE祭_会社員視点での学びのヒント
Avatar for ponponmikan ponponmikankan
1
170
中央教育審議会 教育課程企画特別部会 情報・技術ワーキンググループに向けた提言 ー次期学習指導要領での情報活用能力の抜本的向上に向けてー
Avatar for みんなのコード codeforeveryone
0
320

Featured

See All Featured
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
980
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
33
2.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.2k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
431
66k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.4k

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