RESS: An Evolution of Responsive Web Design

RESS: An Evolution of Responsive Web Design Dave Olsen, @dmolsen
WVU University Relations - Web Refresh Pittsburgh, May 15 2012

slideshare.net/dmolsenwvu

programmer 9 years at wvu wvu has 30,000 students

What I’ll Talk About •The Responsive Age •What is RESS
•Two Server-side Solutions

The Responsive Age We’ve entered...

http://www.alistapart.com/articles/responsive-web-design/

http://ﬂic.kr/p/9UmsCJ

DESKTOP WEB TABLET WEB MOBILE WEB It’s All One Web

http://modernizr.com

http://ﬂic.kr/p/9Qp3A

The client is now in charge

One... http://ﬂic.kr/p/5pGcyx Why Be Responsive

One... URL. Why Be Responsive

One... Set of Mark-up. Why Be Responsive

One... Deployment. Why Be Responsive

futurefriend.ly

balloons Time to Party... http://ﬂic.kr/p/h6McT

http://ﬂic.kr/p/8x6b8X “Not so fast, my friends...”

Media... Images & Video RWD Challenges

3rd Party Content... Ads & Social Widgets RWD Challenges

One Set of Mark-up... Double-edged Sword RWD Challenges

Learned the hard way... http://happyholidays.wvu.edu

Standards Process Standards Process is Evolving http://www.w3.org/community/respimg/

Mind the Gap http://ﬂic.kr/p/638wPy Bridging the Gap

adaptive images website http://adaptive-images.com/ Existing Solutions

image of a path for showing RESS as a way
forward Take a New Path http://ﬂic.kr/p/7cGN8g

What is RESS?

Responsive Web Design + Server Side Components (I have no
idea what becomes of the W, D, or C)

“In a nutshell, RESS combines adaptive layouts with server side
component (not full page) optimization. So a single set of page templates deﬁne an entire Web site for all devices but key components within that site have device-class speciﬁc implementations that are rendered server side. - Luke Wroblewski @lukew http://www.lukew.com/ff/entry.asp?1392

“...browser-detection can be used to help inform an overall responsive
design as opposed to being the be-all- end-all for templating. - Dave Olsen @dmolsen http://bit.ly/wW91Ie

•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 is Good if... “ - Luke Wroblewski @lukew

Simple Example: Swapping a Header & Footer Mobile View Desktop
View http://www.lukew.com/ff/entry.asp?1392

Simple Example: Swapping a Header & Footer http://www.lukew.com/ff/entry.asp?1392 <body> {{>header}}
[...document content...] {{>footer}} </body>

Simple Example: Swapping a Header & Footer http://www.lukew.com/ff/entry.asp?1392 index.html header.html
mobile_header.html footer.html mobile_footer.html

DESKTOP WEB M-ADVANCED ress.dmolsen.com MOBILE BASIC

Infancy RESS is in Its Infancy... http://ﬂic.kr/p/7B7uyp

Untested ...and untested. http://ﬂic.kr/p/nNZRV

ND data http://weedygarden.net/2012/05/a-case-for-ress/ U. of Notre Dame Example

ND data http://weedygarden.net/2012/05/a-case-for-ress/ Large Screen: 136 requests @ 2.7MB Small
Screen: 23 requests @ 291K

bridge We Still Need to Bridge the Gap http://ﬂic.kr/p/7FyCB2

developers and designers Designers + Developers? http://ﬂic.kr/p/7Ma9n

So how would we implement? http://ﬂic.kr/p/5ATc7g How Do We Implement
RESS?

Responsive Web Design is “easy” Skipping RWD http://ﬂic.kr/p/4YM8

Two Possible Solutions Server-side Solutions http://ﬂic.kr/p/9jatna

Browser Detection #1

Old dog http://ﬂic.kr/p/bWQicm Been Around a While

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/ Used Quite a Bit

WURFL DeviceAtlas OpenDDR 51Degrees.mobi Lots of Solutions

Personal Fav*: ua-parser node.js, Python, PHP, & Ruby libraries built
upon a standard YAML ﬁle https://github.com/tobie/ua-parser/ * - I help maintain the project ;)

Arms Race? http://ﬂic.kr/p/6RVLY2

Server-side Feature Detection #2

Infancy Also in Its Infancy... http://ﬂic.kr/p/7B7uyp

Untested ...and untested. http://ﬂic.kr/p/nNZRV

Can be Simple or Complex Taking a Cue from Front-End
Dev

Server-side Future Friendly?

Server-side Breakpoints 320px 640px 960px

Simple Example: Setting a ﬁle 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 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 ﬁle path based on window.innerWidth http://www.netmagazine.com/tutorials/getting-started-ress

Robust Feature Detection http://detector.dmolsen.com

<?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/ Robust Feature Detection

Complicated Example: Templates Using Detector & Mustache http://ress.dmolsen.com & click
“Learn more...” Robust Feature Detection

RESS isn’t a silver bullet. (anymore than RWD is) RESS
Challenges

Server-side feature detection can be spoofed. RESS Challenges

Requires server-side languages. RESS Challenges

Data needs to be separated from layout. RESS Challenges

It is not only the design of the web site
and the layout of content that needs to be adapted or enhanced; the idea of being responsive, adaptive and enhancing, must be implemented in the whole value chain. RESS Challenges “ - Jon Arnes Sæterås @jonarnes http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/

The evolution of web development continues... The of Web Development
Continues http://ﬂic.kr/p/3Q4To4

Questions or comments?

On Twitter @dmolsen...

Or at dmolsen.com...

Thank You

RESS: An Evolution of Responsive Web Design

RESS: An Evolution of Responsive Web Design

More Decks by Dave Olsen

Other Decks in Programming

Featured

Transcript