Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Webdesign

Tom Claus
January 12, 2013
Education
4
210

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
46
Modern Technologies
tomclaus
2
350
Social Media
tomclaus
5
190
Responsive & Content
tomclaus
2
130
VikingSpots NG
tomclaus
1
69
Budget Travelling
tomclaus
3
110
Moderne Web Technologieën
tomclaus
1
82
Inventis Stages
tomclaus
1
66
HTML5 & CSS3
tomclaus
2
380

Other Decks in Education

See All in Education
インターアクトクラブについて：国際ロータリー第2720地区インターアクト委員会 委員長・大分東ロータリークラブ 阿部 克哉 氏
2720japanoke
0
660
HCL Notes 14.0 「スタイルの変更」で「3 設定の確認」を深掘り
harunakano
0
1.9k
AI教育の未来『おもしろい』を作れる人材の育て方 #東京AI祭
o_ob
1
350
自由の森学園学校紹介資料
jiyunomori
0
1.4k
令和6年度 無料トライアルキャンペーン説明会
asial_edu
0
610
HyRead2324
cbtlibrary
0
120
スクフェスの学びにチームを惹き込め！ 社内同時視聴会のすゝめ！
pokotyamu
0
690
Copilotとして理解する生成AI利用の基本
gmoriki
0
130
[SemanaX-UFCG-2024] Guia descomplicado de entrevistas FAANG
hugaomarques
2
450
執筆テーマの決め方
sapi_kawahara
1
170
千葉県印西市立・原山小学校における新たな学び「情報探究の時間」実践報告』
codeforeveryone
1
680
心房細動週間ポスター（2024年3月6日）
japanstrokeassociation
0
250

Featured

See All Featured
Making the Leap to Tech Lead
cromwellryan
123
8.5k
A designer walks into a library…
pauljervisheath
199
23k
A Modern Web Designer's Workflow
chriscoyier
688
190k
Designing for Performance
lara
601
67k
GraphQLとの向き合い方2022年版
quramy
31
12k
Bootstrapping a Software Product
garrettdimon
PRO
301
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Robots, Beer and Maslow
schacon
PRO
155
7.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k

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