Take the 2-minute tour ×

When you have a huge canvas (think: responsive design) but the content you need to display is very narrow, how do you prevent it from looking awkward? Center it, left-align, find more stuff to fill the page with, etc...?

This can be a problem when trying to take advantage of your full viewport while using a common layout on each page. What if your viewport is 2000+ pixels wide and all you need to show are a few widgets or some form to fill out.

It helps to have width for displaying things like data grids, because more width means more columns you can show without scrolling. However, there are other types of UI components that don't do so well with it, like forms or copy. If you've already committed to a responsive design, how do you get these items into the page and have it look natural?

enter image description here

enter image description here

share|improve this question
Is this perhaps better suited to the graphic design stack exchange? –  icc97 Jan 29 '13 at 6:20
Does this (possible duplicate) question give you some guidance? ux.stackexchange.com/questions/30756/… –  JonW Jan 29 '13 at 8:48
The question is not referring to a web page, or is it? Just asking for clarification because responsive web design (as mentioned in one of the answers below) might not be an option here.. –  tillinberlin Jan 29 '13 at 10:15
FWIW, I think the UX stack exchange is a good place for this. Mike, could you describe this page's content in more detail--or upload a more detailed screenshot? –  Sam Pierce Lolla Jan 30 '13 at 0:24
These comments are ridiculous (Sam Pierce's is fine - and i +1 it.). Ok @ Mike M : How do you acquire these "widgets" (i use that term because they are an amalgamation of data and design - quote me on that one ) ? Do you have other options for parsing data or are these "portlets you put on a portal template?" the prior or the later - dont matter I have suggestions but it's important to understand what you are working with –  Brandt Solovij Jan 30 '13 at 1:06
show 1 more comment

4 Answers

The main problem I see is that you have a full-width browser, but content that wasn't designed to be displayed as such.

Lookchin's idea to make your site responsive may help when viewed at full width. The content your displaying now looks very tight. There's no reason why you can't give each content item some breathing room.

Zendesk's new responsive dashboard design is a good example. I was even reminded of it when looking at your image.

Zendesk responsive layout

Notice Zendesk takes full advantage of the added space. Unless you have more content available, I can't imagine the layout not appearing awkward. It also seems like a waste of opportunity to show more detailed graphs, charts, etc.

share|improve this answer
add comment

You might make the page look less empty by putting a subtle background graphic in there. It should be such, that is points towards the actual contents in a subtle way. Ask your graphics designer to come up with something nice

share|improve this answer
add comment

I would add supporting hints/imagery/iconography/branding to make the page more fun and questions more clear to answer.

share|improve this answer
add comment


You can do responsive web design and put content in the middle. Many website were designed this ways. You can check Twitter Boostrap.

I meant that in my view, the space is not the problem. I think you can center all content, and it will be nice. Moreover, you can control white space, by responsive web design to adjust content depending on a size of users' screen.

I am sorry that I post incorrect information. YouTube and Twitter are not responsive. However, both websites have much white space on sides, so I think that white space is acceptable.

Youtube Twitter

I suggest you to check Twitter Bootstrap. It has a content and forms,so It can help you to get ideas for your work to implement a responsive design. Twitter Bootstrap has only 12 columns which are adjustable depending on a window size. It supports only 2 resolutions, 742px and 1170px. Twitter Boostrap site in a 1170px window has whitespace both sides, but in a 742px window does not have much whitespace on both sides. If a screen is wider than 1170px, Twitter Bootstrap will fix its widen at 1170px. If a screen is wider than 742px but less than 1170px, it will fix its widen at 742px. I implemented many website by Twitter Bootstrap. I put content in the middle and ignore white space on both sides. You have to select minimum and maximum width that you can support and design your canvas for both resolution.

Is Twitter Bootstrap site awkward? Twitter Bootstrap site is similar to your canvas. It has a menu on the left and content on the right. I hope that my answer can give you some ideas.
1170px 1170px

742px 742px

share|improve this answer
That's not really what responsive design is. Just sticking the content in the middle doesn't really address the issue of to much white space. Also, twitter and YouTube don't use responsive design - they have specific mobile templates. –  JonW Jan 29 '13 at 22:40
JonW is correct. Also, I believe I understand what you're trying to get at, but saying "do responsive web design" doesn't answer the question. –  Chris N. Jan 29 '13 at 23:49
Lookchin might have finesse of language deficit. JonW - Youtube and Twitter... do you actually understand WHY they are apps instead of simply websites? Chris N - good comment :) –  Brandt Solovij Jan 30 '13 at 1:04
I am sorry that my answer is too short, so it may unclear. I would like to make it simple. From the question above, "Center it, left-align, find more stuff to fill the page with, etc...?" I am ok with space, so I selected "Center it" and I think that responsive website can make the content look nice as Chris N.'s answer. YouTube and Twitter site not responsive. –  Lookchin Jan 30 '13 at 4:21
I think that white space does not make website awaked. YouTube and Twitter are good examples that they display much white space on both sides of content in a wide screen. –  Lookchin Jan 30 '13 at 4:36
show 2 more comments

Your Answer


