RESS: An Evolution of Responsive Web Design

RESS:An Evolution of Responsive Web DesignDave Olsen, @dmolsenWVU University Relations - WebRefresh Pittsburgh, May 15 2012

slideshare.net/dmolsenwvu

programmer9 years at wvuwvu has 30,000 students

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

We’ve entered...The Responsive Age

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

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

TABLET WEB DESKTOP WEB It’s All One WebMOBILE WEB

http://modernizr.com

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

The client is now in charge

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

Why Be ResponsiveOne...URL.

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

Why Be Responsive One...Deployment.

futurefriend.ly

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

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

RWD Challenges Media...Images & Video

RWD Challenges3rd Party Content... Ads & Social Widgets

RWD ChallengesOne Set of Mark-up... Double-edged Sword

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

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

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

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

Take a New Pathimage of a path for showing RESS as a way forward 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 adaptivelayouts with server side component(not full page) optimization. So asingle set of page templates deﬁne anentire Web site for all devices but keycomponents within that site havedevice-class speciﬁc implementationsthat are rendered server side. - Luke Wroblewski @lukew http://www.lukew.com/ff/entry.asp?1392

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

RESS is Good 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

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

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

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

M-ADVANCED DESKTOP WEB ress.dmolsen.comMOBILE BASIC

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

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

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

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

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

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

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

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

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

#1 Browser Detection

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

Used Quite a Bit“ 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 @xbshttp://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/

Lots of SolutionsWURFL 51Degrees.mobi OpenDDR DeviceAtlas

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

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

Server-side Feature#2 Detection

Also in Its Infancy...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 Breakpoints320px 640px 960px

Server-side BreakpointsSimple Example:Setting a ﬁle path basedon 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

Simple Example:Setting a ﬁle path basedon 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

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

Robust Feature DetectionSimple Example:Inserting a video link<?php // require Detector to identify browser & populate $ua require("lib/Detector/Detector.php"); $html5Embed = "<iframe {...} ></iframe>"; $simpleLink = "Your browser doesnt 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/

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

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

RESS ChallengesServer-side feature detection can be spoofed.

RESS ChallengesRequires server-side languages.

RESS Challenges Data needs to beseparated 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. - Jon Arnes Sæterås @jonarnes http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/

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

Questions or comments?

On Twitter @dmolsen...

Or at dmolsen.com...

Thank You

http://www.dmolsen.com	3937
http://www.interfacesriches.fr	3001
http://www.jvetrau.com	1087
http://www.cmsmagazine.ru	278
http://feeds.feedburner.com	244
http://dmolsen.com	127
http://www.eduniverse.org	35
http://eduniverse.org	25
http://www.twylah.com	24
http://preview-local.dmolsen.com	20
http://interfacesriches.fr	19
http://www.cs.ubbcluj.ro	19
http://www.acseo-conseil.fr	18
http://www.plurk.com	17
http://meerajwadhwa.com	16
https://twitter.com	16
http://translate.googleusercontent.com	4
http://us-w1.rockmelt.com	4
https://si0.twimg.com	3
http://paper.li	2
http://zootool.com	2
http://www-ig-opensocial.googleusercontent.com	2
http://bottlenose.com	2
http://posthub.fr	1
http://tweetedtimes.com	1
http://preview.dmolsen.com	1
http://ranksit.com	1
http://gridread.com	1
https://www.rebelmouse.com	1
https://neo.virtusa.com	1
http://www.netvibes.com	1
http://cache.baidu.com	1

RESS: An Evolution of Responsive Web Design

by Dave Olsen

Accessibility

Categories

Upload Details

Usage Rights

32 Embeds 8,911

Statistics

RESS: An Evolution of Responsive Web Design Presentation Transcript