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.
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. 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
32. Simple Example:
Swapping a Header & Footer
Mobile View Desktop View
http://www.lukew.com/ff/entry.asp?1392
49. 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
@xbs
http://www.circleid.com/posts/20120111_analysis_of_server_side_mobile_web_detection/
51. 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/
59. Server-side Breakpoints
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
60. Simple Example:
Setting a file path based
on 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
68. 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/
69. The
The evolution of web development continues...
of Web
Development
Continues
http://flic.kr/p/3Q4To4