Adaptive Content (with a dash of jQuery)

Posted on by Chris

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>

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 , , . Bookmark the permalink.

4 Responses to Adaptive Content (with a dash of jQuery)

  1. 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.

  2. I frequently use the <acronym> and <abbr> elements anyway – this site is set up to automatically wrap any recognised acronyms with the appropriate markup, as you’ll see in your comment (and yes, I know <acronym> is no longer valid in HTML5 – I need to submit a patch to the plugin’s author). It irks me to see non-semantic markup used for this purpose, when there’s a perfectly good semantic alternative. I’d also make the case that adapting content to device size is one of those areas where the boundaries of the presentation layer blur with the boundaries of the behaviour layer.

  3. A bit off topic and out of pure ‘noseyness’, are you using a WordPress plugin to automatically catch known acronymns or is it something you’ve written yourself?

  4. A little of Column A, little of Column B. The original plugin I used has been abandoned. I spoke briefly to the maintainer about it, and I’ll be launching a fork shortly based on my hacking of his original code.

Leave a Reply

Your email address will not be published. Required fields are marked *