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 Ethan Marcotte http://ethanmarcotte.com

For a Future Friendly Web Style Solution RWD

For a Future Friendly Web History: 2009, M obile First Luke Wroblewski , 2009.11.3, "Mobile First", http :// www.lukew.com/ff/entry.asp?933 1. Mobile is exploding 2. Mobile forces you to focus 3. 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

design Alexander 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 Device Adaptive Design Cost Cool

For a Future Friendly Web Core Device Adaptive

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 Design 2. Background + Full Screen Videos 3. Mobile Apps & Social Sites will Dominate 4. Interactive Webgraphics Replace Infographics 5. Micro

interactions 6. Less Coding & More Websites 7. Big Images / Video to Replace Sliders 8. Responsive Design with Better Performance 9. Functional Web Typography 10. Card Design 11. Augmented Reality 12. Subtle UI Animations 13. SVG Will Rise 14. Responsive Icons 15. More Personalization 16. Less Clicks, More Scrolling 17. Line Icons + Ghost Buttons 18. 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 Home 2. Ghost Buttons 3. Bigger Emphasis on Typography 4. Large, Beautiful Background Images & Videos 5. Scrolling Over Clicking 6. Card Design Will Continue (Get Better) 7. Flat Design is Growing Up (or, The Rise of Material Design?) 8. Microinteractions 9. Interactive Storytelling 10. 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

2012 http:// www.slideshare.net/dmolsenwvu/the

future

friendly

campus

12514902 http:// www.slideshare.net/lukebrooker/a

future

friendly

workflow

For a Future Friendly Web Quick Thinking • In case of 1. Device fragments 2. Complex Contexts 3. Hardly to predict the future of the both

For a Future Friendly Web Quick Thinking • So 1. Attitude: Embrace unpredictability 2. Action : Think and behave in a future

friendly way

For a Future Friendly Web Principle 1. Content First Jeremy Keith ： https:// adactio.com/journal/4523 Do not trouble users. 2. Mobile First Luke W. ： http:// www.lukew.com/ff/entry.asp?933 Mobile device break out, context and interaction method have changed. 3. Orbital Content Cameron Koczon ： http:// alistapart.com/article/orbital

content Users 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 Design One way: Responsive Web Design http:// www.slideshare.net/bienfantaisie/webrebuild

as

design 2. Atomic Design http:// www.slideshare.net/bradfrostweb/atomic

design 3. Pixel

Perfect will be end http:// 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 pages Start 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.shtml http :// userfirstweb.com/558/mobilewood

and

futurefriendly Tennessee Mobilewood party 10 members

For a Future Friendly Web

  1. Josh Clark https:// www.linkedin.com/in/joshclark http:// 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 6. Jeremy Keith https:// adactio.com

For a Future Friendly Web 7. Luke Wroblewski https:// www.linkedin.com/in/lukew

For a Future Friendly Web 8. Scott Jehl http:// scottjehl.com

For a Future Friendly Web 9. Scott Jenson https:// www.linkedin.com/in/scottjenson http://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

design http://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, 2014 2. 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 book launched in August, 2014 5 . 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, 2014 6. 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 Mobile 9 . Erika Hall ： Just Enough Research 10. Dan Cederholm ： Sass For Web Designers 11. Jason Santa Maria ： On Web Typography 12. Mike Monteiro ： You‘re My Favorite Client 13. 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