7

I'm developing yet another website (non-blog, static), and yet again I'm stumbling upon the same problem with inner (non-home) pages design. The layout is conventional:

  • 960px wrapper
    • header with horizontal menu
    • main content column + sidebar
    • footer

The site structure is quite simple, and the horizontal menu contains all the navigation items I need. The main content column contains several paragraphs of text. And then there's the sidebar area. I need it to be there for one reason: the main content can't be as wide as the wrapper, because its readability would suffer if it was 960px wide.

But there's no honest content I can think of putting in the sidebar.

There's no sub-navigation. I refuse to clutter my website with widgets like tag clouds, twitter feeds, ads etc: they would serve no purpose. Also, I don't have to promote any other content on my site, as everything is contained within the nearby horizontal menu.

I don't want to make the wrapper narrower: some bits of content within the site utilize the horizontal space fully (header, home page, some sub-pages).

I could put some illustrations in there, but they wouldn't be significantly related to the main text: it wasn't written with graphics in mind.

I could go for n-column layout for the main text, but technical difficulties aside, I don't think it's feasible with unpredictable viewport heights: scrolling down to reach the end of one column, then back up, and then again doesn't cut it.

(It makes me think though: maybe some clever application of <a href="#nextcolumn"> at the bottom of each column would make such a layout usable? But this needs experimenting on a different, and preferably synthetic specimen)

I'm reluctant to leave the sidebar empty, so as not to create a huge empty swath of unused space, even though this seems to be the most reasonable solution.

Any thoughts? I wouldn't expect definite answers, but some ideas maybe?

Improve this question
6
  • Don't put a sidebar in the layout?
    – Rahul
    Commented Jul 24, 2011 at 10:56
  • gaping void ensues. the feeling is that something should be there.
    – msz
    Commented Jul 24, 2011 at 11:26
  • Is that your feeling, or have you checked it with your users?
    – Marielle
    Commented Jul 24, 2011 at 11:36
  • 1
    i've checked it with my client, but it's also my feeling. nb: this is on the intersection of design and UX
    – msz
    Commented Jul 24, 2011 at 11:39
  • Can I ask what the nature of the site is? You say it is non-blog - is it commercial, special interest, academic...?
    – Roger Attrill
    Commented Jul 24, 2011 at 18:47

6 Answers 6

Reset to default
5

Remove the sidebar from the layout. Shrink your wrapper from 960px to something smaller if necessary.

You say:

I'm reluctant to leave the sidebar empty [...] even though this seems to be the most reasonable solution.

You're reluctant to use the most reasonable solution?

It sounds as if this happened because the website has been designed without knowing what content is needed. There are lots of articles around the web about this. Many relate to the use of lipsum text, but the issues are the same as yours:

Stop using Lorem Ipsum!:

Web designers are kidding themselves if they think they can do their best work without thinking about content from the start. It’s not so much that content is king, but more that content is web design. One won’t work without the other. What your site says is forever linked to the way it looks and how it functions.

Lorem Ipsum is Killing Your Designs:

Content could be added that simply doesn’t need to be there.

In Defense of Lorem Ipsum:

The real problem is an overall process that treats design and content as separate tracks without appropriate communication, collaboration, and checkpoints along the way.

In that last reference, I think Karen McGrane has nailed your issue.

Improve this answer
2
  • i'm reluctant to use the most reasonable solution, because it just doesn't look right. my design uses lots of heavy horizontal slabs to mark the grid, and without the sidebar, the whole thing seems unbalanced. right now i've opted for breaking the textual content with full-width images. but your insight about the dark side of lorem ipsum is new to me, and definitely eye-opening. A small lesson in humility. (I'd say lorem ipsum is inevitable in real-life cms deployments, but still the argument is valid)
    – msz
    Commented Jul 25, 2011 at 14:38
  • Yes. I use lipsum all the time, but it's good to be aware of how it can distort the design. And it's good to be reminded of how it's not always a simple matter to choose the most reasonable solution. :\
    – Bennett McElwee
    Commented Jul 26, 2011 at 8:51
5

It's totally okay to leave sidebar empty, white space can give clean look to a website.

Take a look at some good examples of websites with single column:

Improve this answer
3
  • That seems like a good direction (non-systemic as it is). The Sofa and iA sites employ a nice strategy of breaking the textual content with full-width images, and I like it. And i'll probably use this solution. But this won't work that well with automatized, cms-based sites where my clients would edit the content themselves. They (generally) lack the skills/design experience to make the full-width images look good and well positioned. Handcraft is required.
    – msz
    Commented Jul 24, 2011 at 12:03
  • You don't necessarily need to use full width images to make page look good. White space is good, read some articles about it. And I don't really understand why full-width images are hard to clients. Just make a shortcode, that makes image full-width...
    – Dmytro Semenov
    Commented Jul 24, 2011 at 12:18
  • 1
    It's a question of selecting the right image. The way my clients usually operate is that they supply the text, but they rely on me with the graphics. And, sure enough, white space is good (just like several other ideas), but it's not a magic wand. White space can provide meaning, but it can provide nothingness just the same.
    – msz
    Commented Jul 24, 2011 at 12:24
3

If it's commercial:

  • Create a mailing list and use the sidebar for a sign-up form.
  • Include testimonials about the product/service.
  • Use it for a contact form or to generate leads.
  • Include a blurb about the company or founder rather than a dedicated about page.
  • Include links to useful resources related to the website content.

If it's not commercial:

  • Use it for a contact form.
  • Include a blurb about the website rather than a dedicated about page.
  • Include links to useful resources related to the website content.

If it's dynamic:

  • A list of recent posts/pages.
  • A list of popular posts/pages.
  • A list of random posts/pages.
  • A list of upcoming posts/pages.

If there is user-generated content:

  • Top rated comments/content.
  • Most recent comments/content.
  • Top users.
Improve this answer
1
  • 1
    +1 Good contextual useful secondary content considerations. Use Recommended further reading for academic or non-commercial special interest.
    – Roger Attrill
    Commented Jul 25, 2011 at 10:56
1

The site doesn't have to be 960px wide. While the homepage may be, if the content doesn't lead to that much width, then don't have it. Design the site around the content, not the content around the site.

If it was a custom website, I would suggest designing the content to fit the full width, but as you have brought up, that doesn't work that well with CMS sites, that the client may be editing. So instead I would suggest designing a page template, with a smaller width main column instead.

Improve this answer
1

Keep the 960px width, make your content the appropriate width to satisfy your readable line length, then add large margins to the left and right of the content. Essentially, it will look like a printed book.

I've seen this done several times and, as long as you balance your font sizes, can look quite elegant.

For example: http://jsbin.com/acuzuh/9

Improve this answer
1
  • nice. left margin could be the way to go (maybe not here, but, as I said, I'm encountering this problem on a regular basis)
    – msz
    Commented Jul 25, 2011 at 14:41
0

One word: AdSense.

Now you're rich, and your design looks good. Anyway, they say people don't look at ads anyway. It's like double-negative space.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.