Responsive-content: This jQuery plugin lets you easily serve different HTML to different devices

Forked from pjax (pushState + ajax), Responsive-content is a jQuery plugin created by developer Stephan Fowler that lets you serve different content to different devices.

As Fowler explains, Responsive-content goes hand in hand with common responsive design techniques, but acts on a different level. For example, CSS media queries make it easy to resize the width of DIVs, but load the same content inside that DIV no matter what device you’re using.

This is where Responsive-content steps in, which “can be used subtly — for example to cause smaller images to be loaded on smaller devices — or to deliver radically different content to different screen widths or device capabilities.” Used hand-in-hand with media queries, this plugin lets you “dynamically replace the ‘content’ area of the page with HTML tailored to the requesting-device’s width or capabilities.” Of course, this is already possible using more complicated methods, but Responsive-content is easy to implement.

This plugin allows for the following:

1. Single URLs : a webpage should have an identical URL whatever device it is viewed on (though the page’s components may have device-contingent URLs.)

2. Cache Friendliness : since baseline caching arrangements use the URL of a document as its unique key, there should be no reliance on any other parameters; the approach must thus avoid User Agent detection or cookies.

3. Performance Orientation : devices with lower bandwidths should be the beneficiaries of all performance trade offs inherent in the approach.

You can learn more via the link below.

➤ Responsive-content (h/t: Paulo Oliveira)

Image credit: Creatas Images / Getty Images