1. Serge HufkensUX designer

2. Big thingshave small beginnings Prometheus, Ridley Scott 3. DefinitionResponsive Web Design (RWD)is web design in which a site is craftedto provide an optimal user experienceacross all devices (everything with ascreen)hat tip to wikipedia 4. Let there be no mistakeAdaptive vs Responsive web design ADAPTIVE THIS IS RESPONSIVEHat tip to Aaron Gustafson & Brad Frost 5. Why? 2001: A Space Odyssey, Stanley Kubrick & Arthur C. Clarke 6. NFL Network 7. Conclusion Theres a growing mainstream expectation that you can simply get all your content from any device. We expect content to ow seamlessly, follow us throughout the day. 8. Lets tackle that with some philosophy! 9. Enter the Dragon, Bruce Lee, Robert Clouse 10. and theres even more 11. Wroblewskis Theorem 12. Anything that can be connectedto the internet, will be. 13. factRWD is hard 14. Frank Zappa 15. Open your mind Everything has changed andcontinues to do so, fast Accept it and move on Loose the myths Get some new skills Make mistakes Time will tell Be proud to be a part of it 16. BECOMING RESPONSIVE 17. 3 basic ingredients En, Dagelijkse kost 18. A flexible grid The design has fluid layout elements thatchange on browser size Conditional images & other media The design uses one or more techniques toscale images and media so that the designperforms well across devices Media queries Conditional code that changes items on apage based on device detection or browserwidth 19. Viewport, media queries andbreakpoints 20. Andy Clarke 21. 3 advancedingredients Culy.nl, Sergio Herman 22. Advanced elements A basic fluid grid is the priority; but to be fullyresponsive we must often cover slideshows,tables, tabs, multi-column type, customwidgets, forms, and more. Touch input Touch input is a critical developmentcomponent as we move away from a mouse-first model of human-computer interaction RESS and server-side conditionals Heavy lifting for user agent detection andconditional media deployment is done by theserver, not the device. 23. THINGS TO GET IT ON 24. Wireframes?full wireframes for each breakpointPros: Cons most thorough method takes the longest no page element left its static!unexplored with a slow-decision may be the best solutionfor retrofitting because it group, prepare for a longprovides the most detailprocess 25. Wireframes?responsive prototypesPros:Cons gets specific about requires someone on therepositioning andteam have front-endcontent withoutskillspromising every detail may not prevent the one asset per template need for more detailedinstead of three or four wireframes 26. Flexible gridsgrids, grids everywhere Play around with the many grid systemsonline to get a good feel what they do Examples 27. http://lessframework.com/ 28. http://foundation.zurb.com/ 29. http://goldengridsystem.com/ 30. Conditional imagesTake a look at this to get startedhttp://adaptive-images.com/ 31. About designSplit itAtmosphere Layout 32. Design your atmosphereStyletiles, (html) style guides, http://styletil.es/ http://www.bbc.co.uk/guidelines/gel/ 33. Responsive design patternsLots of examples available provide effective examples at thebeginning of a project so that youre notrethinking the wheel. 34. http://bradfrost.github.com/this-is-responsive/ 35. http://www.lukew.com/ff/entry.asp?1514 36. http://jasonweaver.name/lab/offcanvas/ 37. Responsive typographyDont neglect it, its your content! Setting web type in Photoshop is a wasteof time Andy Clarke Test on real devices(dont scale your browser) Be careful with line lengths(keep it readable) 38. http://informationarchitects.net/blog/responsive-typography-the-basics/ 39. http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/ 40. Performance is also by designIssues for RWD Over downloading Download & hide, download & shrink, excessDOM Poor networks High latency, variable band width, packet loss 41. Issue #1The average weight of a web page today? 1 MB flash HTM CSS otherimagesjavascriptL82%Source: http://httparchive.org/ 42. Issue #2How many requests requires the average website?85Cable modemCell network 0.4 sec 4.2 sec 10 x slowerSource: Guy Podjarny & HTTP Achive 43. So optimize!By doing following Reduce asset size HTML/CSS compression, image compression, tryto avoid images, minification, avoid bulkyframeworks Reduce requests Browser cache, concatenate JS & CSS,localStorage, data:URI, conditional loading Speed-up page render Avoid DOM reflows & repaints, defer loading ofjavascript, lazy load javascript, touch beats onclick, 44. Brad Frost 45. Feel like reading? 46. Thanks!@sjesch