RESS (Responsive Web Design with Server-Side Components), also known as the hybrid approach, offers a great way to get the best of both responsive and adaptive techniques. The mix of responsive and adaptive gives a lot of flexibility in terms of making a website blazing fast and lightweight. Here’s what you need to know about RESS.

The limitations of RWD

Responsive Web Design (RWD) is getting a lot of buzz today but it has also caused a lot of debate: on the plus side, it allows for one codebase to cater to devices with a range of different screen sizes. On the debit side, serving the same payload to all devices irrespective of device capabilities, screen size and resolution, as well as connection speed, can effectively close off entire markets to companies who don’t optimise.

The issue of mobile web performance has recently made the news at The Verge in the article titled "The Mobile Web Sucks". In a short response to this piece, the DeviceAtlas CTO Ronan Cremin wrote: “If you leave aside all of the extraneous content, Nilay's article had about 9.5KB of text content and 310KB of images. Yet the total page weight is a whopping 3.6MB or more, depending on the ads you get served. Some server-side website optimisation could have saved quite a bit of page weight in this case.”

'Some server-side website optimisation', as Ronan Cremin put it, can be done with RESS. Knowing what devices visitors are using to access websites makes it possible to remove some of the extra content that makes the mobile mobile web 'suck'.

Adaptive design is great for maximising mobile-driven sales

Mobile commerce is growing, fast. The latest figures show that one out of four people now own a smartphone worldwide, and 55% of all time spent on retail sites takes place on a mobile device, according to mobiForge. Companies must now learn that mobile-driven sales are not an unexpected bonus but one of the core aspects of an online strategy today.

The latest research by the DeviceAtlas team shows that all of the most visited websites (according to Alexa.com) are using Adaptive Web Design (AWD) to address visitors on varying devices. This approach makes it possible to fine-tune mobile user experience to maximize engagement and conversions from mobile sources.

Of course when you look at the top Alexa list you may think that these names are too large to take them as an example for your business, such as Amazon, Google, or Facebook. However bear in mind that server-side optimisation is definitely not an expensive option that only the largest players can use.

Server-side is the smart part

RESS is one of the most flexible approaches to web design that allows you to use only the aspects of responsive and adaptive techniques that you find suitable in your case. The ‘server-side’ component doesn't necessarily work by simply redirecting visitors on varying devices to a completely new experience (template) and a different URL. Instead, the server-side can help adjust the experience by selecting the right website components that work and look great on the user device. At the same time, those website elements that won't work or look great may not be loaded at all.

Problems that can be tackled with RESS

With server-side device detection it is possible to use detailed device knowledge to adapt those aspects of the website that may create bottlenecks or degrade the experience on mobile devices. This typically relates to heavy images, scripts, menus, etc.

Here are some examples showing what RESS can be used for on your website.  

1. Lightening images

With classic RWD, all devices are sent the same images even if they can’t show them at their native resolution. This is inefficient at best and market-limiting at worse. Heavier pages only work well on high speed connections, on high end devices with generous data plans. Here is a short paper that explains a technique which will significantly reduce image weight with 3 easy steps, 4 lines of code and 1 line of configuration. And once implemented, it requires no maintenance. Your website will have adaptive page weights as well as a responsive design.

2. Mobile-optimised menus

Luke Wroblewski gives mobile menus as a simple example of an RESS implementation. For mobile visitors, it makes sense to position the menus at the bottom of the page to make touch-based one-handed operation easier. RESS makes it possible to redesign the menus to make navigation on mobile devices fundamentally different than on desktop computers.

3. Adapting content for different connectivity levels

Some content is just not worth sending to mobile devices because it’s either not supported, too heavy, or doesn’t look great on smaller screens. A good example is a large background video that may not be suitable on a slower connectivity. With RESS it is possible to swap the video for a static image to save the data and make the website lighter.