$30 off During Our Annual Pro Sale. View Details »

Responsive Webdesign

Tom Claus
January 12, 2013
Education
4
230

Responsive Webdesign

Responsive Webdesign presentation at KHLim on 11 january 2013

Tom Claus

January 12, 2013
Tweet

More Decks by Tom Claus

See All by Tom Claus
Infosessions testgroup - New Platform
tomclaus
0
54
Modern Technologies
tomclaus
2
350
Social Media
tomclaus
5
200
Responsive & Content
tomclaus
2
140
VikingSpots NG
tomclaus
1
77
Budget Travelling
tomclaus
3
120
Moderne Web Technologieën
tomclaus
1
88
Inventis Stages
tomclaus
1
74
HTML5 & CSS3
tomclaus
2
380

Other Decks in Education

See All in Education
Ch2_-_Partie_3.pdf
bernhardsvt
0
100
Web 2.0 Patterns and Technologies - Lecture 8 - Web Technologies (1019888BNR)
signer
PRO
0
2.4k
20241002_Copilotって何？＋Power_AutomateのCopilot
ponponmikankan
1
160
Lisätty todellisuus opetuksessa
matleenalaakso
1
2.3k
オープンソース防災教育ARアプリの開発と地域防災での活用
nro2daisuke
0
180
Zoom-ohjeet
matleenalaakso
7
7.2k
Web Search and SEO - Lecture 10 - Web Technologies (1019888BNR)
signer
PRO
2
2.4k
Chapitre_1_-__L_atmosphère_et_la_vie_-_Partie_2.pdf
bernhardsvt
0
210
Web Architectures - Lecture 2 - Web Technologies (1019888BNR)
signer
PRO
0
2.7k
MLH Hackcon: Keynote (2024)
theycallmeswift
0
190
Stratégie de marketing digital - les fondamentaux
martine
0
100
LLMs for Social Simulation: Progress, Opportunities and Challenges
wingnus
1
100

Featured

See All Featured
Typedesign – Prime Four
hannesfritz
40
2.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
740
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
A better future with KSS
kneath
238
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
For a Future-Friendly Web
brad_frost
175
9.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
17k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
How STYLIGHT went responsive
nonsquared
95
5.2k

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