Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
3  
...do you have picture? I'm a designer and, for some odd reason, quite visually oriented. Thanks! –  Vincent Aug 8 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. –  Mr E. Upvoter Aug 8 at 15:53
2  
You may get better answers if you post examples.. –  Matt Aug 8 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 at 17:26
    
We need some images; as what you are saying is that "looks like it floats" - and that might well be more a visual issue than a problem with withs. –  Benteh Aug 8 at 17:27

2 Answers 2

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.

share|improve this answer
    
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? –  thedigitalmonk Aug 8 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. –  Alicia Uhacz Aug 8 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. –  thedigitalmonk Aug 9 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. –  Alicia Uhacz Aug 11 at 15:14
    
**Side note: if your client isn't up for social media exposure...well they need to catch up with the times. –  Alicia Uhacz Aug 11 at 15:14

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.

share|improve this answer
    
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 –  thedigitalmonk Aug 8 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. –  thedigitalmonk Aug 8 at 17:48

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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