I’ve always been a fan of flexible layout and trying to avoid introducing horizontal scrollbars whenever possible. Large content however poses an eternal conundrum: How to accommodate large content in tight spaces?
Some web designers like to lock a page design to a fixed width (or set a minimum width) forcing a horizontal scrollbar at lower resolutions for the entire site. This approach however does not accommodate some of the larger content types and I feel its a missed opportunity to maximise accessibility. A flexible layout allows your design to be adaptable and optimised for the device/resolution currently being used to view it.
I’ve been playing with some ideas that can be used in conjunction with any layout to accommodate wide content as easily as possible at lower resolutions.
With this example, trying resizing your browser window, make it fairly narrow.
- Large content such as tables should expose a horizontal scrollbar just below the table at low resolutions.
- Images will be scaled down to fit the width available automatically. Scaled images also gain the ability to zoom to full size on click (which also introduces a horizontal scrollbar for the image).
The code is not production ready yet (IE6 in particular needs work) but it should give you an idea of where it’s heading.
Let me know what you think!