the server side of responsive web design
DESCRIPTION
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.TRANSCRIPT
The Server-side of Responsive DesignDave Olsen, @dmolsenWVU University Relations - WebBreaking Development, October 2013
“The Server-side?”
AssumptionsOne small piece of data.
A Lot Riding on a Part of a Single String
The Responsive Age
Responsive Design Server-sidevs.
http://flic.kr/p/6JVLMd
Set of content.
One...URL.
Why Be Responsive?
Set of mark-up.Deployment.
We Have to Be futurefriend.ly
http://flic.kr/p/8x6b8X
“Not so fast, my friends...”
brad’s iceberg
© Brad Frost
brad’s iceberg
© Brad Frost© Brad Frost
AssumptionsThis shit can be complicated.
False Sense of Security?
Responsive Design Server-sidevs.Maybe it’s not so simple...
http://flic.kr/p/6JVLMd
Responsive Design Server-side&Maybe instead it could be...
http://flic.kr/p/6JVLMd
Especially if we can be future-friendly on the server-side too.
A New Hope?
How do we combine them?
Responsive Web Design +Server Side ComponentsI have no idea what becomes of the W, D, or C
What is RESS?
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
What is RESS?
Swap HTML components (from those avail on server) in a RWD to further optimize page/app.
- Luke Wroblewski @lukew
What is RESS?
https://twitter.com/lukew/status/275678033661272064
http://flic.kr/p/9UmsCJ
Responsive Design is Our Baseline
Server-side components are an enhancement.
To Be Absolutely Clear
Provide the good default/fallback with “RE” and optimize the experience with “SS”.
Simple Example: Swapping an Image
Mobile View Desktop View
http://www.lukew.com/ff/entry.asp?1392
Server-side Swapping...
http://www.lukew.com/ff/entry.asp?1392
index.html
userimg.html
mobile_userimg.html
Simple Example: Swapping an Image
Server-side Swapping...
http://www.lukew.com/ff/entry.asp?1392
<img class="biguserimage" height="300" width="300"
alt="{{ username }}" src="{{ biguserimg }}">
Simple Example: Swapping an Image
Server-side Swapping...
<img class="userimage" width="50" height="50"
alt="{{ username }}" src="{{ smluserimg }}">
Ultimately, RESS is a Scalpel
DES
KTO
P W
EBTA
BLET
WEB
MO
BILE WEB
It’s All One Web
• 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.
http://www.lukew.com/ff/entry.asp?1509
RESS Works Well If...
- Luke Wroblewski @lukew
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.
The average weight of a home page today.
Source: HTTP Archive
Images JavaScript
Flash
HTM
LCSSOther
77%
1.5 MB
RESS Works Well If...
It’s a Tool in the Toolbox
So how would we implement?
http://flic.kr/p/5ATc7g
How Do We Implement RESS?
Responsive Web Design is “easy”
http://flic.kr/p/4YM8
Skipping Responsive Design...
Server-side Driven
Two Types of RESS
#1
Client-side Driven#2
Server-side Driven
Two Types of RESS
#1
Two Possible Solutions
Server-sideSolutions
http://flic.kr/p/9jatna
Browser Detection#1
Two Server-Side Options
Old dog
http://flic.kr/p/bWQicm
Been Around a Long Time
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/
It’s Used A Lot
ScientiaMobileDeviceAtlas
51Degrees.mobi
There Are Robust Solutions
A Word About Open Source
Is it an Arms Race?
Yes, but so is everything in web development.
just look at the Modernizr issue tracker
Server-side Feature Detection#2
Two Server-Side Options
Infancy
http://flic.kr/p/7B7uyp
Implementations Are In Their Infancy...
The Idea Has Been Around for Awhile
http://flic.kr/p/d34hh3
Taking a Cue From Front-end Dev
Modernizr Server
Can the Server Be Future-Friendly?
Server-side Feature Detection Options
Server-side Breakpoints#1
320px
640px
960px
#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
#1: Server-side Breakpoints
<?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’ />”;
?>
Simple Example: Setting a file path based on window.innerWidth
http://www.netmagazine.com/tutorials/getting-started-ress
#1: Server-side Breakpoints
Server-side Feature Detection Options
Robust Feature Detection#2
...feature tests should only ever be run when you don’t know the UA you’re running in.
- Alex Russell, Jan. 2011 @slightlylate
#2: Robust Feature Detection
http://infrequently.org/2011/01/cutting-the-interrogation-short/
#2: Robust Feature Detection
<?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;! }
?>
Simple Example: Inserting a video link
http://detector.dmolsen.com/demo/ytembed/
#2: Robust Feature Detection
Complicated Example: Templates Using Detector & Mustache
#2: Robust Feature Detection
http://ress.dmolsen.com/
DES
KTO
P W
EBM
-AD
VAN
CED
ress.dmolsen.com
MO
BILE BA
SIC
Example: West Virginia University
Example: West Virginia University
Goals/Issues:
Implementation:
•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
•Detector for classification•Mustache for templates•YAML for data storage
{ { "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" }}
Hybrid Example: Mixing Types of Detection
Example: West Virginia University
DES
KTO
P W
EBM
-AD
VAN
CED
wvu.edu
MO
BILE BA
SIC
Example: West Virginia University
Default MobileAdvanced
MobileRetina
MobileBasic
0K
175K
350K
525K
700K
Total Images JS CSS HTML0K
175K
350K
525K
700K
Total Images JS CSS HTML0K
175K
350K
525K
700K
Total Images JS CSS HTML0K
175K
350K
525K
700K
Total Images JS CSS HTML
Example: West Virginia University
0%
25%
50%
75%
100%
2011 2012 2013
Mobile Traffic on First Day of Fall Semester
Client-side Driven
Two Types of RESS
#2
Client-side: Cutting the Mustard
Client-side Example: An Event Apart
Client-side Example: An Event Apart
$(window).bind(“enterBreakpoint1”, function () { if (smallLoaded == false) { $("#event-thumbnail-holder").load("/main/small-heroes", function () { ... }); };});
Example: Fetching Content by Breakpoint
source bastardized from http://aneventapart.com
$(window).bind(“enterBreakpoint600”, function () { if (bigLoaded == false) { if ($("#slide-show").length > 0) { $("#slide-show").load("/main/heroes", function () { ... }); }; };});
Client-side Example: An Event Apart
600P
X+
LESS
TH
AN
600
PX
aneventapart.com
Client-side Example: An Event Apart
Less than 600pxGreater than 600px
0K
125K
250K
375K
500K
Total Images JS CSS HTML XHR Fonts0K
125K
250K
375K
500K
Total Images JS CSS HTML XHR Fonts
They get bonus points for also using lazy loading.
RESS isn’t a silver bullet.anymore than RWD is
Challenges for RESS
Server-side feature detection can be spoofed.
Challenges for RESS
Requires server-side languages.
Challenges for RESS
if you go the server-side route
Data needs to be strongly separated from layout.
Challenges for RESS
Need to properly setcache headers.
Challenges for RESS
Are Client-Hints the Future of RESS?
Questions or comments?
Dave OlsenProfessional TechnologistWest Virginia University
@dmolsendmolsen.com
Thanks for Listening