Just for you: FREE 60-day trial to the world’s largest digital library.
The SlideShare family just got bigger. Enjoy access to millions of ebooks, audiobooks, magazines, and more from Scribd.
Cancel anytime.More Related Content
Related Books
Free with a 14 day trial from Scribd
RESS: An Evolution of Responsive Web Design
- 1. RESS: An Evolution of Responsive Web Design Dave Olsen, @dmolsen WVU University Relations - Web Refresh Pittsburgh, May 15 2012
- 2. slideshare.net/dmolsenwvu
- 3. programmer 9 years at wvu wvu has 30,000 students
- 4. What I’ll Talk About •The Responsive Age •What is RESS •Two Server-side Solutions
- 5. We’ve entered... The Responsive Age
- 6. http://www.alistapart.com/articles/responsive-web-design/
- 7. http://flic.kr/p/9UmsCJ
- 8. TABLET WEB DESKTOP WEB It’s All One Web MOBILE WEB
- 9. http://modernizr.com
- 10. http://flic.kr/p/9Qp3A
- 11. The client is now in charge
- 12. Why Be Responsive One... http://flic.kr/p/5pGcyx
- 13. Why Be Responsive One... URL.
- 14. Why Be Responsive One... Set of Mark-up.
- 15. Why Be Responsive One... Deployment.
- 16. futurefriend.ly
- 17. Time to Party... balloons http://flic.kr/p/h6McT
- 18. “Not so fast, my friends...” http://flic.kr/p/8x6b8X
- 19. RWD Challenges Media... Images & Video
- 20. RWD Challenges 3rd Party Content... Ads & Social Widgets
- 21. RWD Challenges One Set of Mark-up... Double-edged Sword
- 22. Learned the hard way... http://happyholidays.wvu.edu
- 23. Standards Process Standards Process is Evolving http://www.w3.org/community/respimg/
- 24. Bridging the Gap Mind the Gap http://flic.kr/p/638wPy
- 25. Existing Solutions adaptive images website http://adaptive-images.com/
- 26. Take a New Path image of a path for showing RESS as a way forward http://flic.kr/p/7cGN8g
- 27. What is RESS?
- 28. Responsive Web Design + Server Side Components (I have no idea what becomes of the W, D, or C)
- 29. “ In a nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. So a single set of page templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side. - Luke Wroblewski @lukew http://www.lukew.com/ff/entry.asp?1392
- 30. “ ...browser-detection can be used to help inform an overall responsive design as opposed to being the be-all- end-all for templating. - Dave Olsen @dmolsen http://bit.ly/wW91Ie
- 31. RESS is Good if... “ •If you want layout adjustments across devices. •And optimization at the component level to increase performance or tune user experience. •You trust server-side device detection with sensible defaults. - Luke Wroblewski @lukew http://www.lukew.com/ff/entry.asp?1509
- 32. Simple Example: Swapping a Header & Footer Mobile View Desktop View http://www.lukew.com/ff/entry.asp?1392
- 33. Simple Example: Swapping a Header & Footer <body> {{>header}} [...document content...] {{>footer}} </body> http://www.lukew.com/ff/entry.asp?1392
- 34. Simple Example: Swapping a Header & Footer <body> {{>header}} [...document content...] {{>footer}} </body> http://www.lukew.com/ff/entry.asp?1392
- 35. Simple Example: Swapping a Header & Footer index.html header.html mobile_header.html footer.html mobile_footer.html http://www.lukew.com/ff/entry.asp?1392
- 36. Simple Example: Swapping a Header & Footer index.html header.html mobile_header.html footer.html mobile_footer.html http://www.lukew.com/ff/entry.asp?1392
- 37. M-ADVANCED DESKTOP WEB ress.dmolsen.com MOBILE BASIC
- 38. RESS is in Its Infancy... Infancy http://flic.kr/p/7B7uyp
- 39. Untested ...and untested. http://flic.kr/p/nNZRV
- 40. U. of Notre Dame Example ND data http://weedygarden.net/2012/05/a-case-for-ress/
- 41. Large Screen: 136 requests @ 2.7MB ND data Small Screen: 23 requests @ 291K http://weedygarden.net/2012/05/a-case-for-ress/
- 42. bridge We Still Need to Bridge the Gap http://flic.kr/p/7FyCB2
- 43. Designers + Developers? developers and designers http://flic.kr/p/7Ma9n
- 44. How Do We Implement RESS? So how would we implement? http://flic.kr/p/5ATc7g
- 45. Skipping RWD Responsive Web Design is “easy” http://flic.kr/p/4YM8
- 46. Two Possible Solutions Server-side Solutions http://flic.kr/p/9jatna
- 47. #1 Browser Detection
- 48. Been Around a While Old dog http://flic.kr/p/bWQicm
- 49. Used Quite a Bit “ 82% of the Alexa 100 top sites use some form of server-side mobile device detection to serve content on their main website entry point. - Ronan Cremin @xbs http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
- 50. Lots of Solutions WURFL 51Degrees.mobi OpenDDR DeviceAtlas
- 51. Personal Fav*: ua-parser node.js, Python, PHP, & Ruby libraries built upon a standard YAML file * - I help maintain the project ;) https://github.com/tobie/ua-parser/
- 52. Arms Race? http://flic.kr/p/6RVLY2
- 53. Server-side Feature #2 Detection
- 54. Also in Its Infancy... Infancy http://flic.kr/p/7B7uyp
- 55. Untested ...and untested. http://flic.kr/p/nNZRV
- 56. Can be Simple or Complex Taking a Cue from Front-End Dev
- 57. Server-side Future Friendly?
- 58. Server-side Breakpoints 320px 640px 960px
- 59. Server-side Breakpoints Simple Example: Setting a file path based on window.innerWidth <script type="text/javascript"> function writeCookie(name, value) { //cookie code } // store the innerWidth of the window in a cookie writeCookie("RESS", window.innerWidth); </script> http://www.netmagazine.com/tutorials/getting-started-ress
- 60. Simple Example: Setting a file path based on window.innerWidth <?php // grab the cookie value $screenWidth = $_COOKIE[‘RESS’]; // set the img path var if ($screenWidth <= 320) { $imgPath = “320”; } else if ($screenWidth < 960) { $imgPath = “640”; } else { $imgPath = “960”; } // print out our image link print “<img src=‘/rwd/images/”.$imgPath.”/car.jpg’ alt=‘Car’ />”; ?> http://www.netmagazine.com/tutorials/getting-started-ress
- 61. Robust Feature Detection http://detector.dmolsen.com
- 62. Robust Feature Detection Simple Example: Inserting a video link <?php // require Detector to identify browser & populate $ua require("lib/Detector/Detector.php"); $html5Embed = "<iframe {...} ></iframe>"; $simpleLink = "Your browser doesn't appear to support HTML5. {...}"; // use the $ua properties to switch if ($ua->video->h264 || $ua->video->webm) { ! print $html5Embed; } else { ! print $simpleLink; ! } ?> http://detector.dmolsen.com/demo/ytembed/
- 63. Robust Feature Detection Complicated Example: Templates Using Detector & Mustache http://ress.dmolsen.com & click “Learn more...”
- 64. RESS Challenges RESS isn’t a silver bullet. (anymore than RWD is)
- 65. RESS Challenges Server-side feature detection can be spoofed.
- 66. RESS Challenges Requires server-side languages.
- 67. RESS Challenges Data needs to be separated from layout.
- 68. RESS Challenges “ It is not only the design of the web site and the layout of content that needs to be adapted or enhanced; the idea of being responsive, adaptive and enhancing, must be implemented in the whole value chain. - Jon Arnes Sæterås @jonarnes http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/
- 69. The The evolution of web development continues... of Web Development Continues http://flic.kr/p/3Q4To4
- 70. Questions or comments?
- 71. On Twitter @dmolsen...
- 72. Or at dmolsen.com...
- 73. Thank You