RESS: An Evolution of Responsive Web Design
73
RESS: An Evolution of Responsive Web Design Dave Olsen, @dmolsen WVU University Relations - Web Refresh Pittsburgh, May 15 2012
-
Upload
dave-olsen -
Category
Technology
-
view
31.423 -
download
1
description
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.
Transcript of RESS: An Evolution of Responsive Web Design
RESS:An Evolution of Responsive Web Design
Dave 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
The Responsive Age We’ve entered...
http://www.alistapart.com/articles/responsive-web-design/
DES
KTO
P W
EBTA
BLET
WEB
MO
BILE WEB
It’s All One Web
http://modernizr.com
The client is now in charge
One...
URL.
Why Be Responsive
One...
Set of Mark-up.
Why Be Responsive
One...
Deployment.
Why Be Responsive
futurefriend.ly
http://flic.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://flic.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://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 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
“...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
<body> {{>header}}
[...document content...]
{{>footer}}</body>
Simple Example: Swapping a Header & Footer
http://www.lukew.com/ff/entry.asp?1392
index.htmlheader.htmlmobile_header.htmlfooter.htmlmobile_footer.html
Simple Example: Swapping a Header & Footer
http://www.lukew.com/ff/entry.asp?1392
index.htmlheader.htmlmobile_header.htmlfooter.htmlmobile_footer.html
DES
KTO
P W
EBM
-AD
VAN
CED
ress.dmolsen.com
MO
BILE BA
SIC
Infancy
RESS is in Its Infancy...
http://flic.kr/p/7B7uyp
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 Gaphttp://flic.kr/p/7FyCB2
developers and designers
Designers + Developers?
http://flic.kr/p/7Ma9n
So how would we implement?
http://flic.kr/p/5ATc7g
How Do We Implement RESS?
Responsive Web Design is “easy”
Skipping RWD
http://flic.kr/p/4YM8
Two Possible Solutions
Server-sideSolutions
http://flic.kr/p/9jatna
Browser Detection#1
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
DeviceAtlasOpenDDR
51Degrees.mobi
Lots of Solutions
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 ;)
Server-side Feature Detection#2
Infancy
Also in Its Infancy...
http://flic.kr/p/7B7uyp
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 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
<?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
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 DevelopmentContinues
http://flic.kr/p/3Q4To4
Questions or comments?
On Twitter @dmolsen...
Or at dmolsen.com...
Thank You
