Specific Positioning of the Navigation Position based on: Viewport Ratio Viewport Width
height: his width: his ratio: his

Specific Positioning of the Navigation Position based on the viewport

Why have a horizontal navigation and a fixed content width of say 500px or 100% when your using a widescreen monitor, wouldn't it make more sense to move the navigation to the sides?

For example
heres a normal site viewed on a 4:3 ratio monitor, or the browser has been sized to 4:3
4-3
the layout has been designed for this kind of ratio and the proportions are fine.

Here's how the layout looks when the user changes the ratio
16-9_streched
as you can see it is now out of proportion

ideally a better layout could look like this
16-9_repositioned


Here i propose two options, or rules to define where your navigation goes.
  1. Viewport Width If the viewport is larger than 800px then place the navigation to the right.
  2. Viewport Ratio If the viewport ratio is greater than 1.0 more the navigation to the right.
  3. Otherwise have a horizontal navigation.
So any ideas where this could be useful? how about
  1. in-page editing, the new drupal CMS is proposing a panel with editing controls as a header, why not have them as a column is the user has a widescreen monitor
  2. does not have to be restricted to navigation, how about removal of advertising or inclusion of specific advertising
  3. using an iphone? how about moving content to a better position if your viewing it in landscape mode

uses jquery.js and jquery.dimensions.js and someother stuff you can view in the source of any demo page
By John Cooper : atomicshed.com

*This page uses the fixed width viewport logic, if the viewport is greater than 800px then place the navigation to the right