Instant RESS Implementation How-to

It's rather easy - certainly for someone more on the design than development side of things like me - to think of responsive web design as primarily a matter of screen sizes and media queries. Client side stuff that I can understand.

I'm uncomfortably aware that there's much more too it than that. A comprehensive responsive design strategy requires an understanding of server side techniques that allow the tailoring of content according to device type, not just an ability to adapt layout to screen size. Luke Wroblewski coined the term RESS ('Responsive Web Design plus Server Side Components') to describe this holistic approach, and his original post still offers as good a summary as any of what's involved:

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.

After a couple of years building responsive sites I'm getting quite good at reflowing layouts through multiple media queries, but the server side stuff is still scary. When I've needed to serve different content according to screen size I've used Matt Stauffer's Simple RESS technique, a straightforward PHP-and-cookies based solution. I find this much easier and cleaner than inserting content through JavaScript. It makes it nice and easy, for example, to send a slideshow to a desktop display and a single image to mobile, or to embed a Google Map on desktop and send just the link to the map to smaller devices.

But I've not yet ventured into more advanced RESS involving device detection. The information is out there on the web, but it's disparate, and often pitched at quite a high technical level. So I was pleased to find a little book (concise indeed at 58 pages) called Instant RESS Implementation How-to by Chip Lambert, one of the Packt Publishing Instant series, which provides a very clear guide to advanced RESS topics.

The book explains how to combine Modernizr, the WURFL device detection library, and simple PHP code, to serve content according to device capability. Each of these essential RESS building blocks gets a little introduction before being combined to provide a robust foundation for proper device detection. Importantly, the discussion isn't just theoretical: concrete examples that can be applied to real world projects are used to explain each technology:

  • Modernizr is used to check for Geolocation and Web Storage support
  • WURFL is used to detect iOS devices and display a notice for an iPhone/iPad app
  • PHP is used in conjunction with WURFL to send different content components - such as images and forms - according to device type and size

The code samples are quite brief and straightforward enough for ready adaptation to the reader's own requirements. More than anything I appreciated the simple terms in which the examples are described: the book is targeted at non-programmers, or at least those with little experience of these techniques, making it ideal for designers who - even if they may never have to implement a sophisticated RESS strategy themselves - still want to understand the essential principles.

A quick Amazon search revealed - to my surprise - that thus far this is the only web development book available with RESS in the title. Most responsive design titles thus far have tended to focus overwhelmingly on the design side of things: explaining techniques for adapting layouts using media queries. I'm hoping we'll see quite a few more books like this, filling in the server side of the picture.

Categories: