Responsive Web Design & Workflow

Speech at Baidu Inc.

Transcript

1. workflow & houhongru@ .com Responsive Web Design
2. I’m brand new • CS graduate student of BIT, do Web offline research at THU • Touched the Internet in 1995 & 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 • Swimming in the UI & UX pool nowadays
3. var Agenda = { Responsive Web Design: [Concept & Discussion, Build a Responsive Web page], Workflow: [Adobe Shadow + weinre + LiveReload, Adobe Shadow + Charles || xip.io] };
4. The problem in front of us Q: How to let users across a broad range of devices and browsers to access a single source of content? A2: Separate mobile site. A3: Responsive web design site. A1: Mobile App.
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
6. What is RWD? Responsive examples: http://mediaqueri.es/ 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.
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?
8. • Mobile-first • Responsive Web Design fluid grids, fluid images/media & media queries • Adaptive Web Design creating interfaces that adapt to the devices capabilities. Crafting rich experiences with progressive enhancement Concept fluid grids, fluid images/media & media queries creating interfaces that adapt to the devices capabilities. Crafting rich experiences with progressive enhancement
9. Graceful Degradation vs. Progressive Enhancement Advertisement
10. all experiences that are created using progressive enhancement will degrade gracefully in older browsers, but not all experiences built following graceful degradation are progressively enhanced. “ ”—— Aaron Gustafson 《Adaptive Web Design》 Advertisement
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. Example of Adaptive
13. glasses, watch, Phone, tablet, desktop, TV ... My own view … glasses, watch, , TV … Mobile first is not enough We should and have to consider the weaker first “ ”
14. Build a Responsive Web Page Responsive design bookmarklet: http://goo.gl/3B52u
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" />
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]-->
17. Other rules • Use 100%, auto, em • Use float grid • Use float image/media • img { max-width: 100%;} • img { width: 100%; }
18. Demo time : D
19. Workflow “⼯工欲善其事， 必先利其器。 ” —— 孔⼦子 《论语·卫灵公》
20. How do we develop?
21. “这样的⽣生活 是不值得过的。 —— 侯鸿儒 ”
22. Adobe Shadow
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
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
25. Demo time : D
26. <ins> </ins> <del> </del> Want iPhone to access localhost? It is impossible!! We need a proxy.
27. Set up Virtual Host • Add domains to your hosts file • Enable virtual host in httpd.conf • Add virtual hosts in httpd-vhosts.conf
28. With the Internet
29. Without the Internet
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 ?
31. Thankyou & That’s all houhongru@ .com