The main prob;em with responsive design is how it handles images. This is easier with a static website but when using a CMS and losing the control over content to the website administrator and/or the client images may get added that are larger than the ideal width or images that after the are reduce to a smaller size become in recognisable.
The Hopefull cure is a new image syntax, headed by Mathew Marquis.
An example draft of the proposed syntax from 18th June 2012 looks like this:
<source srcset="small.jpg 1x, small-highres.jpg 2x" /> <source media="(min-width: 18em)" srcset="med.jpg 1x, med-highres.jpg 2x" /> <source media="(min-width: 45em)" srcset="large.jpg 1x, large-highres.jpg 2x" /> </pre> <img src="small.jpg" alt="Description of image subject." />
The chain of events followed by the above markup pattern are:
- If the
pictureelement is unsupported, the
imgcontained therein is shown as fallback markup.
pictureis supported, use
mediaattributes to determine which
sourceelement best suits the user’s viewport.
- Once an appropriate
sourceelement has been selected, the
srcsetattribute determines which image source is best suited to the user’s screen resolution. If only a single resolution is necessary, the
srcattribute will function as expected.
This is available at: http://www.w3.org/community/respimg/2012/06/18/florians-compromise/.