Adaptive Content (with a dash of jQuery)
Aral Balkan posted the following snippet on Twitter just now:
<span>u</span><span class="hideIf320">ser e</span><span class="capIf320">x</span><span class="hideIf320">perience</span> HTML |
followed by the explanation:
… adaptive copy 🙂 (Actual names shortened for the tweet.) Writes “user experience” in widescreen, UX on smaller screen 🙂
It’s an interesting idea, but I think it clutters up the markup with too many non-semantic elements. I’d be far more inclined to mark up the abbreviation like so, using the purely semantic <abbr> element:
<abbr title="User Experience">UX</abbr> |
The above is 100% semantic, degrades nicely in the absence of CSS or Javascript, and follows the principle of Mobile First, as the short form is displayed by default. It can then be enhanced for larger screens with a dash of Javascript (jQuery used here for ease, because if you’re already loading it – and I frequently am – it makes sense):
$('abbr').replaceWith(function() { return $(this).attr('title'); }); |
We’ll assume for the purpose of the exercise that this is one of a number of DOM manipulations you’re attaching to a given breakpoint, such as the browser window being wider than 320px.
Pros:
- Not reliant on the presence of either CSS or Javascript
- Semantic, maintainable markup
Feel free to chip in with any cons you might have.
This entry was posted in Code and tagged code, responsive design, UX. Bookmark the permalink.
I kind of like this, but at the same time I kind of don’t.
It’s neat having content adapt to display size, and I think that’s definitely something we’ll all be doing by some means in the not too distant future.
However, I’m concerned about coupling content too closely to JavaScript. The closest I’d get is probably something like what Aral did, but by hiding and showing entire versions of paragraphs rather than getting all fiddly gritty with spans. That way it all stays quite manageable and contained to markup controlled with CSS. Obvious con: more markup to download if there are something like 3 version of each paragraph on the page.