I’ve read several articles about responsive images, videos, and even text in the last couple of weeks, getting into Bootstrap and Skeleton as a designer has really shifted how I think about design and implementation. It’s a beautiful way of showing information, organizing it, and optimizing it in a way that would make Tufte cry with joy.
I love working with it so much that I’ve been going through the many complaints that I’ve seen people have in a new HTML5 world, hoping that their concerns will be met head on by a new spec or feature. The issue I have with the way people approach this problem, and it mainly concerns creating a new tag for every element that doesn’t “Respond” well. We’re all treating the symptoms, and not the cause, and it’s really starting to annoy me. Let me show you an example I read about a week ago from A List Apart:
What you may not know is that there’s already a way to use media queries to determine which video source to use, though browser support is a little spotty.
<video>
<source src="high-res.webm" media="min-width:800px" />
<source src="low-res.webm" />
<img src="poster.jpg" />
</video>From there, it doesn’t take much imagination to see how we could use a pattern like this.
<picture>
<source src="high-res.jpg" media="min-width: 800px" />
<source src="mobile.jpg" />
<!-- Fallback content: -->
<img src="mobile.jpg" />
</picture>
They have good reason to create a new HTML tag, only video can be loaded responsively right now, what about pictures that you don’t want to take forever to load on someone’s mobile phone? what about optimizing your site, and maybe allowing people to cut down on text in a small viewport? There has to be a better way, and a more creative way to do this rather than creating a tag which only covers half the problems. My proposal for a tag is something like this:
<responsive>
<video>
<source src="high-res.webm" media="min-width: 1200px" />
<source src="high-res.webm" media="min-width: 1000px" />
</video>
<img src="high-res.jpg" media="min-width: 640px" />
<h1 media="min-width: 320px">This is the lowest width</h1>
</responsive>
<responsive>
<div media="min-width: 1000px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div media="min-width: 600px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
<h3 media="min-width: 320px">Lorem ipsum dolor sit amet.</h3>
</responsive>
Do you see how much of a difference this makes? It’s expandable, it’s elegant, and it covers any sort of responsive base you’d ever need. This is the type of tag we’re looking for, not just an addition to one determined symptom.
