2013年7月20日（土）第26回 オープンラボ岡山にてセッション。 http://local.aguuu.com/events/19055

1. © 2843 all rights reserved.
ユーザーへより良いWebを提供するために
Serve the better Web to Users

2. Serve the better Web to Users
@ohtsuki2843
Marketing, Consulting,
Design, Markup,
Frontend, Backend,
Smartphone Apps,
Lecture, Writing

3. The Future is just around the corner
http://2843.jp/rollpaper/

4. Serve the better Web to Users
agenda
ユーザーへより良いWebを提供するために

5. Serve the better Web to Users
マルチデバイス対応
theme

6. Serve the better Web to Users
“2nd Shift” has come.
@maepon

7. Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/

8. Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/

9. Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/

10. Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/

11. Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/

12. Serve the better Web to Users
http://gadgets.ndtv.com/others/news/samsungs-t9000-smart-refrigerator-runs-on-
android-includes-apps-like-evernote-and-epicurious-320610

13. Serve the better Web to Users
http://blog.evernote.com/blog/2013/01/23/beyond-the-evernote-fridge/

14. Serve the better Web to Users

15. Serve the better Web to Users
http://www.youtube.com/watch?v=ZAhiHY5KtXk

16. Serve the better Web to Users
http://www.google.com/glass/start/

17. Serve the better Web to Users
Mozilla/5.0 (Linux; U; Android 4.0.4; en-us; Glass 1
Build/IMM76L; XE7) AppleWebKit/534.30 (KHTML,
like Gecko) Version/4.0 Mobile Safari/534.30

18. Serve the better Web to Users
• device-width: 640px
• device-height: 360px
• width: 427px
• height: 240px
• orientation: landscape
• -webkit-device-pixel-ratio: 1.5

19. Serve the better Web to Users
http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design

20. Serve the better Web to Users
http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design

21. Serve the better Web to Users
http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design

22. Serve the better Web to Users
http://www.businessinsider.com/a-smart-watch-for-dell-may-be-on-the-horizon-2013-7

23. Serve the better Web to Users
デバイスの断片化

24. Serve the better Web to Users
Web Server
HTML CSS
for feature phone-A
HTML CSS
for feature phone-B
HTML CSS
for smartphone-A
HTML CSS
for smartphone-B
HTML CSS
for tablet-A
HTML CSS
for tablet-B
HTML CSS
for desktop
PHP script, Ruby script, or .htaccess, and so on.
User Agent User Agent User Agent User Agent

25. The Future is just around the corner
http://www.windowsphone.com/en-us

26. The Future is just around the corner
http://www.mozilla.org/en-US/firefox/os/
https://www.tizen.org/
http://jolla.com/

27. Serve the better Web to Users

28. Serve the better Web to Users

29. Serve the better Web to Users

30. Serve the better Web to Users

31. Serve the better Web to Users

32. Serve the better Web to Users

33. Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/

34. Serve the better Web to Users
Probably, it will already be impossible.

35. Serve the better Web to Users
Responsive Web Design

36. Serve the better Web to Users
http://www.bostonglobe.com/

37. Serve the better Web to Users
http://www.microsoft.com/ja-jp/default.aspx

38. Serve the better Web to Users
https://developers.google.com/webmasters/smartphone-sites/

39. Serve the better Web to Users
https://developers.google.com/webmasters/smartphone-sites/details

40. Serve the better Web to Users
http://googlewebmastercentral.blogspot.jp/2013/06/changes-in-rankings-of-smartphone_11.html

41. Serve the better Web to Users

42. Serve the better Web to Users

43. Serve the better Web to Users
http://www.w3.org/Consortium/mission.html

44. Serve the better Web to Users
http://www.w3.org/TR/2004/REC-webarch-20041215/#uri-aliases

45. Serve the better Web to Users
http://kidachi.kazuhi.to/blog/archives/037798.html

46. Serve the better Web to Users
http://alistapart.com/article/responsive-web-design

47. Serve the better Web to Users
responsive one source

48. Serve the better Web to Users
Web Server
HTML CSS

49. Serve the better Web to Users
No!

