by Alex Holt | Jan 3, 2012 | Web |
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... 