Your SlideShare is downloading. ×
0
The Server-side of
Responsive Design
Dave Olsen, @dmolsen
WVU University Relations - Web
Breaking Development, October 201...
“The Server-side?”
Was This Your First Reaction?

http://flic.kr/p/xdsh
“You’re a Smartphone Browser!”

http:/
/xkcd.com/869/
A Lot Riding on a Part of a Single String

One small piece of data.

Assumptions
The Responsive Age
Responsive Design

vs. Server-side
http://flic.kr/p/6JVLMd
Why Be Responsive?

One...

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

One...
URL.
Set of content.
Set of mark-up.
Deployment.
We Have to Be futurefriend.ly
Time to Party!

balloons

http://flic.kr/p/h6McT
“Not so fast, my friends...”

http://flic.kr/p/8x6b8X
© Brad Frost

brad’s iceberg
© Brad Frost

brad’s iceberg
False Sense of Security?

This shit can be complicated.

Assumptions
Maybe it’s not so simple...

Responsive Design

vs. Server-side
http://flic.kr/p/6JVLMd
Maybe instead it could be...

Responsive Design

&

Server-side

http://flic.kr/p/6JVLMd
A New Hope?

Especially if we can be
future-friendly on
the server-side too.
http://flic.kr/p/agyEkb
How do we combine them?
What is RESS?

RESS
Responsive Web Design +
Server Side Components
I have no idea what becomes of the W, D, or C
What is RESS?

In a nutshell, RESS combines
adaptive layouts with server
side component (not full page)
optimization.
- Lu...
What is RESS?

Swap HTML components (from
those avail on server) in a RWD
to further optimize page/app.
- Luke Wroblewski
...
Responsive Design is Our Baseline

http://flic.kr/p/9UmsCJ
To Be Absolutely Clear

Server-side components
are an enhancement.
Provide the good default/fallback with “RE” and
optimiz...
Server-side Swapping...

Simple Example: Swapping an Image

Mobile View

Desktop View

http://www.lukew.com/ff/entry.asp?1...
Server-side Swapping...

Simple Example: Swapping an Image

index.html
userimg.html
mobile_userimg.html

http:/
/www.lukew...
Server-side Swapping...

Simple Example: Swapping an Image

<img class="userimage" width="50" height="50"
alt="{{ username...
Ultimately, RESS is a Scalpel
MOBILE WEB

TABLET WEB

DESKTOP WEB

It’s All One Web
When Does RESS Make Sense?

http://flic.kr/p/b6WaSP
RESS Works Well If...

• If you want layout adjustments across devices.
• And optimization at the component level to
incre...
My Experience On When It Makes Sense

• Team has a mix of skills.
• Team members are not strong in the
skills necessary fo...
RESS Works Well If...

1.5 MB
The average weight of a home page today.

Source: HTTP Archive

CSS

77%

HTML

JavaScript O...
It’s a Tool in the Toolbox
RESS Can Be A Bridge

http:/
/flic.kr/p/7FyCB2
How Do We Implement RESS?

So how would we implement?

http://flic.kr/p/5ATc7g
Skipping Responsive Design...

Responsive Web Design is “easy”

http://flic.kr/p/4YM8
Two Types of RESS

#1 Server-side Driven
#2 Client-side Driven
Two Types of RESS

#1 Server-side Driven
Two Possible Solutions

Server-side
Solutions
http://flic.kr/p/9jatna
Two Server-Side Options

#1 Browser Detection
Been Around a Long Time

Old dog

http://flic.kr/p/bWQicm
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
t...
There Are Robust Solutions

ScientiaMobile
DeviceAtlas
51Degrees.mobi
A Word About Open Source
Is it an Arms Race?

http://flic.kr/p/6RVLY2
Is it an Arms Race?

Yes, but so is everything
in web development.
just look at the Modernizr issue tracker
Two Server-Side Options

#2 Server-side Feature Detection
Implementations Are In Their Infancy...

Infancy

http://flic.kr/p/7B7uyp
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

#1 Server-side Breakpoints
#1: Server-side Breakpoints

320px

640px

960px
#1: Server-side Breakpoints

Simple Example:
Setting a file path based on window.innerWidth
<script type="text/javascript"...
#1: Server-side Breakpoints

Simple Example:
Setting a file path based on window.innerWidth
<?php
// grab the cookie value...
Server-side Feature Detection Options

