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

RESS: An Evolution of Responsive Web Design

Dave Olsen
May 15, 2012
Programming
7
470

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
Tweet

More Decks by Dave Olsen

See All by Dave Olsen
Measuring Web Performance
dmolsen
10
240
The Future Friendly Campus
dmolsen
19
12k
Developing a Progressive Mobile Strategy
dmolsen
4
1.2k
Developing a Progressive Mobile Strategy
dmolsen
3
310

Other Decks in Programming

See All in Programming
見た目から始める生産性向上
ikumatadokoro
7
820
Node.js v22 で変わること
yosuke_furukawa
PRO
7
2.6k
Rethinking UI building strategies @ SFI 2024
letelete
0
270
Git Lint
bkuhlmann
4
750
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Snowflakeで眠ったデータを起こそう！
estie
0
110
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
330
Java 22 Overview
kishida
1
180
Elm Form Validation
bkuhlmann
0
510
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
670
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
180

Featured

See All Featured
Done Done
chrislema
178
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Bash Introduction
62gerente
604
210k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Product Roadmaps are Hard
iamctodd
44
9.7k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
GraphQLとの向き合い方2022年版
quramy
32
12k
It's Worth the Effort
3n
180
27k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
Typedesign – Prime Four
hannesfritz
36
2.1k

Transcript

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

    WVU University Relations - Web Refresh Pittsburgh, May 15 2012

  2. slideshare.net/dmolsenwvu

  3. programmer 9 years at wvu wvu has 30,000 students

  4. What I’ll Talk About •The Responsive Age •What is RESS

    •Two Server-side Solutions

  5. The Responsive Age We’ve entered...

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

  7. http://flic.kr/p/9UmsCJ

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

  9. http://modernizr.com

  10. http://flic.kr/p/9Qp3A

  11. The client is now in charge

  12. One... http://flic.kr/p/5pGcyx Why Be Responsive

  13. One... URL. Why Be Responsive

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

  15. One... Deployment. Why Be Responsive

  16. futurefriend.ly

  17. balloons Time to Party... http://flic.kr/p/h6McT

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

  19. Media... Images & Video RWD Challenges

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

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

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

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

  24. Mind the Gap http://flic.kr/p/638wPy Bridging the Gap

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

  26. image of a path for showing RESS as a way

    forward Take a New Path http://flic.kr/p/7cGN8g

  27. What is RESS?

  28. Responsive Web Design + Server Side Components (I have no

    idea what becomes of the W, D, or C)

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

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

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

  32. Simple Example: Swapping a Header & Footer Mobile View Desktop

    View http://www.lukew.com/ff/entry.asp?1392

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

    [...document content...] {{>footer}} </body>

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

    [...document content...] {{>footer}} </body>

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

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

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

  38. Infancy RESS is in Its Infancy... http://flic.kr/p/7B7uyp

  39. Untested ...and untested. http://flic.kr/p/nNZRV

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

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

    Screen: 23 requests @ 291K

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

  43. developers and designers Designers + Developers? http://flic.kr/p/7Ma9n

  44. So how would we implement? http://flic.kr/p/5ATc7g How Do We Implement

    RESS?

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

  46. Two Possible Solutions Server-side Solutions http://flic.kr/p/9jatna

  47. Browser Detection #1

  48. Old dog http://flic.kr/p/bWQicm Been Around a While

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

  50. WURFL DeviceAtlas OpenDDR 51Degrees.mobi Lots of Solutions

  51. 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 ;)

  52. Arms Race? http://flic.kr/p/6RVLY2

  53. Server-side Feature Detection #2

  54. Infancy Also in Its Infancy... http://flic.kr/p/7B7uyp

  55. Untested ...and untested. http://flic.kr/p/nNZRV

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

    Dev

  57. Server-side Future Friendly?

  58. Server-side Breakpoints 320px 640px 960px

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

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

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

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

  63. Complicated Example: Templates Using Detector & Mustache http://ress.dmolsen.com & click

    “Learn more...” Robust Feature Detection

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

    Challenges

  65. Server-side feature detection can be spoofed. RESS Challenges

  66. Requires server-side languages. RESS Challenges

  67. Data needs to be separated from layout. RESS Challenges

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

  69. The evolution of web development continues... The of Web Development

    Continues http://flic.kr/p/3Q4To4

  70. Questions or comments?

  71. On Twitter @dmolsen...

  72. Or at dmolsen.com...

  73. Thank You