From 3-Column Design to Responsive Design

So I am excited to learn more about Responsive Web Design. And from my limited research, it appears that when RWD is done correctly, it can be a win-win for most users. However, one area where I am still skeptical of RWD is with a 3-column design like I have spent the last year or two building.

I would be interested to hear from someone like @PaulOB on whether a 3-column design can be successfully converted to RWD.

Over the last year or two, I spent hours pouring over old threads on SitePoint and reading Paul O’Brien’s tutorials on 2-column and 3-column layouts. I really like Paul’s designs and I don’t want to lose them because they provide a visual metaphor that most people have come to accept.

I do not think a 3-column layout is “fluff”, yet as far as I can see, mobile devices kill that paradigm forever… :frowning:

Please enlighten me!

I don’t have time just now, but will try and create a simple example sometime soon.

I’m no Paul, but what do you mean “converted”? Do you mean stacked for smaller screens? Because that’s the default that everyone does for RWD.

As Ryan said you can always stack the columns vertically for mobile so there is no real problem there.

The problem is usually the order that you want the columns to stack and that is the tricky part as floats and display:table-cell are hard to re-order (although there are some tricks you can use). Flexbox addresses this issue and allows you to re-order elements easily although flexbox comes at some complexity and is only available for modern browsers.

In the end its a matter of looking at your content and deciding how to present it on smaller screens and then seeing what’s possible with the structures you are using.

There will soon be CSS grid layouts that make reordering content on the page a cinch—much more powerfully than with flexbox. But as said, dealing with a 3-column site on small screens is bread and butter for RWD. That’s essentially what it’s for.

@mikey_w

Have you tried reducing the font size, Ctrl- to see how your 3-column design looks on enormous monitors? Wouldn’t it be sensible to responsively add further columns to take advantage of the screen’s real estate?

1 Like

First off, what is your thought about a 3-column layout?

It appears that used to be your bread-and-butter. Is that still true, or have you thrown it all away for RWD?

Newspapers still rely on 2-column and 3-column designs in print and online. And I think they are a great way to organize a lot of information.

Some people like reading the main articles in the center column. But others often prefer skimming the side columns for less significant, yet more original articles. With a 3-column design you please both groups.

If I created a RWD where the middle column went to the top, and the left and right column went below it, would that work?

It sure would mean a hell of a lot of scrolling for readers who want to see the ads in the right column, or the special interest stories in the left column…

And to your last points, @PaulOB, could I have a proper 3-column layout like I got off your website and still make it responsive as described above?

Create 5-column or 7-column layouts for really big monitors? No!

Humans are used to the 3-column metaphor in page layout. It works.

3-columns won’t work on a smart phone. I don’t thing 2-column could even work. Well, maybe.

I’m trying to avoid making users scroll 10,000 screens to see what used to fit on one computer monitor screen.

1 Like

I mean I don’t know what you do with a normal 3-column layout as you go to smaller breakpoints.

I think just making everything one column is lame and NOT responsive.

It doesn’t work. It’s had its day. It’s a messy idea, meaning that there’s junk all over the page, basically. Designers are getting much better at one-column sites, and I prefer them personally. The mobile revolution has helped site designers rethink content presentation, and mostly for the better, imho.

1 Like

Another option to avoid excessive scrolling is to have show/hide expandable rollouts. They could for example display only the headline and a + to indicate it is expandable. You may want to use this only for minor content, like the sidebar, or for sections of the main content.
In reality, people using mobile devices will be used to scrolling, but you can make things easier for them. Have a page index with links to sections, display a “To Top” button.

1 Like

Off topic
I was most surprised to find that scrolling on mobiles and tablets is far easier and quicker than scrolling on a desktop :slight_smile:

Yes, you have that fake inertia thing, so you can give it a flick and watch it go. Its not as if you have to drag your finger over and over.

1 Like

So you’re the expert on RWD now :slight_smile: ? That’s EXACTLY what responsive is. Whether you like it or not :wink: . Super simple, as others have said previously.

You COULD have the order you want; just depends on what support you want for browsers.

Not on the small screen, there one column is just sensible, two or more would be lame. Desktops and larger tablets still get however many columns you choose. That’s what RWD is, a design that responds to display in the best way for any given screen size.

1 Like

I have no special thoughts about 3 column layout. I code whatever I am given and sometimes that may be one column and sometimes that may be multiple columns. All can be made responsive.

Three columns are fine for some content but may be too squashed if the site contains a lot of images or content that needs room to breathe. In the end it’s the content that should dictate the design and you use the best design to display your content bearing in mind that you have no idea what device someone will be using so at times compromises need to be made.

1 Like

It assumes people consume information in a linear fashion. (That is sooo antiquated!)

Ever hear of “multi-threading” in programming?

How about “stereo”?

IMAX, anyone?

:wink:

You mean expand/collapse type things?

Can this be done with CSS?

Is it an acceptable mobile/RWD approach?

Can you have a fixed header and footer where navigation would always be present in RWD?

Just like back in the old days when I could zip my radio dial and go from 92 to 107 on the FM dial in a split second! :smile:

Where did I say that?

Who says you can’t have two columns?

I know that, but my fear is that taking 3-columns and distilling them down into 1-column would create an enormous amount of effort on users’ part and they might be pissed when they get all the way down towards the bottom and are like, “I just gave my thumb a cramp for this?!” (At least on a desktop you can see what is the side columns and make an instant decision if it is worth your time…)