50. Serve the better Web to Users
responsive future friendly

51. Serve the better Web to Users
http://futurefriend.ly/

52. Serve the better Web to Users
http://info.cern.ch/hypertext/WWW/TheProject.html

53. Serve the better Web to Users
http://info.cern.ch/hypertext/WWW/TheProject.html

54. Serve the better Web to Users
Fluid Grids
Flexible Images
Media Queries

55. Serve the better Web to Users
Fluid Grids

56. Serve the better Web to Users
Header
Main Content Side Navi
640px 300px
960px
Footer
960px
Header
Main Content Side Navi
66.67% 31.25%
100%
Footer
100%

57. Header
Main Content Side Navi
640px 300px
960px
Footer
960px
Header
Main Content Side Navi
640px 300px
960px
Footer
960px
Header
Main Content
640px
960px
Footer
960px
Header
Main Content Side Navi
640px 300px
960px
Footer
960px
Serve the better Web to Users

58. Header
Main Content Side Navi
66.67% 31.25%
100%
Footer
100%
Header
Main Content
Side
Navi
66.67% 31.25%
100%
Footer
100%
Header
Main Content Side Navi
66.67% 31.25%
100%
Footer
100%
Serve the better Web to Users

59. Serve the better Web to Users
#main-content {
width: 66.67%;
}
#side-navi {
width: 31.25%;
}
#main-content {
width: 640px;
}
#side-navi {
width: 300px;
}

60. Serve the better Web to Users
Flexible Images

61. Header
Main Content
Side Navi
640px 300px
960px
Footer
960px
640px
Image
Header
Main Content
Side Navi
66.67% 31.25%
100%
Footer
100%
100%
Image
Serve the better Web to Users

62. Serve the better Web to Users
Header
Main Content
Side Navi
640px 300px
960px
Footer
960px
640px
Image
Header
Main Content
Side Navi
640px 300px
960px
Footer
960px
640px
Image
Header
Main Content
640px
960px
Footer
960px
640px
Image
Header
Main Content
Side Navi
640px 300px
960px
Footer
960px
640px
Image

63. Serve the better Web to Users
Header
Main Content
Side Navi
66.67% 31.25%
100%
Footer
100%
100%
Image
Header
Main Content Side
Navi
66.67% 31.25%
100%
Footer
100%
Header
Main Content
Side Navi
66.67%
31.25%
100%
Footer
100%
100%
Image
Image
100%

64. Serve the better Web to Users
Header
Main Content
Side Navi
66.67% 31.25%
100%
Footer
100%
640px
Image
640px
Image
Header
Main Content
640px
Image
Side
Navi
66.67% 31.25%
100%
Footer
100%
Header
Main Content
Side Navi
66.67% 31.25%
100%
Footer
100%
640px
Image

65. Serve the better Web to Users
#main-content {
img {
max-width: 100%;
}
}
<img src=”hoge.png”>
<img src=”hoge.png” width=”640” height=”480”>
Sass

66. Serve the better Web to Users
Media Queries

67. Serve the better Web to Users
Header
Main Content
Side Navi
Footer
Header
Main Content Side Navi
Footer

68. Serve the better Web to Users
<link rel="stylesheet" href="css/style-smart-device.css"
media="only screen and (max-width: 768px)">
<link rel="stylesheet" href="css/style-desktop.css"
media="only screen and (min-width: 769px)">

69. Serve the better Web to Users
@media screen and (max-width: 768px) {
}
@media screen and (min-width: 769px) {
}

70. Serve the better Web to Users
<link rel="stylesheet" href="css/style-google-glass.css"
media="only screen and (width: 427px)">
@media screen and (width: 427px) {
}

71. Serve the better Web to Users
Fluid Grids
Flexible Images
Media Queries

72. Serve the better Web to Users
Responsive Web Design

73. Serve the better Web to Users
All were solved?

74. Serve the better Web to Users
issue about images

75. Serve the better Web to Users
device-pixel-ratio

76. Serve the better Web to Users

77. Serve the better Web to Users
@1x @2x

78. Serve the better Web to Users
@1x
@2x
@3x

