RESS: An Evolution of Responsive Web Design
98 likes25,309 views
The document outlines a presentation by Dave Olsen discussing Responsive Web Design (RWD) and the evolution towards Responsive Server-Side Design (RESS). RESS combines adaptive layouts with server-side optimization to enhance user experience across devices, although it faces challenges such as feature detection and the need for server-side languages. The presentation emphasizes the importance of adapting not just the design but the entire web development process to meet the needs of users effectively.
![Simple Example:
Swapping a Header & Footer
<body>
{{>header}}
[...document content...]
{{>footer}}
</body>
http://www.lukew.com/ff/entry.asp?1392](https://image.slidesharecdn.com/ress-120515134636-phpapp02/85/RESS-An-Evolution-of-Responsive-Web-Design-33-320.jpg)
![Simple Example:
Swapping a Header & Footer
<body>
{{>header}}
[...document content...]
{{>footer}}
</body>
http://www.lukew.com/ff/entry.asp?1392](https://image.slidesharecdn.com/ress-120515134636-phpapp02/85/RESS-An-Evolution-of-Responsive-Web-Design-34-320.jpg)
![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](https://image.slidesharecdn.com/ress-120515134636-phpapp02/85/RESS-An-Evolution-of-Responsive-Web-Design-60-320.jpg)
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
- 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
- 8. TABLET WEB DESKTOP WEB It’s All One Web MOBILE WEB
- 11. The client is now in charge
- 12. Why Be Responsive One... http://flic.kr/p/5pGcyx
- 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
- 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
- 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
- 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
- 73. Thank You