• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
RESS: An Evolution of Responsive Web Design
 

RESS: An Evolution of Responsive Web Design

on

  • 30,654 views

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

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.

Statistics

Views

Total Views
30,654
Views on SlideShare
17,384
Embed Views
13,270

Actions

Likes
91
Downloads
463
Comments
1

46 Embeds 13,270

http://www.interfacesriches.fr 6556
http://www.dmolsen.com 3955
http://www.jvetrau.com 1227
http://www.acseo-conseil.fr 363
http://dmolsen.com 296
http://www.cmsmagazine.ru 290
http://feeds.feedburner.com 289
http://www.eduniverse.org 39
http://eduniverse.org 31
http://meerajwadhwa.com 26
https://twitter.com 26
http://www.twylah.com 24
http://www.scoop.it 21
http://preview-local.dmolsen.com 20
http://www.cs.ubbcluj.ro 20
http://interfacesriches.fr 19
http://www.plurk.com 17
http://newsblur.com 6
http://translate.googleusercontent.com 5
http://us-w1.rockmelt.com 4
https://si0.twimg.com 3
http://www.linkedin.com 3
http://paper.li 2
http://bottlenose.com 2
http://feeds2.feedburner.com 2
http://zootool.com 2
http://www-ig-opensocial.googleusercontent.com 2
http://cloud.feedly.com 2
http://reader.aol.com 1
http://cache.baidu.com 1
http://www.feedspot.com 1
http://tweetedtimes.com 1
https://www.google.fr 1
http://feedly.com 1
http://plus.url.google.com 1
http://10.224.64.63 1
http://www.newsblur.com 1
https://neo.virtusa.com 1
http://gridread.com 1
http://ranksit.com 1
http://www.netvibes.com 1
http://preview.dmolsen.com 1
https://www.rebelmouse.com 1
http://posthub.fr 1
http://s3-eu-west-1.amazonaws.com 1
http://site-acseo.serveur-recette.fr 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    RESS: An Evolution of Responsive Web Design RESS: An Evolution of Responsive Web Design Presentation Transcript

    • 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://flic.kr/p/9UmsCJ
    • TABLET WEB DESKTOP WEB It’s All One WebMOBILE WEB
    • http://modernizr.com
    • http://flic.kr/p/9Qp3A
    • The client is now in charge
    • Why Be ResponsiveOne... http://flic.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://flic.kr/p/h6McT
    • “Not so fast, my friends...” http://flic.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://flic.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://flic.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 define anentire Web site for all devices but keycomponents within that site havedevice-class specific 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 <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
    • 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://flic.kr/p/7B7uyp
    • Untested ...and untested.http://flic.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://flic.kr/p/7FyCB2
    • Designers + Developers? developers and designers http://flic.kr/p/7Ma9n
    • How Do We Implement RESS?So how would we implement? http://flic.kr/p/5ATc7g
    • Skipping RWDResponsive Web Design is “easy” http://flic.kr/p/4YM8
    • Two Possible Solutions Server-side Solutions http://flic.kr/p/9jatna
    • #1 Browser Detection
    • Been Around a While Old doghttp://flic.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 file* - I help maintain the project ;) https://github.com/tobie/ua-parser/
    • Arms Race? http://flic.kr/p/6RVLY2
    • Server-side Feature#2 Detection
    • Also in Its Infancy...Infancy http://flic.kr/p/7B7uyp
    • Untested ...and untested.http://flic.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 file 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 file 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://flic.kr/p/3Q4To4
    • Questions or comments?
    • On Twitter @dmolsen...
    • Or at dmolsen.com...
    • Thank You