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. Depending on project requirements, team make-up and deployment environment combining these two techniques might lead to intriguing solutions for your organization. We'll discuss when it makes sense to take this extra step and we'll explore techniques for combining server-side technology, like server-side feature-detection, with your responsive web designs to deliver the most flexible solutions possible.

1. The Server-side of
Responsive Design
Dave Olsen, @dmolsen
WVU University Relations - Web
Breaking Development, October 2013

2. “The Server-side?”

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

6. The Responsive Age

7. Responsive Design
vs. Server-side
http://flic.kr/p/6JVLMd

8. Why Be Responsive?
One...
http://flic.kr/p/5pGcyx

9. Why Be Responsive?
One...
URL.
Set of content.
Set of mark-up.
Deployment.

10. We Have to Be futurefriend.ly

11. Time to Party!
balloons
http://flic.kr/p/h6McT

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.

20. http://flic.kr/p/agyEkb

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

42. Two Possible Solutions
Server-side
Solutions
http://flic.kr/p/9jatna

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

57. #1: Server-side Breakpoints
320px
640px
960px

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/

65. MOBILE BASIC
M-ADVANCED
DESKTOP WEB
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"
}
}

69. MOBILE BASIC
M-ADVANCED
DESKTOP WEB
wvu.edu

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

77. LESS THAN 600PX
600PX+
aneventapart.com

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.

79. Challenges for RESS
http://flic.kr/p/9wF2S

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?

86. http://flic.kr/p/c74N1

88. http://flic.kr/p/agyEkb

89. Questions or comments?

90. Thanks for Listening
Dave Olsen
Professional Technologist
West Virginia University
@dmolsen
dmolsen.com