SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.
SlideShare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.
Successfully reported this slideshow.
Activate your 14 day free trial to unlock unlimited reading.
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.
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
48.
Been Around a While
Old dog
http://flic.kr/p/bWQicm
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/
50.
Lots of Solutions
WURFL
51Degrees.mobi
OpenDDR
DeviceAtlas
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
67.
RESS Challenges
Data needs to be
separated from layout.
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