RWD · Technical

Responsive Web Design V/S Responsive Server Side Design


Responsive Web Design
RWD

Responsive Web Design with Server Side – RESS

What it is ?
RWD is a combination of fluid grids and images with media queries to change layout based on the size of a device viewport. It uses feature detection (mostly on the client) to determine available device capabilities and adapt accordingly. Combining responsive Web design with server side component (not full page) optimization is a way to extend client-side only solutions. With this technique, a single set of 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.
When to use ?
– If you want layout adjustments across devices.
– You can live without complete optimization for specific devices.
– You don’t have access to server-side solutions.
– You really don’t trust device detection.
– If you want layout adjustments across devices.
– And optimization at the component level to increase performance or tune user experience.
– You trust server-side device detection with sensible defaults.
Web Page Size
– Responsive design is often implemented using only client-side adjustments to web pages, meaning that both desktop computers and mobile devices always download an entire web page – Most Optimized page size, Render only those components which are viewable on requested device
Load time
Slow
– Client side responsive design involves sending more data to the device than it might need – using unnecessary bandwidth and making the customer wait longer for their page
Fast
– With specific optimization (Excluding extraneous plugins, using compressed images), Server-side powered mobile web pages are up to 500% smaller than their desktop counterparts, and have been shown to load up to 400% faster than web pages not using a server-side mobile solution.
– An study says that by 2015, 50% of web traffic is expected to come from smart phone
Target Audience
– Devices having support of CSS3 and/or Javascript Server side responsive design is guaranteed to support all devices and leaves the heavy lifting to the server rather than requiring the relatively low powered device to do all the work
Adoption New Devices
-CSS/JS changes require to make site compactable for new devices – Change in CSS/JS & Serverside components
Time & Effort
Require 25-30% more development (compare to RESS) time to develop and maintain Responsive sites The server side approach saves on development time and also saves on code management and extension once the initial site has been created, with less risk of introducing bugs and the ability to target devices based on fine grained device detection.
Code Management
Same set of code is used for Desktop & Mobile. Though its possible to write some specific components for mobile/Desktop and call them via AJAX Device specific components can be managed on server side.
Approach & Framework
Use javascript and/or media query to find device Identify device on server side by using request agent
Caching
Same page version will be cached for all devices Require additional changes to cache based per device basis
Non-JS support
Use Media Query to support Non-JS responsive Device Supported, as pages are managed by server

Next Read:
Responsive Web Design V/S Mobile First approach

References:

Advertisements

3 thoughts on “Responsive Web Design V/S Responsive Server Side Design

  1. That is a great tip particularly to those fresh to the blogosphere.
    Short but very precise info… Thanks for sharing this one.

    A must read post!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s