4

I have a design where the header and footer are 1170px wide. (Standard Twitter Bootstrap 12 column container size.)

I have been reading about the ideal width for good readability and discovered that the content width should not be more than 600-700px wide. The problem I am facing is this-

Except for the blog which has a sidebar all other pages have content sections which are 600px wide (trying to follow above guideline). So if I align it to the left then there is empty space on the right and if I align it to the center then it doesn't line-up with the header and the footer and it feels like it is floating

Here's what these pages look like. Quickly mocked up since I can't use actual design. it's for a online course website.

How does one approach this layout issue? Should I forcefully create sidebar content so that content + sidebar can line-up with header and footer (like the blog pages) or is it alright to center align the content boxes on these pages (include pages like about us, terms of use, my dashboard, my profile, my payments which currently have a single column of content)

I can't reduce the width because the homepage and blog articles are able to use the entire 1170px by the design. Is there a guideline or good practice for such situations?

11
  • 5
    ...do you have picture? I'm a designer and, for some odd reason, quite visually oriented. Thanks!
    – Vincent
    Aug 8, 2014 at 15:16
  • 1
    You could float the text around a 300 - 400px image. Centered text is a difficult element to balance well, and I personally find it a lot less readable. I think I'd rather have the empty space than centre the text. Another option is using the same sidebar as elsewhere and filling it with contact details and links, or something else that a user would want to have easy access to.
    – Dom
    Aug 8, 2014 at 15:53
  • 2
    You may get better answers if you post examples..
    – user9447
    Aug 8, 2014 at 16:54
  • 1
    The best answer is to redesign the site to the width you'd like to hit rather than cobbling together various page widths just because one page is already using something. The whole "can't use XX width because page Y has XX with" is silly. Change the page widths. That's what web designers do.
    – Scott
    Aug 8, 2014 at 17:26
  • 1
    @thedigitalmonk, not to be rude, but it doesn't appear that you spent allot of time on your mock-up. I was designing a blog page a few days ago, and I spent 4+ hours creating about 10 mockups. I would have taken longer if I didn't already have so many design elements prepared, from the rest of the site. My advice is to create allot of mock-ups for each page, and then chose the best. This may sound like a considerable amount of work, but you must remember that you get out what you put it. Aug 8, 2014 at 22:58

4 Answers 4

5

Im on the fence drinking a soda about posting this as an answer but the answer I am going to provide you, I might make into a reference later on when others ask this similar question..

As you stated you're already in the design phase... If you followed a proper workflow (since you haven't mentioned IF you had a mockup, content evaluation, wireframe event) I am going to say this is a prime example of why PLANNING is key to an effective website. Now, like many, they battle to make their site work and look appealing to the eye but face issues with poorly laid out content and unhappy clients.

That said in the above paragraph, I doubt any answer would be helpful. I say that not trying to be rude but you need to step back a few steps and evaluate your content, structure, and THEN design. Since we don't know your content load, future plan of the site, how it operates and what it is to do I am going to assume, based on your question the following:

(include pages like about us, terms of use, my dashboard, my profile, my payments which currently have a single column of content)

Typically people do use navigation elements, but you may face issues in the tablet and phone realm. Based on the quoted above you mention currency so I would evaluate a sidebar with a cart perhaps. Again, not know what the content is, how it is being designed I cant make an effective suggestion because you may have content redundancy and if I'm at a site and see the same thing 4+ times, unless its crucial to the site, I'm going to assume it was poorly done.

To answer the title of your question: Is centering a content section a good idea? Depends on the design of the site and what the client wants. That's another thing that hasn't been mentioned. You state you're in the design phase with this issue but instead of deciding the design step back and wireframe.. Play with the content, if you have it.. If you own the site, step back and look at how you want the site to function and flow.

2
  • Thanks for the reply Matt. It's actually a site where you can take a boating safety course. Similar to boaterexam.com and boat-ed.com In the Design phase I had actually proposed some features which would appear in a sidebar format but those were not implemented because of budget constraints. So basically now I am confused what to do with the empty space. Should I just add links to pages which appear in the user dropdown anyway? Or is that redundant? Here's a quick mockup of the layout since I can't use actual designs- i.imgur.com/K1bIx4v.png Aug 8, 2014 at 17:46
  • The chapter pages have a sidebar with the other chapters (like an index). And the homepage has a layout that uses the width properly by having thirds, two-third + third and full width elements. Aug 8, 2014 at 17:48