#2 Robust Feature Detection
#2: Robust Feature Detection

...feature tests should only
ever be run when you don’t
know the UA you’re running in.
- Ale...
#2: Robust Feature Detection
#2: Robust Feature Detection

Simple Example: Inserting a video link
<?php
// require Detector to identify browser & popul...
#2: Robust Feature Detection

Complicated Example:
Templates Using Detector & Mustache

http:/
/ress.dmolsen.com/
MOBILE BASIC

M-ADVANCED

DESKTOP WEB

ress.dmolsen.com
Example: West Virginia University
Example: West Virginia University
Goals/Issues:

• Modifying the carousel for retina & code
• Modify mark-up for IE 7 & 8
...
Example: West Virginia University

Hybrid Example: Mixing Types of Detection
{
{
"mobile-advanced-ie": {
"isMobile": true,...
MOBILE BASIC

M-ADVANCED

DESKTOP WEB

wvu.edu
Example: West Virginia University
700K

700K

700K

700K

525K

525K

525K

525K

350K

350K

350K

350K

175K

175K

175K...
Example: West Virginia University
100%

75%

50%

25%

0%
2011

2012

2013

Mobile Traffic on First Day of Fall Semester
Two Types of RESS

#2 Client-side Driven
Client-side: Cutting the Mustard
Client-side Example: An Event Apart
Client-side Example: An Event Apart

Example: Fetching Content by Breakpoint
$(window).bind(“enterBreakpoint600”, function...
Client-side Example: An Event Apart
LESS THAN 600PX

600PX+

aneventapart.com
Client-side Example: An Event Apart
500K

500K

375K

375K

250K

250K

125K

125K

0K

Total

Images

JS

CSS

HTML

XHR
...
Challenges for RESS

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

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.
if you go the server-side route
Challenges for RESS

Data needs to be strongly
separated from layout.
Challenges for RESS

Need to properly set
cache headers.
Are Client-Hints the Future of RESS?
http://flic.kr/p/c74N1
http://flic.kr/p/agyEkb
Questions or comments?
Thanks for Listening

Dave Olsen
Professional Technologist
West Virginia University

@dmolsen
dmolsen.com
The Server Side of Responsive Web Design
The Server Side of Responsive Web Design
Upcoming SlideShare
Loading in...5
×

The Server Side of Responsive Web Design

9,581

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. 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.

Published in: Technology, Design

Transcript of "The Server Side of Responsive Web Design"

  1. 1. The Server-side of Responsive Design Dave Olsen, @dmolsen WVU University Relations - Web Breaking Development, October 2013
  2. 2. “The Server-side?”
  3. 3. Was This Your First Reaction? http://flic.kr/p/xdsh
  4. 4. “You’re a Smartphone Browser!” http:/ /xkcd.com/869/
  5. 5. A Lot Riding on a Part of a Single String One small piece of data. Assumptions
  6. 6. The Responsive Age
  7. 7. Responsive Design vs. Server-side http://flic.kr/p/6JVLMd
  8. 8. Why Be Responsive? One... http://flic.kr/p/5pGcyx
  9. 9. Why Be Responsive? One... URL. Set of content. Set of mark-up. Deployment.
  10. 10. We Have to Be futurefriend.ly
  11. 11. Time to Party! balloons http://flic.kr/p/h6McT
  12. 12. “Not so fast, my friends...” http://flic.kr/p/8x6b8X
  13. 13. © Brad Frost brad’s iceberg
  14. 14. © Brad Frost brad’s iceberg
  15. 15. False Sense of Security? This shit can be complicated. Assumptions
  16. 16. Maybe it’s not so simple... Responsive Design vs. Server-side http://flic.kr/p/6JVLMd
  17. 17. Maybe instead it could be... Responsive Design & Server-side http://flic.kr/p/6JVLMd
  18. 18. A New Hope? Especially if we can be future-friendly on the server-side too.
  19. 19. http://flic.kr/p/agyEkb
  20. 20. How do we combine them?
  21. 21. What is RESS? RESS Responsive Web Design + Server Side Components I have no idea what becomes of the W, D, or C
  22. 22. 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
  23. 23. 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
  24. 24. Responsive Design is Our Baseline http://flic.kr/p/9UmsCJ
  25. 25. To Be Absolutely Clear Server-side components are an enhancement. Provide the good default/fallback with “RE” and optimize the experience with “SS”.
  26. 26. Server-side Swapping... Simple Example: Swapping an Image Mobile View Desktop View http://www.lukew.com/ff/entry.asp?1392
  27. 27. Server-side Swapping... Simple Example: Swapping an Image index.html userimg.html mobile_userimg.html http:/ /www.lukew.com/ff/entry.asp?1392
  28. 28. 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
  29. 29. Ultimately, RESS is a Scalpel
  30. 30. MOBILE WEB TABLET WEB DESKTOP WEB It’s All One Web
  31. 31. When Does RESS Make Sense? http://flic.kr/p/b6WaSP
  32. 32. 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
  33. 33. 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.
  34. 34. 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
  35. 35. It’s a Tool in the Toolbox
  36. 36. RESS Can Be A Bridge http:/ /flic.kr/p/7FyCB2
  37. 37. How Do We Implement RESS? So how would we implement? http://flic.kr/p/5ATc7g
  38. 38. Skipping Responsive Design... Responsive Web Design is “easy” http://flic.kr/p/4YM8
  39. 39. Two Types of RESS #1 Server-side Driven #2 Client-side Driven
  40. 40. Two Types of RESS #1 Server-side Driven
  41. 41. Two Possible Solutions Server-side Solutions http://flic.kr/p/9jatna
  42. 42. Two Server-Side Options #1 Browser Detection
  43. 43. Been Around a Long Time Old dog http://flic.kr/p/bWQicm
  44. 44. 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/
  45. 45. There Are Robust Solutions ScientiaMobile DeviceAtlas 51Degrees.mobi
  46. 46. A Word About Open Source
  47. 47. Is it an Arms Race? http://flic.kr/p/6RVLY2
  48. 48. Is it an Arms Race? Yes, but so is everything in web development. just look at the Modernizr issue tracker
  49. 49. Two Server-Side Options #2 Server-side Feature Detection
  50. 50. Implementations Are In Their Infancy... Infancy http://flic.kr/p/7B7uyp
  51. 51. The Idea Has Been Around for Awhile http://flic.kr/p/d34hh3
  52. 52. Taking a Cue From Front-end Dev
  53. 53. Modernizr Server
  54. 54. Can the Server Be Future-Friendly?
  55. 55. Server-side Feature Detection Options #1 Server-side Breakpoints
  56. 56. #1: Server-side Breakpoints 320px 640px 960px
  57. 57. #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
  58. 58. #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
  59. 59. Server-side Feature Detection Options #2 Robust Feature Detection
  60. 60. #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/
  61. 61. #2: Robust Feature Detection
  62. 62. #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/
  63. 63. #2: Robust Feature Detection Complicated Example: Templates Using Detector & Mustache http:/ /ress.dmolsen.com/
  64. 64. MOBILE BASIC M-ADVANCED DESKTOP WEB ress.dmolsen.com
  65. 65. Example: West Virginia University
  66. 66. 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
  67. 67. 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" } }
  68. 68. MOBILE BASIC M-ADVANCED DESKTOP WEB wvu.edu
  69. 69. 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
  70. 70. Example: West Virginia University 100% 75% 50% 25% 0% 2011 2012 2013 Mobile Traffic on First Day of Fall Semester
  71. 71. Two Types of RESS #2 Client-side Driven
  72. 72. Client-side: Cutting the Mustard
  73. 73. Client-side Example: An Event Apart
  74. 74. 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
  75. 75. Client-side Example: An Event Apart
  76. 76. LESS THAN 600PX 600PX+ aneventapart.com
  77. 77. 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.
  78. 78. Challenges for RESS http://flic.kr/p/9wF2S
  79. 79. Challenges for RESS RESS isn’t a silver bullet. anymore than RWD is
  80. 80. Challenges for RESS Server-side feature detection can be spoofed.
  81. 81. Challenges for RESS Requires server-side languages. if you go the server-side route
  82. 82. Challenges for RESS Data needs to be strongly separated from layout.
  83. 83. Challenges for RESS Need to properly set cache headers.
  84. 84. Are Client-Hints the Future of RESS?
  85. 85. http://flic.kr/p/c74N1
  86. 86. http://flic.kr/p/agyEkb
  87. 87. Questions or comments?
  88. 88. Thanks for Listening Dave Olsen Professional Technologist West Virginia University @dmolsen dmolsen.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×