: Web Design: Is centering a content section a good idea? I have a design where the header and footer are 1170px wide. (Standard Twitter Bootstrap 12 column container size.) I have been reading

@Murphy569

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

Vote Up Vote Down

@Moriarity648

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.

Vote Up Vote Down

@Barnes313

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.

Vote Up Vote Down

@Ravi4787994

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.

Vote Up Vote Down