{"id":255,"date":"2012-05-21T02:09:02","date_gmt":"2012-05-21T02:09:02","guid":{"rendered":"http:\/\/www.w3.org\/community\/respimg\/?p=255"},"modified":"2012-05-27T03:16:12","modified_gmt":"2012-05-27T03:16:12","slug":"respondu-responsive-implementation-framework-alpha-implements-picture-and-srcset","status":"publish","type":"post","link":"https:\/\/www.w3.org\/community\/respimg\/2012\/05\/21\/respondu-responsive-implementation-framework-alpha-implements-picture-and-srcset\/","title":{"rendered":"Respondu: responsive implementation framework (alpha) &#8211; implements picture and srcset"},"content":{"rendered":"<div style=\"border: 1px solid #ddd;padding-bottom:1em;padding-left:0.5em;padding-right:0.5em\">\n<p><strong> Update: <\/strong>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.<\/p>\n<p>References: <\/p>\n<ul>\n<li>  <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/public-whatwg-archive\/2012May\/0552.html\" target=\"_blank\" rel=\"nofollow\">Florian Rivaol&#8217;s Post<\/a><\/li>\n<li> <a href=\"http:\/\/lists.whatwg.org\/pipermail\/whatwg-whatwg.org\/2012-May\/036143.html\" target=\"_blank\" rel=\"nofollow\">Markus Ernst Post<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/davidmarkclements\/Respondu#hybrid\" target=\"_blank\" rel=\"nofollow\">https:\/\/github.com\/davidmarkclements\/Respondu#hybrid<\/a><\/li>\n<li><a href=\"http:\/\/respondu.davidmarkclements.com\/hybrid.html\" target=\"_blank\" rel=\"nofollow\">Hybrid Example on respondu.davidmarkclements.com<\/a>\n<\/ul>\n<\/div>\n<p>Hi all, <\/p>\n<p>I&#8217;ve developed a basic framework that allows us to implement a responsive technique (e.g. picture, srcset or any new\/improved ideas), it&#8217;s called Respondu <a href=\"https:\/\/github.com\/davidmarkclements\/Respondu\" target=\"_blank\" rel=\"nofollow\">https:\/\/github.com\/davidmarkclements\/Respondu<\/a><\/p>\n<p>(if anyone has a better name, let me know :D). <\/p>\n<p>Examples can be found at <a href=\"http:\/\/respondu.davidmarkclements.com\/\" target=\"_blank\" rel=\"nofollow\">http:\/\/respondu.davidmarkclements.com\/<\/a><\/p>\n<p>One of the main features of this framework is that it <b>defers the loading of assets<\/b> (e.g. src&#8217;s etc) until it&#8217;s finished processing (this includes script tags in the body). It achieves this using the noscript technique (discovered by filament group (?)) &#8211; except instead of wrapping img&#8217;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).<\/p>\n<p> Benefits, <\/p>\n<ol>\n<li> supports non-js clients (e.g. search bots, screen readers etc.)<\/li>\n<li> no wasted HTTP-connections or bandwidth <\/li>\n<li> it&#8217;s relatively unintrusiveness, you simply wrap it round all your body code <\/li>\n<li> extendible, you can easily create you own implementations <\/li>\n<\/ol>\n<p>Once the final spec is implemented by vendors, the technique can be used as a fallback for<br \/>\nbrowsers without support for responsive, whilst also in turn falling back again for browsers without Javascript.<\/p>\n<p>Currently, Respondu has picture and srcset implementations available, for instance here&#8217;s srcset:<br \/>\n<code><br \/>\n&lt;!DOCTYPE HTML&gt;<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;style&gt;img {width:100%} \/* use fluid layouts  *\/&lt;\/style&gt;<br \/>\n&lt;script src=js\/R.js&gt;&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<\/p>\n<p>&lt;script&gt;window[&#039;#R&#039;](&#039;srcset&#039;);&lt;\/script&gt;<br \/>\n&lt;noscript&gt;<\/p>\n<p>&lt;img src=&quot;images\/photo.jpg&quot; srcset=&quot;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&quot;&gt;<\/p>\n<p>&lt;\/noscript&gt;&lt;\/style&gt;<\/p>\n<p>&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p>So far, I&#8217;ve tested it in Chrome, IE8, iOS Safari, and Firefox. <\/p>\n<p>If anyone would like to test in other browsers (ie7, ie9, OSX Safari, Opera) please be my guest, you beautiful person. <\/p>\n<p>Respondu is currently alpha as there&#8217;s a few things to do for smooth script integration (getting it to &#8220;just-work&#8221; with domready stuff), I&#8217;m totally sure the code could be tidier, and more optimized &#8211; any contributions to the code base or posted issues are invited, and warmly welcomed. <\/p>\n<p>See the github page for more details! <\/p>\n<p><a href=\"https:\/\/github.com\/davidmarkclements\/Respondu\" target=\"_blank\" rel=\"nofollow\">https:\/\/github.com\/davidmarkclements\/Respondu<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"https:\/\/www.w3.org\/community\/respimg\/2012\/05\/21\/respondu-responsive-implementation-framework-alpha-implements-picture-and-srcset\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2198,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[1],"tags":[],"class_list":["post-255","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/255","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/users\/2198"}],"replies":[{"embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/comments?post=255"}],"version-history":[{"count":9,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/255\/revisions"}],"predecessor-version":[{"id":263,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/posts\/255\/revisions\/263"}],"wp:attachment":[{"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/media?parent=255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/categories?post=255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.w3.org\/community\/respimg\/wp-json\/wp\/v2\/tags?post=255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}