I often harp on about how responsive web design is MORE than just adaptive CSS layouts. I believe that we should be building websites that contextually respond to the device/screen size in question.
How does this apply to microcopy?
Now, this is not a new concept, however it is necessary to articulate it in order to understand what i’m on about when i talk about responsive microcopy (microcopy being the small bits of fluff copy on the site that help guide the user and introduce areas). While building the latest iteration of my personal site, I wanted to write some friendly, conversational microcopy that would help guide the user around the site. However the design is completely responsive, and i found that the microcopy became waaay too long winded on small screens (read: mobile). SO I came up with a simple set of responsive CSS classes that would hide and show content based on my responsive stylesheets. So in my base CSS I have:
.show600, .show768, .show992, .show1382 {
display: none;
}
And then, in each respective responsive stylesheet i have a declaration that will make these elements display again.
600.css: .show600 { display: inherit; }
So, when the user’s browser is over 600pixels high, my responsive CSS kicks in and this element is displayed. To use it i have HTML like this:
<h4>This is some microcopy. It's really interesting<span class="show768">, however the user on a mobile might <span class="show992">find most </span>of it annoying</span>.</h4>
So now the copy will render on browsers smaller than 768 like this:
This is some microcopy. It’s really interesting.
But once the browser spans more than 768 we get the full block of copy like this:
This is some microcopy. It’s really interesting, however the user on a mobile might find it annoying.
And once the browser is over 992 pixels we get a little more:
This is some microcopy. It’s really interesting, however the user on a mobile might find most of it annoying.
Obviously this example is somewhat trivial. However with some thought and experimentation it is possible to “design” your microcopy so it responds effectively to the user’s browser size.
The same concept can also easily be applied to headings, you might want to load the h2 on a page with keywords but it might be affecting readability on smaller screens, so you would simply hide some of the copy for users at that screen size to help focus the content and make it more usable for them.