© 2843 all rights reserved.
ユーザーへより良いWebを提供するために
Serve the better Web to Users
Serve the better Web to Users
@ohtsuki2843
Marketing, Consulting,
Design, Markup,
Frontend, Backend,
Smartphone Apps,
Lect...
The Future is just around the corner
http://2843.jp/rollpaper/
Serve the better Web to Users
agenda
ユーザーへより良いWebを提供するために
Serve the better Web to Users
マルチデバイス対応
theme
Serve the better Web to Users
“2nd Shift” has come.
@maepon
Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/
Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/
Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/
Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/
Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/
Serve the better Web to Users
http://gadgets.ndtv.com/others/news/samsungs-t9000-smart-refrigerator-runs-on-
android-inclu...
Serve the better Web to Users
http://blog.evernote.com/blog/2013/01/23/beyond-the-evernote-fridge/
Serve the better Web to Users
Serve the better Web to Users
http://www.youtube.com/watch?v=ZAhiHY5KtXk
Serve the better Web to Users
http://www.google.com/glass/start/
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 (...
Serve the better Web to Users
• device-width: 640px
• device-height: 360px
• width: 427px
• height: 240px
• orientation: l...
Serve the better Web to Users
http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design
Serve the better Web to Users
http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design
Serve the better Web to Users
http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design
Serve the better Web to Users
http://www.businessinsider.com/a-smart-watch-for-dell-may-be-on-the-horizon-2013-7
Serve the better Web to Users
デバイスの断片化
Serve the better Web to Users
Web Server
HTML CSS
for feature phone-A
HTML CSS
for feature phone-B
HTML CSS
for smartphone...
The Future is just around the corner
http://www.windowsphone.com/en-us
The Future is just around the corner
http://www.mozilla.org/en-US/firefox/os/
https://www.tizen.org/
http://jolla.com/
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
http://bradfrostweb.com/blog/post/this-is-the-web/
Serve the better Web to Users
Probably, it will already be impossible.
Serve the better Web to Users
Responsive Web Design
Serve the better Web to Users
http://www.bostonglobe.com/
Serve the better Web to Users
http://www.microsoft.com/ja-jp/default.aspx
Serve the better Web to Users
https://developers.google.com/webmasters/smartphone-sites/
Serve the better Web to Users
https://developers.google.com/webmasters/smartphone-sites/details
Serve the better Web to Users
http://googlewebmastercentral.blogspot.jp/2013/06/changes-in-rankings-of-smartphone_11.html
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
http://www.w3.org/Consortium/mission.html
Serve the better Web to Users
http://www.w3.org/TR/2004/REC-webarch-20041215/#uri-aliases
Serve the better Web to Users
http://kidachi.kazuhi.to/blog/archives/037798.html
Serve the better Web to Users
http://alistapart.com/article/responsive-web-design
Serve the better Web to Users
responsive one source
Serve the better Web to Users
Web Server
HTML CSS
Serve the better Web to Users
No!
Serve the better Web to Users
responsive future friendly
Serve the better Web to Users
http://futurefriend.ly/
Serve the better Web to Users
http://info.cern.ch/hypertext/WWW/TheProject.html
Serve the better Web to Users
http://info.cern.ch/hypertext/WWW/TheProject.html
Serve the better Web to Users
Fluid Grids
Flexible Images
Media Queries
Serve the better Web to Users
Fluid Grids
Serve the better Web to Users
Header
Main Content Side Navi
640px 300px
960px
Footer
960px
Header
Main Content Side Navi
6...
Header
Main Content Side Navi
640px 300px
960px
Footer
960px
Header
Main Content Side Navi
640px 300px
960px
Footer
960px
...
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
#main-content {
width: 66.67%;
}
#side-navi {
width: 31.25%;
}
#main-content {
width: 640px;...
Serve the better Web to Users
Flexible Images
Header
Main Content
Side Navi
640px 300px
960px
Footer
960px
640px
Image
Header
Main Content
Side Navi
66.67% 31.25%
100%
...
Serve the better Web to Users
Header
Main Content
Side Navi
640px 300px
960px
Footer
960px
640px
Image
Header
Main Content...
Serve the better Web to Users
Header
Main Content
Side Navi
66.67% 31.25%
100%
Footer
100%
100%
Image
Header
Main Content ...
Serve the better Web to Users
Header
Main Content
Side Navi
66.67% 31.25%
100%
Footer
100%
640px
Image
640px
Image
Header
...
Serve the better Web to Users
#main-content {
img {
max-width: 100%;
}
}
<img src=”hoge.png”>
<img src=”hoge.png” width=”6...
Serve the better Web to Users
Media Queries
Serve the better Web to Users
Header
Main Content
Side Navi
Footer
Header
Main Content Side Navi
Footer
Serve the better Web to Users
<link rel="stylesheet" href="css/style-smart-device.css"
media="only screen and (max-width: ...
Serve the better Web to Users
@media screen and (max-width: 768px) {
}
@media screen and (min-width: 769px) {
}
Serve the better Web to Users
<link rel="stylesheet" href="css/style-google-glass.css"
media="only screen and (width: 427p...
Serve the better Web to Users
Fluid Grids
Flexible Images
Media Queries
Serve the better Web to Users
Responsive Web Design
Serve the better Web to Users
All were solved?
Serve the better Web to Users
issue about images
Serve the better Web to Users
device-pixel-ratio
Serve the better Web to Users
Serve the better Web to Users
@1x @2x
Serve the better Web to Users
@1x
@2x
@3x
Serve the better Web to Users
device-pixel-ratio: 3
Serve the better Web to Users
<img src=”hoge@3x.jpg”>
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
<span data-picture>
<span data-src="img/hoge.jpg"></span>
<span data-src="img/hoge@2x.jpg" d...
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
<script>
document.cookie='devicePixelRatio='+
((window.devicePixelRatio === undefined) ? 1 :...
Serve the better Web to Users
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .(?:jpe?g|gif|png)$ retinaimages.php [...
Serve the better Web to Users
Web Server
Image@1x
Image@2x
Image@3x
retinaimages.php and .htaccess
GET Image@1x HTTP/1.1
Serve the better Web to Users
Serve the better Web to Users
Web Server
Image
upload
Serve the better Web to Users
issue about contents
Serve the better Web to Users
for desktop for smartphone
Header
Main Content
Side Navi
Footer
Header
Main Content Side Nav...
Serve the better Web to Users
252 requests, 7.1MB transferred, 10.91s
Serve the better Web to Users
252 requests, 7.1MB transferred, 16.58s
Serve the better Web to Users
for desktop for smartphone
Header
Main Content
Side Navi
Footer
Header
Main Content Side Nav...
Serve the better Web to Users
Header
Main Content
Side Navi
Footer
Content 1
Content 2
#content2,
#side-navi {
display: no...
Serve the better Web to Users
Header
Main Content
Side Navi
Footer
Content 1
Content 2
#content2,
#side-navi {
display: no...
Serve the better Web to Users
http://kidachi.kazuhi.to/blog/archives/037798.html
Serve the better Web to Users
http://www.nd.edu/
Serve the better Web to Users
for desktopfor smartphone
Serve the better Web to Users
for desktopfor smartphone
24 requests
0.3MB transferred,
1.90s
131 requests
2.4MB transferre...
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Serve the better Web to Users
Web Server
HTML CSS
GET / HTTP/1.1
content components
About Academics Admissions Faith &
Ser...
Serve the better Web to Users
Web Server
GET /about/ HTTP/1.1
content components
About Academics Admissions Faith &
Servic...
Serve the better Web to Users
EngineerDesigner
Design
Markup
Programming
Design
Markup
Programming
EngineerDesigner
Serve the better Web to Users
dropout dropout
Serve the better Web to Users
Serve the better Web to Users
No Backend Engineers,
No Web.
Serve the better Web to Users
Thank you for your attention.
@ohtsuki2843feedback
Upcoming SlideShare
Loading in …5
×

ユーザーへより良いWebを提供するために

1,533 views

Published on

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

Published in: Technology, Design
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,533
On SlideShare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
0
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

ユーザーへより良いWebを提供するために

  1. 1. © 2843 all rights reserved. ユーザーへより良いWebを提供するために Serve the better Web to Users
  2. 2. Serve the better Web to Users @ohtsuki2843 Marketing, Consulting, Design, Markup, Frontend, Backend, Smartphone Apps, Lecture, Writing
  3. 3. The Future is just around the corner http://2843.jp/rollpaper/
  4. 4. Serve the better Web to Users agenda ユーザーへより良いWebを提供するために
  5. 5. Serve the better Web to Users マルチデバイス対応 theme
  6. 6. Serve the better Web to Users “2nd Shift” has come. @maepon
  7. 7. Serve the better Web to Users http://bradfrostweb.com/blog/post/this-is-the-web/
  8. 8. Serve the better Web to Users http://bradfrostweb.com/blog/post/this-is-the-web/
  9. 9. Serve the better Web to Users http://bradfrostweb.com/blog/post/this-is-the-web/
  10. 10. Serve the better Web to Users http://bradfrostweb.com/blog/post/this-is-the-web/
  11. 11. Serve the better Web to Users http://bradfrostweb.com/blog/post/this-is-the-web/
  12. 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. 13. Serve the better Web to Users http://blog.evernote.com/blog/2013/01/23/beyond-the-evernote-fridge/
  14. 14. Serve the better Web to Users
  15. 15. Serve the better Web to Users http://www.youtube.com/watch?v=ZAhiHY5KtXk
  16. 16. Serve the better Web to Users http://www.google.com/glass/start/
  17. 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. 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. 19. Serve the better Web to Users http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design
  20. 20. Serve the better Web to Users http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design
  21. 21. Serve the better Web to Users http://www.mobilexweb.com/blog/google-glass-browser-html5-responsive-web-design
  22. 22. Serve the better Web to Users http://www.businessinsider.com/a-smart-watch-for-dell-may-be-on-the-horizon-2013-7
  23. 23. Serve the better Web to Users デバイスの断片化
  24. 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. 25. The Future is just around the corner http://www.windowsphone.com/en-us
  26. 26. The Future is just around the corner http://www.mozilla.org/en-US/firefox/os/ https://www.tizen.org/ http://jolla.com/
  27. 27. Serve the better Web to Users
  28. 28. Serve the better Web to Users
  29. 29. Serve the better Web to Users
  30. 30. Serve the better Web to Users
  31. 31. Serve the better Web to Users
  32. 32. Serve the better Web to Users
  33. 33. Serve the better Web to Users http://bradfrostweb.com/blog/post/this-is-the-web/
  34. 34. Serve the better Web to Users Probably, it will already be impossible.
  35. 35. Serve the better Web to Users Responsive Web Design
  36. 36. Serve the better Web to Users http://www.bostonglobe.com/
  37. 37. Serve the better Web to Users http://www.microsoft.com/ja-jp/default.aspx
  38. 38. Serve the better Web to Users https://developers.google.com/webmasters/smartphone-sites/
  39. 39. Serve the better Web to Users https://developers.google.com/webmasters/smartphone-sites/details
  40. 40. Serve the better Web to Users http://googlewebmastercentral.blogspot.jp/2013/06/changes-in-rankings-of-smartphone_11.html
  41. 41. Serve the better Web to Users
  42. 42. Serve the better Web to Users
  43. 43. Serve the better Web to Users http://www.w3.org/Consortium/mission.html
  44. 44. Serve the better Web to Users http://www.w3.org/TR/2004/REC-webarch-20041215/#uri-aliases
  45. 45. Serve the better Web to Users http://kidachi.kazuhi.to/blog/archives/037798.html
  46. 46. Serve the better Web to Users http://alistapart.com/article/responsive-web-design
  47. 47. Serve the better Web to Users responsive one source
  48. 48. Serve the better Web to Users Web Server HTML CSS
  49. 49. Serve the better Web to Users No!
  50. 50. Serve the better Web to Users responsive future friendly
  51. 51. Serve the better Web to Users http://futurefriend.ly/
  52. 52. Serve the better Web to Users http://info.cern.ch/hypertext/WWW/TheProject.html
  53. 53. Serve the better Web to Users http://info.cern.ch/hypertext/WWW/TheProject.html
  54. 54. Serve the better Web to Users Fluid Grids Flexible Images Media Queries
  55. 55. Serve the better Web to Users Fluid Grids
  56. 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. 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. 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. 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. 60. Serve the better Web to Users Flexible Images
  61. 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. 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. 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. 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. 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. 66. Serve the better Web to Users Media Queries
  67. 67. Serve the better Web to Users Header Main Content Side Navi Footer Header Main Content Side Navi Footer
  68. 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. 69. Serve the better Web to Users @media screen and (max-width: 768px) { } @media screen and (min-width: 769px) { }
  70. 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. 71. Serve the better Web to Users Fluid Grids Flexible Images Media Queries
  72. 72. Serve the better Web to Users Responsive Web Design
  73. 73. Serve the better Web to Users All were solved?
  74. 74. Serve the better Web to Users issue about images
  75. 75. Serve the better Web to Users device-pixel-ratio
  76. 76. Serve the better Web to Users
  77. 77. Serve the better Web to Users @1x @2x
  78. 78. Serve the better Web to Users @1x @2x @3x
  79. 79. Serve the better Web to Users device-pixel-ratio: 3
  80. 80. Serve the better Web to Users <img src=”hoge@3x.jpg”>
  81. 81. Serve the better Web to Users
  82. 82. Serve the better Web to Users
  83. 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. 84. Serve the better Web to Users
  85. 85. Serve the better Web to Users
  86. 86. Serve the better Web to Users
  87. 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. 88. Serve the better Web to Users <IfModule mod_rewrite.c> RewriteEngine On RewriteRule .(?:jpe?g|gif|png)$ retinaimages.php [L] </IfModule>
  89. 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. 90. Serve the better Web to Users
  91. 91. Serve the better Web to Users Web Server Image upload
  92. 92. Serve the better Web to Users issue about contents
  93. 93. Serve the better Web to Users for desktop for smartphone Header Main Content Side Navi Footer Header Main Content Side Navi Footer
  94. 94. Serve the better Web to Users 252 requests, 7.1MB transferred, 10.91s
  95. 95. Serve the better Web to Users 252 requests, 7.1MB transferred, 16.58s
  96. 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. 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. 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. 99. Serve the better Web to Users http://kidachi.kazuhi.to/blog/archives/037798.html
  100. 100. Serve the better Web to Users http://www.nd.edu/
  101. 101. Serve the better Web to Users for desktopfor smartphone
  102. 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. 103. Serve the better Web to Users
  104. 104. Serve the better Web to Users
  105. 105. Serve the better Web to Users
  106. 106. Serve the better Web to Users
  107. 107. Serve the better Web to Users
  108. 108. Serve the better Web to Users
  109. 109. Serve the better Web to Users
  110. 110. Serve the better Web to Users
  111. 111. Serve the better Web to Users
  112. 112. Serve the better Web to Users
  113. 113. Serve the better Web to Users
  114. 114. Serve the better Web to Users
  115. 115. Serve the better Web to Users
  116. 116. Serve the better Web to Users
  117. 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. 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. 119. Serve the better Web to Users EngineerDesigner Design Markup Programming Design Markup Programming EngineerDesigner
  120. 120. Serve the better Web to Users dropout dropout
  121. 121. Serve the better Web to Users
  122. 122. Serve the better Web to Users No Backend Engineers, No Web.
  123. 123. Serve the better Web to Users Thank you for your attention. @ohtsuki2843feedback

×