Clotheslines in the Responsive Web

I’ve dedicate a page to a narrow study of Clothesline layouts in Responsive web design. Clotheslines are column-based layouts which hang from the same horizontal position on a page.  In static layouts the columns do not change width or number and can sometimes be uncomfortably unbalanced which is why they are not commonly used within the content area of static sites.

Responsive clothesline layout displaying three columns at 800 pixel width.

Responsive clothesline layout displaying three columns at 800px.

In Responsive design Clotheslines are a very promising to solution to presenting content in layouts which need to adjust from 320px width dingle column layouts to multiple columns at higher resolutions.

CSS3 introduced columns. Combined with adoption of max-width, min-width and inline-block the clothesline method for Responsive design will become a necessary skill for layout coders to master.

Currently (at the time of this post) support for Clothesline methods using only HTML and CSS is not good enough to adopt the technique if you want to accommodate older browsers.  JavaScript can be and is used to replicate the effect of reflowing and stacking content into a variety of numbers and widths of columns as they adapt to the width of a screen or browser window but is limited to devices which support JavaScript.

Check out the Responsive Clothesline article and code examples.

Leave a Reply

Your email address will not be published. Required fields are marked *