Respondu: responsive implementation framework (alpha) – implements picture and srcset
Update: After being inspired by the suggestions of Florian Rivoal (editor of the CSS Media Queries spec) and Markus Ernst over on the whatwg mailinglist Respondu now supports a new hybrid format that combines picture and srcset in a way that reduces markup and increases flexibility for the best of both worlds.
References:
Hi all,
I’ve developed a basic framework that allows us to implement a responsive technique (e.g. picture, srcset or any new/improved ideas), it’s called Respondu https://github.com/davidmarkclements/Respondu
(if anyone has a better name, let me know :D).
Examples can be found at http://respondu.davidmarkclements.com/
One of the main features of this framework is that it defers the loading of assets (e.g. src’s etc) until it’s finished processing (this includes script tags in the body). It achieves this using the noscript technique (discovered by filament group (?)) – except instead of wrapping img’s individually we wrap the whole body and then use a cheeky hack (dynamically wrap it in a style tag) to pull the noscript contents out (for browsers that wipe noscript contents on render).
Benefits,
- supports non-js clients (e.g. search bots, screen readers etc.)
- no wasted HTTP-connections or bandwidth
- it’s relatively unintrusiveness, you simply wrap it round all your body code
- extendible, you can easily create you own implementations
Once the final spec is implemented by vendors, the technique can be used as a fallback for
browsers without support for responsive, whilst also in turn falling back again for browsers without Javascript.
Currently, Respondu has picture and srcset implementations available, for instance here’s srcset:
<!DOCTYPE HTML>
<html>
<head>
<style>img {width:100%} /* use fluid layouts */</style>
<script src=js/R.js></script>
</head>
<body>
<script>window['#R']('srcset');</script>
<noscript>
<img src="images/photo.jpg" srcset="images/photo.small.jpg 320w, images/photo.small@2x.jpg 320w 2x, images/photo.medium.jpg 640w, images/photo.medium@2x.jpg 640w 2x, images/photo.large.jpg 1280w, images/photo.large@2x.jpg 1280w 2x, images/photo.xlarge.jpg 20000w, images/photo.xlarge@2x.jpg 20000w x2">
</noscript></style>
</body>
</html>
So far, I’ve tested it in Chrome, IE8, iOS Safari, and Firefox.
If anyone would like to test in other browsers (ie7, ie9, OSX Safari, Opera) please be my guest, you beautiful person.
Respondu is currently alpha as there’s a few things to do for smooth script integration (getting it to “just-work” with domready stuff), I’m totally sure the code could be tidier, and more optimized – any contributions to the code base or posted issues are invited, and warmly welcomed.
See the github page for more details!
Will this also work with Video? I am assentially looking for a different way to buffer html5 video assets when they are embedded directly into a site.
Hey Red,
if you want to defer the loading of the source of an original video element whilst determining the asset you want to load according to screen/viewport width, pixel ratio etc. (or in fact, any factors you can ascertain with javascript) then Respondu supports that.
All you have to do is create you own implementation, like so
window['#R'].prototype.responsiveVideo = function (doc, done) {
var sw = window.screen.width,
videos = doc.getElementsByTagName('video');
// do whatever you want with video elements based on whatever factors
done(); // call this when you're finished and body.innerHTML will be replaced with your changes
}
the doc parameter is not the window.document, it’s what I’m calling a ghost doc, it mirrors window.document and allows you to manipulate it just like the window.document (check out https://developer.mozilla.org/en/DOM/DOMImplementation.createHTMLDocument and google “activex htmlfile” (ie hack))
include this as a seperate file, or as inline script in your head (after loading R.js) – you could also modify it to detect html5 video and swap in swf etc. if html5 is not supported.
then in you’re body you’d do
<body>
<script>window['#R']('responsiveVideo');</script>
<noscript>
<video src="videofile.ogg" autoplay poster="posterimage.jpg"> </video>
</noscript>
</body>
If you wish, fork me on GitHub and when you’ve built it (build it as a separate file, I’d going in a modular direction) send me a pull request 🙂
Awesome thank you David. I appreciate you taking the time to post a follow up for me.
Pingback: New ‘Adaptive Image’ HTML Tag Stirs Controversy | Web development blog, news and tutorials - Developer Drive