2011年7月13日開催の第19回 HTML5勉強会のスライド。Responsive Web Design について。

1. Responsive Web Design
HTML5

4. 2010.05

6. win.html
android.html ie7.html
win.html
mac-safari.html
ie6.html
ie8.html
iphone.html
opera.html

7. win.html
android.html ie7.html webm
ie8.html
win.html
mac-safari.html
ie6.html H264
iphone.html
opera.html

8. win.html
android.html ie7.html webm
ie8.html
win.html
mac-safari.html
ie6.html H264
iphone.html
opera.html

9. Android

10. Ginger Bread

11. Android2.3

12. Android3.0

13. Android2.3

18. smart TV

19. TV in the bath

20. car navigation

22. Yes We Can

33. I’ve always thought of myself as an 80 percenter. I like to
throw myself passionately into a sport or activity until I reach
80 percent proficiency level. To go beyond that requires an
obsession and degree of specialization that doesn’t appeal to
me.
80 percenter

34. Responsive Web Design

35. Responsive Architecture

36. W3C

38. Opera

39. Responsive Web Design

40. Responsive Web Design
• Grid Design

41. Responsive Web Design
• Grid Design
• Fluid Image

42. Responsive Web Design
• Grid Design
• Fluid Image
• Media Query

43. Fluid Grid

44. Grid Design

46. Liquid Layout

47. Liquid Layout
body { width : 960px}
#main { width : 576px}
#sub { width : 384px}

48. Liquid Layout
body { width : 93.75%}
#main { width : 60%}
#sub { width : 40%}

49. Liquid Layout
body { width : 93.75%}
#main { width : 60%}
#sub { width : 40%}

50. Liquid Layout
body { width : 93.75%}
#main { width : 60%}
#sub { width : 40%}

51. Liquid Layout
body { width : 93.75%}
#main { width : 60%}
#sub { width : 40%}

52. Fluid Image

54. Fluid Image
img { max-width : 100%}
.ie6 img { width : 100%}

55. box-sizing

56. box-sizing

58. box-sizing
nav ul li a {
display : block;
width : 25%;
border : 1px solid black; }

59. box-sizing
nav ul li a {
display : block;
width : 25%;
border : 1px solid black; }

60. box-sizing
nav ul li a {
display : block;
width : 25%;
border : 1px solid black;
-webkit-box-sizing : border-box;
-moz-box-sizing : border-box;
box-sizing : border-box }

61. background-size

62. background-size
body {
-webkit-background-size : cover;
background-size : cover}
body {
-webkit-background-size : contain;
background-size : contain}

63. background-size
body {
-webkit-background-size : cover;
background-size : cover}
body {
-webkit-background-size : contain;
background-size : contain}

64. background-size
body {
-webkit-background-size : cover;
background-size : cover}
body {
-webkit-background-size : contain;
background-size : contain}

65. cover

66. contain

67. p,li{
-ms-line-break:strict;
line-break:strict;
-ms-word-break:break-strict;
word-break:break-strict}

68. imgsizr.js

69. imgsizr.js

70. imgsizr.js

72. respond.js IE6-8

73. respond.js IE6-8

74. respond.js IE6-8

75. respond.js IE6-8

76. Mobile Boilerplate

77. Mobile Boiler Plate

78. 320andUp

79. 320andUp

89. mantangs@gmail.com

90. mantangs@gmail.com