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/
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
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/
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;
}
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
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
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
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