Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
RESS:An Evolution of Responsive Web DesignDave Olsen, @dmolsenWVU University Relations - WebRefresh Pittsburgh, May 15 2012
slideshare.net/dmolsenwvu
programmer9 years at wvuwvu has 30,000 students
What I’ll Talk About •The Responsive Age •What is RESS •Two Server-side Solutions
We’ve entered...The Responsive Age
http://www.alistapart.com/articles/responsive-web-design/
http://flic.kr/p/9UmsCJ
TABLET WEB DESKTOP WEB It’s All One WebMOBILE WEB
http://modernizr.com
http://flic.kr/p/9Qp3A
The client is now in charge
Why Be ResponsiveOne... http://flic.kr/p/5pGcyx
Why Be ResponsiveOne...URL.
Why Be Responsive One...Set of Mark-up.
Why Be Responsive One...Deployment.
futurefriend.ly
Time to Party... balloons http://flic.kr/p/h6McT
“Not so fast, my friends...” http://flic.kr/p/8x6b8X
RWD Challenges Media...Images & Video
RWD Challenges3rd Party Content... Ads & Social Widgets
RWD ChallengesOne Set of Mark-up... Double-edged Sword
Learned the hard way... http://happyholidays.wvu.edu
Standards ProcessStandards Process is Evolving http://www.w3.org/community/respimg/
Bridging the GapMind the Gap http://flic.kr/p/638wPy
Existing Solutionsadaptive images website http://adaptive-images.com/
Take a New Pathimage of a path for showing RESS as a way forward http://flic.kr/p/7cG...
What is RESS?
Responsive Web Design + Server Side Components(I have no idea what becomes of the W, D, or C)
“In a nutshell, RESS combines adaptivelayouts with server side component(not full page) optimization. So asingle set of pa...
“...browser-detection can be usedto help inform an overall responsivedesign as opposed to being the be-all-end-all for tem...
RESS is Good if...“ •If you want layout adjustments across devices. •And optimization at the component level ...
Simple Example:Swapping a Header & Footer Mobile View Desktop View http://www.lukew.com/ff/entry.asp?1392
Simple Example:Swapping a Header & Footer <body> {{>header}} [...document content...] ...
Simple Example:Swapping a Header & Footer <body> {{>header}} [...document content...] ...
Simple Example:Swapping a Header & Footer index.html header.html mobile_header.html ...
Simple Example:Swapping a Header & Footer index.html header.html mobile_header.html ...
M-ADVANCED DESKTOP WEB ress.dmolsen.comMOBILE BASIC
RESS is in Its Infancy...Infancy http://flic.kr/p/7B7uyp
Untested ...and untested.http://flic.kr/p/nNZRV
U. of Notre Dame ExampleND data http://weedygarden.net/2012/05/a-case-for-ress/
Large Screen: 136 requests @ 2.7MB ND dataSmall Screen:23 requests @ 291K ...
bridge We Still Need to Bridge the Gaphttp://flic.kr/p/7FyCB2
Designers + Developers? developers and designers http://flic.kr/p/7Ma9n
How Do We Implement RESS?So how would we implement? http://flic.kr/p/5ATc7g
Skipping RWDResponsive Web Design is “easy” http://flic.kr/p/4YM8
Two Possible Solutions Server-side Solutions http://flic.kr/p/9jatna
#1 Browser Detection
Been Around a While Old doghttp://flic.kr/p/bWQicm
Used Quite a Bit“ 82% of the Alexa 100 top sites use some form of server-side mobile device detecti...
Lots of SolutionsWURFL 51Degrees.mobi OpenDDR DeviceAtlas
Personal Fav*: ua-parser node.js, Python, PHP, & Ruby libraries built upon a standard YAML fil...
Arms Race? http://flic.kr/p/6RVLY2
Server-side Feature#2 Detection
Also in Its Infancy...Infancy http://flic.kr/p/7B7uyp
Untested ...and untested.http://flic.kr/p/nNZRV
Can be Simple or Complex Taking a Cue from Front-End Dev
Server-side Future Friendly?
Server-side Breakpoints320px 640px 960px
Server-side BreakpointsSimple Example:Setting a file path basedon window.innerWidth<script type="text/javascript"> func...
Simple Example:Setting a file path basedon window.innerWidth<?php // grab the cookie value $screenWidth = $_COOKIE[...
Robust Feature Detection http://detector.dmolsen.com
Robust Feature DetectionSimple Example:Inserting a video link<?php // require Detector to identify browser & populate ...
Robust Feature DetectionComplicated Example:Templates Using Detector & Mustache http://ress.dmolsen.com & click “Le...
RESS ChallengesRESS isn’t a silver bullet. (anymore than RWD is)
RESS ChallengesServer-side feature detection can be spoofed.
RESS ChallengesRequires server-side languages.
RESS Challenges Data needs to beseparated from layout.
RESS Challenges“ It is not only the design of the web site and the layout of content that needs to be adapted or e...
TheThe evolution of web development continues... of Web Development ...
Questions or comments?
On Twitter @dmolsen...
Or at dmolsen.com...
Thank You
Upcoming SlideShare
Loading in …5
×

