the server side of responsive web design

The Server-side of Responsive DesignDave Olsen, @dmolsenWVU University Relations - WebBreaking Development, October 2013

“The Server-side?”

Was This Your First Reaction?

http://flic.kr/p/xdsh

“You’re a Smartphone Browser!”

http://xkcd.com/869/

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

One...

http://flic.kr/p/5pGcyx

Why Be Responsive?

Set of content.

One...URL.

Why Be Responsive?

Set of mark-up.Deployment.

We Have to Be futurefriend.ly

balloons

http://flic.kr/p/h6McT

Time to Party!

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?

http://flic.kr/p/agyEkb

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

When Does RESS Make Sense?

http://flic.kr/p/b6WaSP

• 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

http://flic.kr/p/7FyCB2

RESS Can Be A Bridge

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

http://flic.kr/p/6RVLY2

Is it an Arms Race?

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.

Challenges for RESS

http://flic.kr/p/9wF2S

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?

http://flic.kr/p/c74N1

http://flic.kr/p/agyEkb

Questions or comments?

Dave OlsenProfessional TechnologistWest Virginia University

@dmolsendmolsen.com

Thanks for Listening