Part I: Introduction to Responsive Web Design. Part II: Use tools to save time in Web App development.

1. Responsive
Web Design
& workflow
houhongru@ .com
12年7月18日星期三

2. I’m brand new
• CS graduate student, BIT, do research in THU, intern at Baidu
• Touch the Internet since 1990s & got my fist email account
• Learned HTML in 2007 when blog was prevalent
• Learned CSS in 2008 when designed my first Wordpress theme
• Learned JavaScript in 2009 to add a “scroll to top” to my blog
• Learned PHP in 2010 when we began our first startup
• Learning User Interaction Design now
12年7月18日星期三

3. var Agenda = {
Responsive Web Design:
[Concept & Discussion,
Build a Responsive Web page],
Workflow:
[Adobe Shadow + weinre + LiveReload,
Adobe Shadow + Charles || xip.io]
};
12年7月18日星期三

4. The problem in front of us
Q: How to let users across a broad range of
devices and browsers access to a single source of
content?
A1: Mobile App.
A2: Separate mobile site.
A3: Responsive web design site.
12年7月18日星期三

5. “ In the world of web design, the only
thing harder than keeping up with the
ever-evolving standards in HTML, CSS,
and other technologies, is keeping up
”
with the vocabulary.
—— Anonymous
http://www.digitalfamily.com/dreamweaver/CS6/Adaptive-vs-Responsive-Web-Design.html
12年7月18日星期三

6. What is RWD?
Responsive Web Design (RWD) essentially indicates that a
web site is crafted to use Cascading Style Sheets 3 media
queries, an extension of the @media rule, with fluid
proportion-based grids (which use percentages and EMs
instead of pixels), to adapt the layout to the viewing
environment, and probably also use flexible images.
Responsive examples: http://mediaqueri.es/
12年7月18日星期三

7. Why should we use RWD?
• For uses:
• Better user experience
• Convenient to share
• For search engin:
• Better for SEO (Google recommended)
• For developers:
• Easy to maintain & No redirections
Is there any disadvantages?
12年7月18日星期三

8. Concept
• Mobile-first
• Responsive Web Design
fluid grids, fluid images/media & media queries
• Adaptive Web Design
creating interfaces that adapt to the devices
creating interfaces that adapt to the devices
capabilities. Crafting rich experiences with
capabilities. Crafting rich experiences with
progressive enhancement
progressive enhancement
12年7月18日星期三

9. Advertisement
Progressive Enhancement
vs.
Graceful Degradation
12年7月18日星期三

10. Advertisement
“ all experiences that are created using
p ro g re s s i ve e n h a n c e m e n t w i l l
degrade gracefully in older browsers,
but not all experiences built following
”
graceful degradation are progressively
enhanced.
—— Aaron Gustafson
《Adaptive Web Design》
12年7月18日星期三

11. Responsive vs Adaptive
• Creating web designs that are flexible and
adaptable
• Adaptive Web Design focus on the device
capability, Responsive Web Design focus on
the screen size, which as a part of device
capability.
• An adaptive web design may change the
content delivered to each device, not just
the size of the design area
12年7月18日星期三

12. Example of Adaptive
12年7月18日星期三

13. My own view
… glasses, watch, Phone, tablet, desktop, TV ...
, …
“ Mobile first is not enough
We should and have to
consider the weaker first
”
12年7月18日星期三

14. Build a Responsive Web Page
Responsive design bookmarklet: http://goo.gl/3B52u
12年7月18日星期三

15. Step 1: set viewports
• When is a pixel not a pixel? When it’s on a
smartphone.
• to trigger the browser to render your page
at a more readable scale
• <meta name="viewport"
content="width=device-width, initial-
scale=1" />
12年7月18日星期三

16. Step 2: Media Queries
@media screen and (min-width:800px) {
header{background: yellow;}
}
@media screen and (min-width:481px) and (max-width:800px) {
header{background: green;}
}
@media screen and (max-width:480px) {
header{background: black;}
}
<!--[if lt IE 9]>...css3-mediaqueries.js...<![endif]-->
12年7月18日星期三

17. Other rules
• Use 100%, auto, em
• Use float grid
• Use float image/media
• img { max-width: 100%;}
• img { width: 100%; }
12年7月18日星期三

18. Demo time : D
12年7月18日星期三

19. Workflow
“ 工欲善其事，
”
必先利其器。
—— 孔子
《论语·卫灵公》
12年7月18日星期三

20. How do we develop?
12年7月18日星期三

21. “ 这样的生活
”
是不值得过的。
—— 侯鸿儒
12年7月18日星期三

22. Adobe Shadow
12年7月18日星期三

23. weinre
• weinre is WEb INspector REmote
• allow you debug web pages on a mobile
device such as a phone
• sudo npm -g install weinre
12年7月18日星期三

24. LiveReload
• Monitors changes in the file system
• As soon as you save a file, it is
preprocessed as needed, and the browser
is refreshed
• When you change a CSS file or an image,
the browser is updated instantly without
reloading the page
12年7月18日星期三

25. Demo time : D
12年7月18日星期三

26. Want iPhone to access localhost?
<del> It is impossible!! </del>
<ins> We need a proxy. </ins>
12年7月18日星期三

27. Set up Virtual Host
• Add domains to your hosts file
• Enable virtual host in httpd.conf
• Add virtual hosts in httpd-vhosts.conf
12年7月18日星期三

28. With the Internet
12年7月18日星期三

29. Without the Internet
12年7月18日星期三

30. Resources
?
•http://www.alistapart.com/articles/responsive-web-design/
•http://simplebits.com/notebook/2011/08/19/adapted/
•http://www.youtube.com/playlist?
list=PL56D792A831D0C362&feature=plcp
•http://book.douban.com/people/houhr/doulists
12年7月18日星期三

31. That’s all
& Thankyou
houhongru@ .com
12年7月18日星期三