RESS: An Evolution of Responsive Web Design

41,847 views

Published on

Responsive web design has become an important tool for front-end developers as they develop mobile-optimized solutions for clients. Browser-detection has been an important tool for server-side developers for the same task for much longer. Unfortunately, both techniques have certain limitations. I’ll show how both front-end and server-side developers can take advantage of the new technique called RESS (Responsive Web Design with Server Side Components) that aims to be combine the best of both worlds for delivering mobile-optimized content.

Published in: Technology, Design
no profile picture user
Show More

RESS: An Evolution of Responsive Web Design

  1. 1. RESS:An Evolution of Responsive Web DesignDave Olsen, @dmolsenWVU University Relations - WebRefresh Pittsburgh, May 15 2012
  2. 2. slideshare.net/dmolsenwvu
  3. 3. programmer9 years at wvuwvu has 30,000 students
  4. 4. What I’ll Talk About •The Responsive Age •What is RESS •Two Server-side Solutions
  5. 5. We’ve entered...The Responsive Age
  6. 6. http://www.alistapart.com/articles/responsive-web-design/
  7. 7. http://flic.kr/p/9UmsCJ
  8. 8. TABLET WEB DESKTOP WEB It’s All One WebMOBILE WEB
  9. 9. http://modernizr.com
  10. 10. http://flic.kr/p/9Qp3A
  11. 11. The client is now in charge
  12. 12. Why Be ResponsiveOne... http://flic.kr/p/5pGcyx
  13. 13. Why Be ResponsiveOne...URL.
  14. 14. Why Be Responsive One...Set of Mark-up.
  15. 15. Why Be Responsive One...Deployment.
  16. 16. futurefriend.ly
  17. 17. Time to Party... balloons http://flic.kr/p/h6McT
  18. 18. “Not so fast, my friends...” http://flic.kr/p/8x6b8X
  19. 19. RWD Challenges Media...Images & Video
  20. 20. RWD Challenges3rd Party Content... Ads & Social Widgets
  21. 21. RWD ChallengesOne Set of Mark-up... Double-edged Sword
  22. 22. Learned the hard way... http://happyholidays.wvu.edu
  23. 23. Standards ProcessStandards Process is Evolving http://www.w3.org/community/respimg/
  24. 24. Bridging the GapMind the Gap http://flic.kr/p/638wPy
  25. 25. Existing Solutionsadaptive images website http://adaptive-images.com/
  26. 26. Take a New Pathimage of a path for showing RESS as a way forward http://flic.kr/p/7cGN8g
  27. 27. What is RESS?
  28. 28. Responsive Web Design + Server Side Components(I have no idea what becomes of the W, D, or C)
  29. 29. “In a nutshell, RESS combines adaptivelayouts with server side component(not full page) optimization. So asingle set of page templates define anentire Web site for all devices but keycomponents within that site havedevice-class specific implementationsthat are rendered server side. - Luke Wroblewski @lukew http://www.lukew.com/ff/entry.asp?1392
  30. 30. “...browser-detection can be usedto help inform an overall responsivedesign as opposed to being the be-all-end-all for templating. - Dave Olsen @dmolsen http://bit.ly/wW91Ie
  31. 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. 32. Simple Example:Swapping a Header & Footer Mobile View Desktop View http://www.lukew.com/ff/entry.asp?1392
  33. 33. Simple Example:Swapping a Header & Footer <body> {{>header}} [...document content...] {{>footer}} </body> http://www.lukew.com/ff/entry.asp?1392
  34. 34. Simple Example:Swapping a Header & Footer <body> {{>header}} [...document content...] {{>footer}} </body> http://www.lukew.com/ff/entry.asp?1392
  35. 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. 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. 37. M-ADVANCED DESKTOP WEB ress.dmolsen.comMOBILE BASIC
  38. 38. RESS is in Its Infancy...Infancy http://flic.kr/p/7B7uyp
  39. 39. Untested ...and untested.http://flic.kr/p/nNZRV
  40. 40. U. of Notre Dame ExampleND data http://weedygarden.net/2012/05/a-case-for-ress/
  41. 41. Large Screen: 136 requests @ 2.7MB ND dataSmall Screen:23 requests @ 291K http://weedygarden.net/2012/05/a-case-for-ress/
  42. 42. bridge We Still Need to Bridge the Gaphttp://flic.kr/p/7FyCB2
  43. 43. Designers + Developers? developers and designers http://flic.kr/p/7Ma9n
  44. 44. How Do We Implement RESS?So how would we implement? http://flic.kr/p/5ATc7g
  45. 45. Skipping RWDResponsive Web Design is “easy” http://flic.kr/p/4YM8
  46. 46. Two Possible Solutions Server-side Solutions http://flic.kr/p/9jatna
  47. 47. #1 Browser Detection
  48. 48. Been Around a While Old doghttp://flic.kr/p/bWQicm
  49. 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 @xbshttp://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
  50. 50. Lots of SolutionsWURFL 51Degrees.mobi OpenDDR DeviceAtlas
  51. 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. 52. Arms Race? http://flic.kr/p/6RVLY2
  53. 53. Server-side Feature#2 Detection
  54. 54. Also in Its Infancy...Infancy http://flic.kr/p/7B7uyp
  55. 55. Untested ...and untested.http://flic.kr/p/nNZRV
  56. 56. Can be Simple or Complex Taking a Cue from Front-End Dev
  57. 57. Server-side Future Friendly?
  58. 58. Server-side Breakpoints320px 640px 960px
  59. 59. Server-side BreakpointsSimple Example:Setting a file path basedon 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. 60. Simple Example:Setting a file path basedon 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. 61. Robust Feature Detection http://detector.dmolsen.com
  62. 62. Robust Feature DetectionSimple Example:Inserting a video link<?php // require Detector to identify browser & populate $ua require("lib/Detector/Detector.php"); $html5Embed = "<iframe {...} ></iframe>"; $simpleLink = "Your browser doesnt 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. 63. Robust Feature DetectionComplicated Example:Templates Using Detector & Mustache http://ress.dmolsen.com & click “Learn more...”
  64. 64. RESS ChallengesRESS isn’t a silver bullet. (anymore than RWD is)
  65. 65. RESS ChallengesServer-side feature detection can be spoofed.
  66. 66. RESS ChallengesRequires server-side languages.
  67. 67. RESS Challenges Data needs to beseparated from layout.
  68. 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. 69. TheThe evolution of web development continues... of Web Development Continues http://flic.kr/p/3Q4To4
  70. 70. Questions or comments?
  71. 71. On Twitter @dmolsen...
  72. 72. Or at dmolsen.com...
  73. 73. Thank You

×