3

thedigitalmonk!

I am a web designer and developer and I think this is something individuals run into quite a bit. It's not always the same answer, so I think some screenshots would be helpful.

However, I tend to add a sidebar. Otherwise the page looks off whether the content is centered or not. It looks out-of-balance especially when there are other page(s) that have the more balanced look with the sidebar.

The "sidebar" could even be some sort of design aspect (some abstract artwork, etc.) if need be. But even just adding some social media links or something of the sort would help.

5
  • Here's a simple mockup of the situation- i.imgur.com/K1bIx4v.png It's a online boating safety course website. Social media links appear in the footer and there is a user dropdown menu that has links to all logged-in pages like payments, profile settings and logout. Should I add that to the sidebar? Will that make it redundant? Aug 8, 2014 at 17:54
  • Have you tried lining up the left side of the content with the right side of the logo? That might help a lot and then you don't need to worry about a sidebar. I don't have access to any software to do a quick mockup for you, but I hope that makes sense. Otherwise, think about an actual live feed for Facebook/Twitter instead of just follow buttons in a sidebar. Aug 8, 2014 at 19:29
  • Yes I have tried that. But then it doesn't lineup with anything in particular on the right side. Seems like that's the only way left. The client isn't very keen on the social media exposure. Aug 9, 2014 at 5:38
  • Can I get you to post a screenshot of it when it's lined up with the right side of the logo? I'm just curious how odd it looks because in my head, I could see it looking perfectly fine. Aug 11, 2014 at 15:14
  • **Side note: if your client isn't up for social media exposure...well they need to catch up with the times. Aug 11, 2014 at 15:14
2

the ideal width for good readability ... should not be more than 600-700px wide

This is roughly true, but only for content sections, generally speaking large blocks of text. Having a readable type, somewhere from 13px to 17px (generally 15-17px) depending on the nature of the site, if very important and the width of the section should be readable with the font size used. Having sidebars next to the main text section is perfectly acceptable - even encouraged at times - for large screens.

It's important to make use of the added screen size large viewports provide, but should only be used as progressive enhancement, meaning you should (in order, not importance) design for mobile, small screens first.

As for using left or right positioned content, there is no real usability downside to using them provided you restrict the width to some max-width so the text isn't strung across a huge screen (as you should with a centered position design). The only time left of right positioning the content could be bad is on very large screens if you have a content section with a small width. In this case, centering it can make it seem to take up slightly more room of the page given the extra white space is distributed among both sides instead of just one.

If you're centering the content it's good practice and design to center the header as well. This usually means you should also have the same max-width as the main content section if there is one. The first example of this that comes to mind is FaceBook's layout for desktops.

With that being said, make use of what's given. That means progressively adding more features for screens that can handle more, provided it's still good design. On sites I'm designing, I often hide the sidebar for mobile or make it flow below the main content section for screens that it cannot fit on (for more on this check out my other answer).

1

This is perhaps a question of taste but there are a few obvious problems with your approach.

I have been reading about the ideal width for good readability and discovered that the content width should not be more than 600-700px wide.

This isn't true, it depends on how your sizing your text and what typeface you're using. The actual typographic process is choosing a measure. There are various rules of thumb on choosing measure but you need to calculate your average character width for your typeface then determine line length from that (which will vary on the web depending how you're sizing text in your CSS). There's a section on this in Robert Bringhurst's The Elements of Typographic Style which is on the web here.

That said, the document you've linked to has a usable measure so you should be fine with that layout.

To address the larger layout issue, I'd say it's a process of choosing the lesser of two evils. You can add a sidebar to create a better aligned layout but from a design perspective you're only adding superfluous content that's going to distract your users by having more text and layout elements in their visual field. So from a usability perspective, ditch the sidebar and center align your content, because your content is the reason people are going to your site (not your layout).

Alternatively, I default to aligning left since negative space is rarely a negative on the web and western users will not notice it much since they're accustomed to reading left-to-right.

You also have to realize that not everyone has the same viewport size as you. There may be a large number of users to which left-aligned or center-aligned content will look fine (if their viewport is smaller, they have less empty space). No matter what size their viewport is, a crowded screen is never a better option.

You may want to look at analytics for the site to determine viewport sizes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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