Choosing Between Responsive Web Design, Device Channels or Both

This article explains how to choose between a Responsive Web Design and Device Channels.



Responsive Web Design

The following are the properties of a Responsive Web Design:

1. The same URL for all devices.
   
   
2. The same HTML is rendered for all devices.
   
   
3. The Device View Port is the key factor (resolution).
   
   
4. Overhead: Browser should support CSS3.
   
   
5. Overhead: Only 70-80% devices support.

Device Channels

The following are the properties of Device Channels:

1. Newly introduced to SharePoint 2013.
   
   
2. The same URL for all devices.
   
   
3. A different HTML is rendered for different devices.
   
   
4. The device user agent string is used to differentiate devices (For example Windows, iPhone, S4 and so on).
   
   
5. Custom Master Pages make it possible for each device-channel.
   
   
6. An Image Rendition for each device-channel is possible (Image Rendition).
   
   
7. The shrinking of data-size is possible for low-bandwidth devices.
   
   
8. Overhead: Additional configuration is required.

Choosing One

In most cases we must use only one of the following:

1. Responsive Web Design
2. Device Channels

Choosing Both

You can read from the preceding that sometimes we require both a Responsive Web Design and Device Channels. For example, the following is such a case:

1. Your company has a public web site targeted for all devices:
   
   
   1. Responsive Web Design can be implemented for all devices (Desktop, Tablet, Mobile and so on).
      
      
2. Field Workers using a BlackBerry with incompatible browsers must login into the web site:
   
   
   1. Device Channels can be configured for BlackBerry devices with custom master pages.
      
      
3. Field Workers using an iPhone/S4 with low-bandwidth connections need to login into the web site:
   
   
   1. Device Channels can be configured for an iPhone/S4 with a stripped-down version of pages.

Note

Please note that multiple user agent strings can be configured for a single device channel. This enables multiple devices of the same screen size / work location targeted against a single device channel.

References

• http://bit.ly/1AXwsr7
• How many web browsers support responsive design?

Summary

In this article we explored how to chose among a Responsive Web Design, Device Channels or both.