Downloaded 533 times
![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/75/RESS-An-Evolution-of-Responsive-Web-Design-33-2048.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/75/RESS-An-Evolution-of-Responsive-Web-Design-34-2048.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/75/RESS-An-Evolution-of-Responsive-Web-Design-60-2048.jpg)
Uploaded byDave Olsen
RESS: An Evolution of Responsive Web Design
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.
More Related Content
![There Are No “Buts” in Progressive Enhancement [Øredev 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/therearenobutsinprogressiveenhancementredev-151106102141-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![Beyond Responsive [18F 2015]](https://cdn.slidesharecdn.com/ss_thumbnails/beyondresponsive18f2015-150812140602-lva1-app6891-thumbnail.jpg?width=640&height=640&fit=bounds)
![Planning Adaptive Interfaces [RWD Summit 2016]](https://cdn.slidesharecdn.com/ss_thumbnails/planningadaptiveinterfacesrwdsummit2016-160330235919-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
- 1. RESS: An Evolution ofResponsive Web Design Dave Olsen, @dmolsen WVU University Relations - Web Refresh Pittsburgh, May 15 2012
- 2.
- 3. programmer 9 years atwvu wvu has 30,000 students
- 4. What I’ll TalkAbout •The Responsive Age •What is RESS •Two Server-side Solutions
- 5.
- 6.
- 7.
- 8. TABLET WEB DESKTOP WEB It’s All One Web MOBILE WEB
- 9.
- 10.
- 11. The client isnow in charge
- 12. Why Be Responsive One... http://flic.kr/p/5pGcyx
- 13.
- 14. Why Be Responsive One... Set of Mark-up.
- 15. Why Be Responsive One... Deployment.
- 16.
- 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 PartyContent... Ads & Social Widgets
- 21. RWD Challenges One Setof Mark-up... Double-edged Sword
- 22. Learned the hardway... http://happyholidays.wvu.edu
- 23. Standards Process Standards Processis Evolving http://www.w3.org/community/respimg/
- 24. Bridging the Gap Mindthe Gap http://flic.kr/p/638wPy
- 25. Existing Solutions adaptive imageswebsite http://adaptive-images.com/
- 26. Take a NewPath image of a path for showing RESS as a way forward http://flic.kr/p/7cGN8g
- 27.
- 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 beused 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 Goodif... “ •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 aHeader & Footer Mobile View Desktop View http://www.lukew.com/ff/entry.asp?1392
- 33. Simple Example: Swapping aHeader & Footer <body> {{>header}} [...document content...] {{>footer}} </body> http://www.lukew.com/ff/entry.asp?1392
- 34. Simple Example: Swapping aHeader & Footer <body> {{>header}} [...document content...] {{>footer}} </body> http://www.lukew.com/ff/entry.asp?1392
- 35. Simple Example: Swapping aHeader & 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 aHeader & 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 inIts Infancy... Infancy http://flic.kr/p/7B7uyp
- 39. Untested ...and untested. http://flic.kr/p/nNZRV
- 40. U. of NotreDame 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 WeImplement RESS? So how would we implement? http://flic.kr/p/5ATc7g
- 45. Skipping RWD Responsive WebDesign is “easy” http://flic.kr/p/4YM8
- 46. Two Possible Solutions Server-side Solutions http://flic.kr/p/9jatna
- 47.
- 48. Been Around aWhile Old dog http://flic.kr/p/bWQicm
- 49. Used Quite aBit “ 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.
- 54. Also in ItsInfancy... Infancy http://flic.kr/p/7B7uyp
- 55. Untested ...and untested. http://flic.kr/p/nNZRV
- 56. Can be Simpleor Complex Taking a Cue from Front-End Dev
- 57.
- 58. Server-side Breakpoints 320px 640px 960px
- 59. Server-side Breakpoints Simple Example: Settinga 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 afile 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 SimpleExample: 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 ComplicatedExample: Templates Using Detector & Mustache http://ress.dmolsen.com & click “Learn more...”
- 64. RESS Challenges RESS isn’ta silver bullet. (anymore than RWD is)
- 65. RESS Challenges Server-side featuredetection can be spoofed.
- 66. RESS Challenges Requires server-sidelanguages.
- 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 ofweb development continues... of Web Development Continues http://flic.kr/p/3Q4To4
- 70.
- 71.
- 72.
- 73.