Small form, big page

Question

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?

Answer 1

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.

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.

Answer 2

Centering the content will still be awkward, as it will be very far away from your left column nav.

Finding more content for the page is also not a good solution, as content should never be there for the purpose of filling space.

Perhaps you can fix the liquid layout so it stops scaling at 980px? This will shrink the unused area in your design. You can then center the page content (both left and right column).

Another thing to consider, if there are other pages with paragraph text, when they get stretched so far out, this will have a significant impact on readability as the eye will have to travel very far back to the next line and can lose its place in the paragraph.

Answer 3

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

Answer 4

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

Answer 5

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.

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

742px