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.
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
26. To Be Absolutely Clear
Server-side components
are an enhancement.
Provide the good default/fallback with “RE” and
optimize the experience with “SS”.
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
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
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
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/
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
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
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.