Friday, January 11, 2013 at 12:22 pm.

Using Responsive Design To Rewrite Your Sentences

The basic idea of “responsive” web design is that you can use most of the same code to tailor a website’s layout and design to different screen sizes — PC, tablet, phone, etc. (If you want to learn a lot more, this book is good.)

Anyway, I noticed yesterday that 37signals was doing something particularly interesting with responsive design on its Signal vs. Noise blog. This design has been around for a few months, so it’s not brand-new. But I only found a couple mentions of this, such as Little Big Details, so I’ll highlight it here.

In addition to the usual stuff — scaling images and headlines, changing some alignment settings, rearranging elements — 37signals is using responsive design to edit a sentence of text. Specifically, its introductory text at the top of its site changes based on how wide your browser/display/device is.

Responsive Sentence 37signals

At its widest setting, 37signals will greet you with, “Happy {Day}. You’re reading Signal vs. Noise, a publication about the web by 37signals since 1999.” But as your screen becomes narrower, parts of the sentence flake away — you lose “You’re reading” and “since 1999″. Then the “Happy {Day}” greeting disappears. Etc. Instead of forcing its welcome note to break into two or more lines, it’s responsively editing its text for brevity.

Very clever.

How did they do this? Without getting too far into the weeds, it’s clear in their HTML code:

<h1 class=”home”><span class=”large“>You&rsquo;re reading</span> <a href=”http://37signals.com/svn/“>Signal vs. Noise</a><span class=”medium“>, a publication about the web</span><span class=”small“> by <a href=”/svn/writers/“>37signals</a></span><span class=”large“> since 1999</span>.</h1>

You can see what’s included in different screen sizes by the names of the different “span” elements: large, medium, and small. (Emphasis mine.)

You probably don’t want to get carried away with this. If someone wants to share your website with a friend, and the friend opens your site on their iPhone, and the text they thought they were sharing is missing, you’re going to have two very confused customers. (There are other obvious limitations and complications.)

But in some cases, this is a brilliant idea. Especially something like this — a sentence that can be easily trimmed, and a greeting that’s nice to see when there’s space, but not important enough to squeeze onto a tiny screen.

Update: See also: Responsive Text by Frankie Roberto (via Zach Seward)