79. Serve the better Web to Users
device-pixel-ratio: 3

80. Serve the better Web to Users
<img src=”hoge@3x.jpg”>

81. Serve the better Web to Users

82. Serve the better Web to Users

83. Serve the better Web to Users
<span data-picture>
<span data-src="img/hoge.jpg"></span>
<span data-src="img/hoge@2x.jpg" data-media="(-webkit-
min-device-pixel-ratio: 2.0)"></span>
<span data-src="img/hoge@3x.jpg" data-media="(-webkit-
min-device-pixel-ratio: 3.0)"></span>
</span>

84. Serve the better Web to Users

85. Serve the better Web to Users

86. Serve the better Web to Users

87. Serve the better Web to Users
<script>
document.cookie='devicePixelRatio='+
((window.devicePixelRatio === undefined) ? 1 :
window.devicePixelRatio)+'; path=/';
</script>
<img src="img/hoge.jpg">

88. Serve the better Web to Users
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .(?:jpe?g|gif|png)$ retinaimages.php [L]
</IfModule>

89. Serve the better Web to Users
Web Server
Image@1x
Image@2x
Image@3x
retinaimages.php and .htaccess
GET Image@1x HTTP/1.1

90. Serve the better Web to Users

91. Serve the better Web to Users
Web Server
Image
upload

92. Serve the better Web to Users
issue about contents

93. Serve the better Web to Users
for desktop for smartphone
Header
Main Content
Side Navi
Footer
Header
Main Content Side Navi
Footer

94. Serve the better Web to Users
252 requests, 7.1MB transferred, 10.91s

95. Serve the better Web to Users
252 requests, 7.1MB transferred, 16.58s

96. Serve the better Web to Users
for desktop for smartphone
Header
Main Content
Side Navi
Footer
Header
Main Content Side Navi
Footer
242 requests
7.1MB transferred,
10.91s
242 requests
7.1MB transferred,
16.58s

97. Serve the better Web to Users
Header
Main Content
Side Navi
Footer
Content 1
Content 2
#content2,
#side-navi {
display: none;
}
Header
Main Content
Footer
Content 1

98. Serve the better Web to Users
Header
Main Content
Side Navi
Footer
Content 1
Content 2
#content2,
#side-navi {
display: none;
}
Header
Main Content
Footer
Content 1
242 requests
7.1MB transferred,
10.91s
242 requests
7.1MB transferred,
16.58s

99. Serve the better Web to Users
http://kidachi.kazuhi.to/blog/archives/037798.html

100. Serve the better Web to Users
http://www.nd.edu/

101. Serve the better Web to Users
for desktopfor smartphone

102. Serve the better Web to Users
for desktopfor smartphone
24 requests
0.3MB transferred,
1.90s
131 requests
2.4MB transferred,
6.43s

103. Serve the better Web to Users

104. Serve the better Web to Users

105. Serve the better Web to Users

106. Serve the better Web to Users

107. Serve the better Web to Users

108. Serve the better Web to Users

109. Serve the better Web to Users

110. Serve the better Web to Users

111. Serve the better Web to Users

112. Serve the better Web to Users

113. Serve the better Web to Users

114. Serve the better Web to Users

115. Serve the better Web to Users

116. Serve the better Web to Users

117. Serve the better Web to Users
Web Server
HTML CSS
GET / HTTP/1.1
content components
About Academics Admissions Faith &
Service
header for
smartdevice
header for
desktop
footer for
smartdevice
footer for
desktop
main content components

118. Serve the better Web to Users
Web Server
GET /about/ HTTP/1.1
content components
About Academics Admissions Faith &
Service
header for
smartdevice
header for
desktop
footer for
smartdevice
footer for
desktop
main content components
HTML CSS

119. Serve the better Web to Users
EngineerDesigner
Design
Markup
Programming
Design
Markup
Programming
EngineerDesigner

120. Serve the better Web to Users
dropout dropout

121. Serve the better Web to Users

122. Serve the better Web to Users
No Backend Engineers,
No Web.

123. Serve the better Web to Users
Thank you for your attention.
@ohtsuki2843feedback