Responsive Web Design & Workflow


Published on

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

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive Web Design & Workflow

  1. 1. Responsive Web Design & workflow houhongru@ .com12年7月18日星期三
  2. 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 now12年7月18日星期三
  3. 3. var Agenda = { Responsive Web Design: [Concept & Discussion, Build a Responsive Web page], Workflow: [Adobe Shadow + weinre + LiveReload, Adobe Shadow + Charles ||] };12年7月18日星期三
  4. 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. 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年7月18日星期三
  6. 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:年7月18日星期三
  7. 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. 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 enhancement12年7月18日星期三
  9. 9. Advertisement Progressive Enhancement vs. Graceful Degradation12年7月18日星期三
  10. 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. 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 area12年7月18日星期三
  12. 12. Example of Adaptive12年7月18日星期三
  13. 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. 14. Build a Responsive Web Page Responsive design bookmarklet:年7月18日星期三
  15. 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. 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. 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. 18. Demo time : D12年7月18日星期三
  19. 19. Workflow “ 工欲善其事, ” 必先利其器。 —— 孔子 《论语·卫灵公》12年7月18日星期三
  20. 20. How do we develop?12年7月18日星期三
  21. 21. “ 这样的生活 ” 是不值得过的。 —— 侯鸿儒12年7月18日星期三
  22. 22. Adobe Shadow12年7月18日星期三
  23. 23. weinre • weinre is WEb INspector REmote • allow you debug web pages on a mobile device such as a phone • sudo npm -g install weinre12年7月18日星期三
  24. 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 page12年7月18日星期三
  25. 25. Demo time : D12年7月18日星期三
  26. 26. Want iPhone to access localhost? <del> It is impossible!! </del> <ins> We need a proxy. </ins>12年7月18日星期三
  27. 27. Set up Virtual Host • Add domains to your hosts file • Enable virtual host in httpd.conf • Add virtual hosts in httpd-vhosts.conf12年7月18日星期三
  28. 28. With the Internet12年7月18日星期三
  29. 29. Without the Internet12年7月18日星期三
  30. 30. Resources ? • • • list=PL56D792A831D0C362&feature=plcp •年7月18日星期三
  31. 31. That’s all & Thankyou houhongru@ .com12年7月18日星期三