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日星期三
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日星期三
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日星期三