Responsive Server Side: the Goldilocks of Web Design?

Years ago I used to work in the food service industry. I was a bartender and a server. It was my job to take their requests and give the customer what they wanted. And just as importantly, I gave it to them when they wanted.

Imagine a customer orders a full meal; a salad, an appetizer and an entre. Now imagine I’d bring out everything all at once. There’s a caprese salad, some bruschetta and a filet all sitting on the table.

Which would they eat first? Would they eat all of it? Could they?

Well, they maybe could, but it would be a vastly more overwhelming experience than if the were brought as proper courses. The same works with servers (web servers that is) and the devices that request their information.

Front end responsive design techniques serve everything to the browser at once and allow the device to sort through and make sense of everything that’s delivered. Like our foodie, inundated with tasty staples, the device has to take the flood of information and work to make sense of it all and render it properly. The work is exacerbated if the code is written poorly.

Now consider Responsive Server Side(RESS) techniques. The device pings the server and the server, using different device detection techniques, determines what type of device it is. You can then write your code so that only the code that that is applicable to that device will be sent.

Take a common mobile technique: the developer takes the site’s main navigation layout and swaps it into a dropdown menu on mobile. You will then have two hard coded menus(or in the case of dynamically created menus you would use Javascript to create the dropdown menu on the fly every time the page is rendered.) You then use a media query or some other device detection method and use CSS to hide and reveal the menus depending on which media querie is being triggered.
Not a horrible solution, but it does have some drawbacks.

Such as… every page that every user visits has the code for two menus, even though only one is ever being shown. Both menus are rendered every time the page is hit. This isn’t a big deal on desktops with tons of processing power, but on mobile devices, especially entry level devices with outdated processors, this will be a death sentence to any site.

Not only that but with dynamic menus on mobile, the menu is being created with Javascript. Mobile devices, with some of the slowest processing power in the device kingdom, and you’re giving it the most difficult way to render a menu Oi vey!

This is where RESS steps in.

Instead of using a media query to detect a device client-side and hide the rendered-but-unwanted bits of code, you detect the device server-side and then only feed the necessary code to the browser. No wasted processing. No unnecessary HTTP requests for resources that aren’t being used.

Just lean, mean code.

It’s like Japanese Zen Painting; each stroke placed just so, and not a one unnecessarily.

Curious? Looking to get started? Check out this great article by Smashing Magazine: http://www.smashingmagazine.com/2013/10/08/responsive-website-design-with-ress/
which does an outstanding job of a more in-depth look at RESS as well as various techniques.

What tricks do you use to optimize your site?