The Server Side of Responsive Web Design
27 likes13,754 views
The document discusses the concept of combining responsive web design (RWD) with server-side components, known as Ress, to enhance mobile web experiences. It explains how Ress allows for adaptive layouts and server-side optimizations, making it suitable for teams lacking in advanced RWD skills and for situations requiring layout adjustments across devices. The author outlines various implementation strategies and the challenges associated with Ress, emphasizing that it is not a one-size-fits-all solution.
![#1: Server-side Breakpoints
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-final-131021100213-phpapp01/85/The-Server-Side-of-Responsive-Web-Design-59-320.jpg)
![Example: West Virginia University
Hybrid Example: Mixing Types of Detection
{
{
"mobile-advanced-ie": {
"isMobile": true,
"browser": "IE Mobile"
},
"mobile-advanced-retina": {
"isMobile": true,
"hirescapable": true
},
"mobile-advanced": {
"isMobile": true,
"features": [ "csstransforms" ]
},
"mobile-basic": {
"isMobile": true
},
"ie": {
"browser": "IE",
"major": "7||8"
}
}](https://image.slidesharecdn.com/ress-final-131021100213-phpapp01/85/The-Server-Side-of-Responsive-Web-Design-68-320.jpg)
The Server Side of Responsive Web Design
- 1. The Server-side of Responsive Design Dave Olsen, @dmolsen WVU University Relations - Web Breaking Development, October 2013
- 3. Was This Your First Reaction? http://flic.kr/p/xdsh
- 4. “You’re a Smartphone Browser!” http:/ /xkcd.com/869/
- 5. A Lot Riding on a Part of a Single String One small piece of data. Assumptions
- 9. Why Be Responsive? One... URL. Set of content. Set of mark-up. Deployment.
- 10. We Have to Be futurefriend.ly
- 12. “Not so fast, my friends...” http://flic.kr/p/8x6b8X
- 13. © Brad Frost brad’s iceberg
- 14. © Brad Frost brad’s iceberg
- 15. False Sense of Security? This shit can be complicated. Assumptions
- 16. Maybe it’s not so simple... Responsive Design vs. Server-side http://flic.kr/p/6JVLMd
- 17. Maybe instead it could be... Responsive Design & Server-side http://flic.kr/p/6JVLMd
- 18. A New Hope? Especially if we can be future-friendly on the server-side too.
- 21. How do we combine them?
- 22. What is RESS? RESS Responsive Web Design + Server Side Components I have no idea what becomes of the W, D, or C
- 23. What is RESS? In a nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. - Luke Wroblewski @lukew http:/ /www.lukew.com/ff/entry.asp?1392
- 24. What is RESS? Swap HTML components (from those avail on server) in a RWD to further optimize page/app. - Luke Wroblewski @lukew https:/ /twitter.com/lukew/status/275678033661272064
- 25. Responsive Design is Our Baseline http://flic.kr/p/9UmsCJ
- 26. To Be Absolutely Clear Server-side components are an enhancement. Provide the good default/fallback with “RE” and optimize the experience with “SS”.
- 27. Server-side Swapping... Simple Example: Swapping an Image Mobile View Desktop View http://www.lukew.com/ff/entry.asp?1392
- 28. Server-side Swapping... Simple Example: Swapping an Image index.html userimg.html mobile_userimg.html http:/ /www.lukew.com/ff/entry.asp?1392
- 29. Server-side Swapping... Simple Example: Swapping an Image <img class="userimage" width="50" height="50" alt="{{ username }}" src="{{ smluserimg }}"> <img class="biguserimage" height="300" width="300" alt="{{ username }}" src="{{ biguserimg }}"> http:/ /www.lukew.com/ff/entry.asp?1392
- 30. Ultimately, RESS is a Scalpel
- 31. MOBILE WEB TABLET WEB DESKTOP WEB It’s All One Web
- 32. When Does RESS Make Sense? http://flic.kr/p/b6WaSP
- 33. RESS Works Well 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
- 34. My Experience On When It Makes Sense • Team has a mix of skills. • Team members are not strong in the skills necessary for complex RWD interactions. • Design elements need to be swapped based on known functionality or performance issues.
- 35. RESS Works Well If... 1.5 MB The average weight of a home page today. Source: HTTP Archive CSS 77% HTML JavaScript Other Flash Images
- 36. It’s a Tool in the Toolbox
- 37. RESS Can Be A Bridge http:/ /flic.kr/p/7FyCB2
- 38. How Do We Implement RESS? So how would we implement? http://flic.kr/p/5ATc7g
- 39. Skipping Responsive Design... Responsive Web Design is “easy” http://flic.kr/p/4YM8
- 40. Two Types of RESS #1 Server-side Driven #2 Client-side Driven
- 41. Two Types of RESS #1 Server-side Driven
- 43. Two Server-Side Options #1 Browser Detection
- 44. Been Around a Long Time Old dog http://flic.kr/p/bWQicm
- 45. It’s Used A Lot 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/
- 46. There Are Robust Solutions ScientiaMobile DeviceAtlas 51Degrees.mobi
- 47. A Word About Open Source
- 48. Is it an Arms Race? http://flic.kr/p/6RVLY2
- 49. Is it an Arms Race? Yes, but so is everything in web development. just look at the Modernizr issue tracker
- 50. Two Server-Side Options #2 Server-side Feature Detection
- 51. Implementations Are In Their Infancy... Infancy http://flic.kr/p/7B7uyp
- 52. The Idea Has Been Around for Awhile http://flic.kr/p/d34hh3
- 53. Taking a Cue From Front-end Dev
- 54. Modernizr Server
- 55. Can the Server Be Future-Friendly?
- 56. Server-side Feature Detection Options #1 Server-side Breakpoints
- 58. #1: 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
- 59. #1: Server-side Breakpoints 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
- 60. Server-side Feature Detection Options #2 Robust Feature Detection
- 61. #2: Robust Feature Detection ...feature tests should only ever be run when you don’t know the UA you’re running in. - Alex Russell, Jan. 2011 @slightlylate http:/ /infrequently.org/2011/01/cutting-the-interrogation-short/
- 62. #2: Robust Feature Detection
- 63. #2: 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/
- 64. #2: Robust Feature Detection Complicated Example: Templates Using Detector & Mustache http:/ /ress.dmolsen.com/
- 66. Example: West Virginia University
- 67. Example: West Virginia University Goals/Issues: • Modifying the carousel for retina & code • Modify mark-up for IE 7 & 8 • Provide a non-responsive baseline • Deliver the “correct” mark-up • Fast turnaround Implementation: • Detector for classification • Mustache for templates • YAML for data storage
- 68. Example: West Virginia University Hybrid Example: Mixing Types of Detection { { "mobile-advanced-ie": { "isMobile": true, "browser": "IE Mobile" }, "mobile-advanced-retina": { "isMobile": true, "hirescapable": true }, "mobile-advanced": { "isMobile": true, "features": [ "csstransforms" ] }, "mobile-basic": { "isMobile": true }, "ie": { "browser": "IE", "major": "7||8" } }
- 70. Example: West Virginia University 700K 700K 700K 700K 525K 525K 525K 525K 350K 350K 350K 350K 175K 175K 175K 175K 0K Total Images JS CSS HTML Default 0K Total Images JS CSS HTML Mobile Retina 0K Total Images JS CSS HTML Mobile Advanced 0K Total Images JS CSS HTML Mobile Basic
- 71. Example: West Virginia University 100% 75% 50% 25% 0% 2011 2012 2013 Mobile Traffic on First Day of Fall Semester
- 72. Two Types of RESS #2 Client-side Driven
- 73. Client-side: Cutting the Mustard
- 74. Client-side Example: An Event Apart
- 75. Client-side Example: An Event Apart Example: Fetching Content by Breakpoint $(window).bind(“enterBreakpoint600”, function () { if (bigLoaded == false) { if ($("#slide-show").length > 0) { $("#slide-show").load("/main/heroes", function () { ... }); }; }; }); $(window).bind(“enterBreakpoint1”, function () { if (smallLoaded == false) { $("#event-thumbnail-holder").load("/main/small-heroes", function () { ... }); }; }); source bastardized from http://aneventapart.com
- 76. Client-side Example: An Event Apart
- 78. Client-side Example: An Event Apart 500K 500K 375K 375K 250K 250K 125K 125K 0K Total Images JS CSS HTML XHR Fonts Greater than 600px 0K Total Images JS CSS HTML XHR Fonts Less than 600px They get bonus points for also using lazy loading.
- 80. Challenges for RESS RESS isn’t a silver bullet. anymore than RWD is
- 81. Challenges for RESS Server-side feature detection can be spoofed.
- 82. Challenges for RESS Requires server-side languages. if you go the server-side route
- 83. Challenges for RESS Data needs to be strongly separated from layout.
- 84. Challenges for RESS Need to properly set cache headers.
- 85. Are Client-Hints the Future of RESS?
- 90. Thanks for Listening Dave Olsen Professional Technologist West Virginia University @dmolsen dmolsen.com