future friendly web designtencent • online media group design center • bennyzhai • 2015.4.24....
TRANSCRIPT
Tencent • Online Media Group Design Center • bennyzhai • 2015.4.24
Future Friendly Web Design
For a Future Friendly Web
Responsive Web Design (RWD)
Since 2010.5
For a Future Friendly Web
Style SolutionRWD
For a Future Friendly Web
History: 2009, Mobile First
Luke Wroblewski, 2009.11.3, "Mobile First", http://www.lukew.com/ff/entry.asp?933
1. Mobile is exploding2. Mobile forces you to focus3. Mobile extends your capabilities
For a Future Friendly Web
History: 2010, Birth, Theory and Practice
Ethan Marcotte, 2010.5.25, "Responsive Web Design", http://alistapart.com/article/responsive-web-designAlexander Dawson, 2010.8.18, "Mobile Web Design: Best Practices", http://sixrevisions.com/web-development/mobile-web-design-best-practices
For a Future Friendly Web
History: 2011, Performance
Luke Wroblewski, 2011.9.12, "RESS：Responsive Design + Server Side Components", http://www.lukew.com/ff/entry.asp?1392
For a Future Friendly Web
History: 2012, Workflow
Mark Boulton, 2012.2.24, "Responsive Summit: Workflow", http://www.markboulton.co.uk/journal/responsive-summit-workflow
For a Future Friendly Web
History: Bootstrap and Grid System
http://getbootstrap.com
For a Future Friendly Web
Final Goals
DeviceAdaptive
DesignCost
Cool
For a Future Friendly Web
Core
DeviceAdaptive
For a Future Friendly Web
2015 Design Trend, Source-1
http://justcreative.com/2015/01/02/web-design-trends-predictions-2015/
1. The Rise of Flat & Material Design2. Background + Full Screen Videos3. Mobile Apps & Social Sites will
Dominate4. Interactive Webgraphics Replace
Infographics5. Micro-interactions6. Less Coding & More Websites7. Big Images / Video to Replace Sliders8. Responsive Design with Better
Performance9. Functional Web Typography
10. Card Design11. Augmented Reality12. Subtle UI Animations13. SVG Will Rise14. Responsive Icons15. More Personalization16. Less Clicks, More Scrolling17. Line Icons + Ghost Buttons18. Improved Parallax (Less Is More)
For a Future Friendly Web
2015 Design Trend, Source-2
http://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015
1. Responsive or Go Home2. Ghost Buttons3. Bigger Emphasis on Typography4. Large, Beautiful Background Images & Videos5. Scrolling Over Clicking6. Card Design Will Continue (Get Better)7. Flat Design is Growing Up (or, The Rise of Material Design?)8. Microinteractions9. Interactive Storytelling10. Personalized UX
For a Future Friendly Web
Future Friendly (FFLY)
Since 2011.9
For a Future Friendly Web
http://futurefriendlyweb.com/http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-webvisions-chicago-2012http://www.slideshare.net/dmolsenwvu/the-future-friendly-campus-12514902http://www.slideshare.net/lukebrooker/a-future-friendly-workflow
For a Future Friendly Web
Quick Thinking
• In case of1. Device fragments2. Complex Contexts3. Hardly to predict the future of the both
For a Future Friendly Web
Quick Thinking
• So1. Attitude: Embrace unpredictability2. Action: Think and behave in a future-
friendly way
For a Future Friendly Web
Principle
1. Content FirstJeremy Keith：https://adactio.com/journal/4523Do not trouble users.
2. Mobile FirstLuke W.：http://www.lukew.com/ff/entry.asp?933Mobile device break out, context and interaction method have changed.
3. Orbital ContentCameron Koczon：http://alistapart.com/article/orbital-contentUsers would get the same content at different times or devices, make the task more easier.
For a Future Friendly Web
Practice and Research
1. Adaptive DesignOne way: Responsive Web Designhttp://www.slideshare.net/bienfantaisie/webrebuild-as-design
2. Atomic Designhttp://www.slideshare.net/bradfrostweb/atomic-design
3. Pixel-Perfect will be endhttp://www.slideshare.net/dmolsenwvu/death-of-lorem-ipsum-and-pixelperfect-content-minnewebcon-version
For a Future Friendly Web
Atomic Design
http://www.slideshare.net/bradfrostweb/atomic-design
Design “System”, not pagesStart from html tags
For a Future Friendly Web
Pixel-Perfect will be end
http://www.slideshare.net/dmolsenwvu/death-of-lorem-ipsum-and-pixelperfect-content-minnewebcon-version
Say goodbye to pipeline, more responsibility, more cooperation.
For a Future Friendly Web
FFLY’s background
2011.9
For a Future Friendly Web
A week before 21st, September, 2011
http://globalmoxie.com/blog/future-friendly-mobilewood.shtmlhttp://userfirstweb.com/558/mobilewood-and-futurefriendly
TennesseeMobilewood party10 members
For a Future Friendly Web
1. Josh Clark
https://www.linkedin.com/in/joshclarkhttp://globalmoxie.com
Tapworthy(Chinese Ver.)
For a Future Friendly Web
2. Brad Frost
https://www.linkedin.com/in/bradfrost
I make websites
For a Future Friendly Web
3. Bryan Rieger
https://uk.linkedin.com/in/bryanrieger
For a Future Friendly Web
4. Jason Grigsby
https://www.linkedin.com/in/grigs
Head First Mobile Web(Chinese Ver.)
For a Future Friendly Web
5. Lyza (danger) Gardner
https://www.linkedin.com/in/lyzadanger
Head First Mobile Web(Chinese Ver.)
For a Future Friendly Web
7. Luke Wroblewski
https://www.linkedin.com/in/lukew
For a Future Friendly Web
9. Scott Jenson
https://www.linkedin.com/in/scottjensonhttp://designmind.frogdesign.com/blog/author/beyond-mobile/
For a Future Friendly Web
10. Stephanie Rieger
https://uk.linkedin.com/in/stephanierieger
Yiibu产品总监/UX设计
For a Future Friendly Web
客串. Ethan Marcotte
http://alistapart.com/article/responsive-web-designhttp://ethanmarcotte.com/http://unstoppablerobotninja.com/about/
RWD Founder
For a Future Friendly Web
客串. Stephen Hay
https://nl.linkedin.com/in/stephenhay
For a Future Friendly Web
A List/Book Apart
Since 1998
For a Future Friendly Web
www.alistapart.com
• explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
For a Future Friendly Web
www.alistapart.cn
For a Future Friendly Web
www.abookapart.com• Web design is about multi-disciplinary mastery and laser focus, and that’s
the thinking behind our brief books for people who make websites. We cover the emerging and essential topics in web design and development with style, clarity, and, above all, brevity — because working designer-developers can’t afford to waste time.
• A Book Apart publishes highly detailed and meticulously edited examinations of single topics. We produce brief books of about 100 pages — the perfect size in terms of subject depth and coverage for topics like HTML5, CSS3, content strategy, responsive web design, and more.
• The goal of every title in our catalog is to shed clear light on a tricky subject, and do it fast, so you can get back to work. Thank you for supporting our mission to provide professionals with the tools they need to move the web forward.
For a Future Friendly Web
www.abookapart.com
For a Future Friendly Web
1. Jeremy Keith：HTML5 For Web Designers, Chinese book launched in November, 20142. Dan Cederholm：CSS3 For Web Designers, Chinese book launched in November, 2014
For a Future Friendly Web
3. Erin Kissane：The Elements of Content Strategy, Chinese booklaunched in August, 20145. Aarron Walter：Designing For Emotion , Chinese book launched in August, 2014
For a Future Friendly Web
4. Ethan Marcotte：Responsive Web Design, Chinese book launched in November, 20146. Luke W.：Mobile First, Chinese book launched in November, 2014
For a Future Friendly Web
7. Mike Monteiro：Design is a Job, Chinese book launched in January, 2015
For a Future Friendly Web
8. Karen Mcgrane：Content Strategy for Mobile9. Erika Hall：Just Enough Research10. Dan Cederholm：Sass For Web Designers11. Jason Santa Maria：On Web Typography12. Mike Monteiro：You‘re My Favorite Client13. Scott Jehl：Responsible Responsive Design
http://www.ptpress.com.cn
For a Future Friendly Web
You may know
• Future-friendliness describes design principles, not specific techniques”-FFLY
• “Blame the Implementation, Not the Technique”-Tim Kadlec
• “ “Nobody's saying this is easy, but it's 100% necessary.”-Brad Frost
THANK YOU!
Tencent • Online Media Group Design Center • bennyzhai • 2015.4.24