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…
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.
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?
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?
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.
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.
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.
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.
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…)