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