Designing UI that fits Wide Screen Monitors

Wide Screen Monitors are gaining more and more penetration and popularity. Websites, once sticked to the golden mean ratio (4:3) are now tweaking their UI, such that the site looks best in wide screen ratios as well. Designing a UI for wide screen monitor requires careful analysis. The simple rule of thumb is position your entire UI to the center . If possible fill the background with a texture or a very light color. Some designers perfer to leave it as it is.

Liquid Layout
(a.k.a Flexi-layout a.k.a Elastic Layout)

Liquid Layout may fit good for resolutions less than 1200px width. But beyond that, it will create accessibility problems. If you position a “Save” button to the right, then in the wide screen liquid layout, the “Save” button will appear to the extreme right creating accessibility problem. The better solution is… move all your frequently accessed UI elements to the middle-left or center. Placing the buttons should be carefully decided based upon the interaction with the UI.

Liquid Layout in a Wide Screen display

widescreen user interface layout

Compact-Widescreen Layout in a widescreen display

This is one solution for wide-screen layout problems. The image is self-explanatory. The idea is to fix the interacting user interface with a fixed width or proportionate width to the center or off-center (depending on your layout).  Place the buttons to the middle.

compact widescreen user interface layout

As told, there are no rules. Deciding the best layout depends on the UI and the interaction required. Try two or three layouts and find out the best result. :-)

More on this topic later..

- Rajesh Sundaram

Leave a Reply

You must be logged in to post a comment.