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.
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.
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?