Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RESS: An Evolution of Responsive Web Design

RESS: An Evolution of Responsive Web Design

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. I’ll show how both front-end and server-side developers can take advantage of the new technique called RESS (Responsive Web Design with Server Side Components) that aims to be combine the best of both worlds for delivering mobile-optimized content.

Dave Olsen

May 15, 2012

More Decks by Dave Olsen

Other Decks in Programming


  1. RESS: An Evolution of Responsive Web Design Dave Olsen, @dmolsen

    WVU University Relations - Web Refresh Pittsburgh, May 15 2012
  2. image of a path for showing RESS as a way

    forward Take a New Path http://flic.kr/p/7cGN8g
  3. Responsive Web Design + Server Side Components (I have no

    idea what becomes of the W, D, or C)
  4. “In a nutshell, RESS combines adaptive layouts with server side

    component (not full page) optimization. So a single set of page templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side. - Luke Wroblewski @lukew http://www.lukew.com/ff/entry.asp?1392
  5. “...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
  6. •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
  7. Simple Example: Swapping a Header & Footer Mobile View Desktop

    View http://www.lukew.com/ff/entry.asp?1392
  8. 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
  9. Personal Fav*: ua-parser node.js, Python, PHP, & Ruby libraries built

    upon a standard YAML file https://github.com/tobie/ua-parser/ * - I help maintain the project ;)
  10. 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 Server-side Breakpoints
  11. <?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
  12. <?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
  13. 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/