ClientSidevServerSideKeeping up with the rapid evolution of desktop + mobile web design in the past year will make any head spin. Responsive Web Design (RWD) has blown up (every project in our pipeline is responsive) but like any solution, it has its issues. For Responsive, its load time and SEO to a lesser degree. The alternate methods has been Adaptive Web Design. Responsive however is evolving to utilize server-side methods to reduce load time, and this new method is being called responsive + server side (RESS)

So let me break it down and simplify it (hardcore coders, realize that's my intent).

Responsive Web Design (RWD)

Responsive Design is the most popular all-in-one website solution and is a terrific solution for most situations. The server sends the same template/html to all devices and relies on a combination of CSS and media queries to detect the display (vs device) and modify the content, features and functions to fluidly fill the screen.  The problem typically is speed. Those huge image we love on large desktop displays also gets sent to the mobile device, in addition to code for functions and features designed for desktop but not mobiles. They all get pushed down that tight mobile pipe, and impatient on-the-go mobile users are asked to wait, but often don't. On the plus side, designers and developers are learning these lessons quickly, and are designing lighter file-size layouts, as well as new methods (RESS see below). Also nice is the technology and tools are ubiquitous. Templates are easy to get for all the major CMSs, and developers are learning the techniques to mitigate the file size issues. > Examples: This site, Boston Globe, Disney


Adaptive Web Design (AWD)

Here the detection happens at the server level first (instead of the browser) and the server sends up the appropriate HTML with fixed break points to display both appropriately sized images/content, as well as page elements such as navigation or widgets. Adaptive design takes more effort, relies on accurate databases of devices (DDR (Device Description Repository)), and isn't as fluid as Responsive, as it relies on preset beak point templates. > Example: Etsy, Online, Threadless


Responsive + Server-Side (RESS)

Up until recently it was basically Adaptive vs Responsive. To combat the load time issue while maintaining the fluid layout quality of Responsive, developers are using a hybrid combination of Server-Side and Client-Side methods. The development community is actively experimenting with this direction now. While this solution reduces file size by sending just the appropriate sized images, it doesn't necessarily reduce the number of calls between the client and the server, without changing the core HTML. The added complexity is daunting, and is out of reach of most developers, and your open source and commercial CMSs (point).  This may be beyond many budgets now, but like all new technologies, that will change.



In most cases and budgets, the Responsive approach will still be most appropriate. Designers will need to take special care to optimize images like never before, and be prudent about their size and volume - especially on homepage. The shift to RESS is going to be incremental as the code on both ends from CMS to html is going to need to evolve.


AWD, RWD, RESS Resources

Webmonkey : Two Flavors of a "One Web" Approach: Responsive vs Adaptive

Marketing Land : Is Adaptive Web Design OR RESS Better Than Responsive Design for SEO?

Smashing : Improve Mobile Support with Server-Side Responsive Design

Smashing : Lightening Your Responsive Website Design With RESS (this is a great article that walks through the steps using a sample site to reduce file size dramatically)


1 Comment