Back to Overview

How to make a Responsive Newspaper-like layout


What kind of approaches are available? And what works?.

Today I wanted to say a word or two about designing a newspaper-like layout for text, as happened in Out-of-Words & Words App. This will build upon what I wrote about in my last post on "Responsive Font Sizing" as we will build upon that to make our columns responsive, too. Check out the demo: Multi-Column Demo.

But first lets discuss the various approaches we possibly could use to make this happen. These are the options I evaluated: CSS (using *-multi-column), a mixture of CSS & JS (using CSS regions) & a pure javascript-powered solution. Just in case you want to add something I haven't thought about so far, check out my Question on Quora and contribute.

Pure Javascript

This wasn't the first approach I tried, but it was the least helpful one. The major problem with this setup is the performance you need to recalculate everything as soon as something changes (like screen size, etc.). I wanted to get as close as possible to a classic book layout, so I needed some control over the character count per line, to avoid to having to many on one of them. On the other side I made the font size respond to the available screen space. As soon as the window size changes, the font size changes, so must the line length (so I can keep it at an comfortable & readable line length, with getting to short or too long). And the text had to reflow constantly to fit the resized columns & line length. Pulling this off in Javascript resulted in a rather unpleasant UX, due to the fast amount of thinking the JS needs to perform all the time. And it totally broke at the point where I started to fill some real life HTML from random articles inside my content container. I need this because I can't control what kind of HTML will come my way once it is used in Words. It can be anything from nicely formatted to unbelievably ugly & bloated. I needed a solution that could handle chaos & manage to squeeze this stuff into neat columns reliably, without freezing my users system frequently.

The Mixture

First, let me thank Adobe for bringing CSS Regions on the way. This one time they managed to do the right thing & that is awesome (& kinda surprising too)…

Now, back to work. Regions can help us solve an crucial part of my problem with the JS approach. They can take over the reflowing text part (between the different columns), so that it performs much better. Still, it wasn't what I would call smooth experience. But it was a starting point & perhaps I could have optimised it so far that it would have been acceptable.

What made this solution impossible for now? The current browser support. It's not in standard Webkit yet (you can try it on Webkit Nightly builds if you activate it on inside the preferences). It worked quite promising in my test setup, but I had to ditch it, due to not being a realistic alternative at the moment. Perhaps I will proceed on this, as soon as Regions gets more browser love & a better performance.

The CSS way

This was my first approach & ended up being the one I finally chose. I used the multi-column capabilities that got introduced with CSS3. And they work quite well so far. I will give you a short rundown on how I implemented it.

First you need a container wrapping around your whole content. It needs to be "position: relative" or "absolute". If you want to use the body tag for fullscreen article awesomeness, you don't need to add anything. Just jump to the next sentence.

.multicol {
position: relative;
}

After that you insert your Multi-Column content container. This will get "position: absolute" & the appropriate top, left, right & bottom values (to create a some spacing around your article).

.multicol-helper {
    position: absolute;
    top: 2rem;
    left: 3rem;
    right: 3rem;
    bottom: 3rem;
}

Now we add our Multi-Column CSS to this element, too.

.multicol-helper {
    position: absolute;
    top: 2rem;
    left: 3rem;
    right: 3rem;
    bottom: 3rem;
    -webkit-column-width: 20rem;
    -webkit-column-gap: 5rem;
    -webkit-column-rule: 1px dotted rgba(0,0,0,0.05);
}

This connects the columns to our responsiveness (which we use for our font size, too) & ensures that it sticks to a fixed amount of characters per line as the font size scales. Additionally we define the spacing between the columns & a divider.

That's it. You are ready to go. The most important is to "position: absolute" your Multi-Column container, so it expands horizontally & fills all the screen space you assign it to.

This approach works smoothly in terms of performance & scales well with a responsive approach.

But it has a few downsides too, I am afraid. For me, the biggest one is that I have no real control over the columns. The "column-width" attribute seems more like a friendly recommendation to browsers. I would love to have the possibility to tell them to handle my measurements more strictly. Additionally, most JS hyphenation approaches doesn't work in the Shadow Dom containers that get created by "*-multi-column". So I can only rely on CSS hyphenation (which isn't really good I am afraid). Some kind of support for Orphans or Widows would be very nice to. There actually are CSS attributes you can use. They just don't have much effect. Same applies to the margins & paddings to the right of your article container. They just get ignored.

Some may think these are luxury problems. And perhaps that's true for most of us. But for somebody like me, that tries to beat the book reading experience inside a browser, these issues are actually quite serious. And I would love to see "*-multi-column" & all these small typographic CSS features evolve to give me more power & control over how the content flows.

If you have any suggestions or improvements you think could be of help here, just knock me up on @starburst1977 or @thewordsapp. Would love to hear what you think.