Here are details of my second test implementation of Responsive Images (a.k.a. Fluid Image) using the
Following on from :: Responsive Images Test #1
(and Responsive Images – #intro )
[Note: As my Scene7 account is no longer active, live demo’s will no longer work]
This is a variation on test #1. In this example the noscript element contains attributes with values for the Image ID at normal sizes ‘data-imageid’ , and alternate Image IDs for small ‘data-small-imageid’ and large sizes ‘data-large-imageid’.
<noscript data-imageid=’Lemon’ data-small-imageid=’Orange’ data-large-imageid=’Raspberry’><img src=’http://s7e2a.scene7.com/is/image/benco/Orange?wid=250′ alt=” /></noscript>
Live example: http://allbs.co.uk/richmedia/scene7/noscript_test2.html
Testing on my Android tablet and smartphone, switching orientation triggers different content to be loaded, and this is where I see greater future benefits – perhaps not in changing the product content so radically, but there could certainly be benefits in having such design control also over images in a responsive design layout.
(Note: for this test I have only so far tested the values are suitable for my Android smartphone and Android tablet – it is quite likely that there will be many devices for which this demo is not yet optimised – hopefully at some point my ‘device testing lab’ will have more toys in it 😉 )
I’d would really appreciate any thoughts and suggestions, questions or comments, my work email address:: bseymour (at) adobe.com (or @bseymour)
(All views expressed are my own, and do not necessarily reflect those of my employer)