I create a lot of mobile-first, responsive designs. It’s the way SuperFriendly builds websites, as many suggest (unless, of course, there’s a good reason not to do so).
Perhaps because responsive design is still relatively new or perhaps because of my history and affinity towards fixed-width pixel-perfect designs, but it pains me to see sites that employ great responsive design techniques while sacrificing useful principles like appropriate line-lengths or designing to avoid widows and orphans as much as possible. Responsive design doesn’t and shouldn’t conflict with traditional graphic design principles; it can certainly support the tenets of good design when implemented thoughtfully and thoroughly.
I often come across the problem of widows and orphans when using fully fluid grids, so here are 2 techniques I use to avoid them as much as possible.
<br />You heard me: break tags. I’ll typically add a <br /> with a class of rwd-break, set it to display: block; in my base styles and and use media queries to hide it (using display: none;) when the screen gets wide enough, bringing it back to a one-line statement. Here’s a demo.
<span>Same idea, except letting the breaks happen with CSS only. Wrap each line in a <span> with a class of rwd-line and set that class to display: block;, then swap to display: inline; for the wider layouts. I don’t really see why you’d use the first technique over this one, but figured I’d mention it anyway. Here’s a demo.
While standards purists would no doubt challenge the semantics of these approaches, I’ve grown quite fond of these.
A small trick to help us build more beautiful responsive sites.
Article Info