Site with full width navigation bar and header but pages that vary in width

Question

This has been kinda asked before but my need is slightly different and would like to ask for opinion.

In short, my site has a couple of pages that need to have full page layout, namely, a map and a data table.

However, a few other pages have to do with options and configurations, where full page layout just doesn’t make sense (no point in making a text box 800+px wide).

All pages have the same navigation bar and header to allow navigation between pages.

The question here is:

1. should I make the other pages fixed-width and centered (or left aligned) under a full width navigation bar?
2. should I make the navigation bar change to fixed width when in these pages?
3. should I make content in other pages to somehow fit full page layout?

I personally dislike and regard as wrong option (2) but can't decide between (1) which will look better but have some usability issues, or (3) which will look force with less usability issues.

Answer 1

I would pin the navigation to the left side of the page and let the pages grow to whatever width they're intended to. Keeping the navigation in a stable place and size seems the best way to provide reliable navigation.

The real problem is that you have a page design that does not work for the full range of content. If you need a quick fix, I think fixing the nav to the left is best, but the truly best way to proceed, if you can, is to redesign the page templates so they can handle the variable width content.

Answer 2

I would agree with your instinct that the header/navigation piece needs to be the same on all pages. (see #7 of Jakob Nielson's article Top 10 Information Architecture Mistakes)

I also agree with making the navigation and header span the entire page if you are stuck with variable content width. It is hard to guess how #3 would work without seeing your content, so of your options, I would choose #1 with the content centered.

Depending on how the map and data table are used by your end users, does it make sense to have a smaller version of them display within the layout and then have them open into a modal popover? If so, you could design the whole thing around one content size, and allow the popover to use up all available screen space.