This “widthDetect” is a very simple but effective js library to @media target your grid design.

It works cross-browser, cross-device, cross-library with a debounce method thats returns a function which wraps your callback, limiting its execution rate to the limit specified in the second argument all in less than 1KB!

 

 

 

Running on IE8 and IE9:

DEMO (view the example running)
github (check the code)

 

What else you need to do:

This is the client side. The server needs to deliver the image depending on the RWD break points, like: [0,250] = 1 image 250px and then use it max-width:100%

I already created several RWD break points, but you should have 2 or 3, like: Small, Medium and Large. Every single breakpoint is going to make a request and also controlled by “debounce” techniques.

How to do it:

SiteCore: (http://sdn.sitecore.net/Articles/XSL/5%203%20Enhancements/Image%20Enhancements.aspx)

Sencha: (http://www.sencha.com/learn/how-to-use-src-sencha-io/)

 

Implementation:

Now, you already have the client side done, next step is going to be implement the server side.

Server needs to deliver just the right image, no more no less = “broadband optimise”.

 

Running server examples:

from BBC Homepage and BBC NEWS

http://jsfiddle.net/leolanese/aPaYt/

 

 

This is free to use. Send me a message at: @leolaneseltd