One thing I dislike about most web page designs is that they have a fixed width chosen for the lowest common denominator computer out there. Some sites are still designed for the old 800×600 screens, and even the "newer" ones target only 1024×768. So if you're on one of the widescreen displays typical of newer computers (like 1440 on my laptop, or even 1600 or more on the bigger displays), you've got a lot of white space showing.
As a user, there's not much I can do about this. I do run a second monitor in portrait mode which helps somewhat. But as a web designer, we can fix this.
First, design you site using a grid and content blocks that will fit together nicely in a flowing layout. The easiest way to do this is what Yahoo! OMG did. Every piece of content on the page is a block that is the size of a standard mediumn rectangle ad unit (300×250). Use float:left or display:inline CSS to get your blocks flowing.
But things don't necessarily look that great. As it stands, your site will have a large margin at the right, typically half the width of your blocks. The best way to fix this is to center your content in the window. You can do it with a single line of javascript that resizes the width of a centered div to be just wide enough to hold the content that will fill the width of the user's window without clipping or wrapping.
I know it doesn't look like much, but this took me many hours to figure out how to do. If you know of another (better?) way, post it in the comments.
As a user, there's not much I can do about this. I do run a second monitor in portrait mode which helps somewhat. But as a web designer, we can fix this.
First, design you site using a grid and content blocks that will fit together nicely in a flowing layout. The easiest way to do this is what Yahoo! OMG did. Every piece of content on the page is a block that is the size of a standard mediumn rectangle ad unit (300×250). Use float:left or display:inline CSS to get your blocks flowing.
But things don't necessarily look that great. As it stands, your site will have a large margin at the right, typically half the width of your blocks. The best way to fix this is to center your content in the window. You can do it with a single line of javascript that resizes the width of a centered div to be just wide enough to hold the content that will fill the width of the user's window without clipping or wrapping.
<center>In this example, blocks are 310px wide (300px of content + 10px of margin) and I also allow 24px for a vertical scroll bar. You can also use the same code onresize(); so that it will rewrap whenever the window width changes.
<div id="x">
<script type="text/javascript">
document.getElementById('x').style.width=Math.floor((window.innerWidth-24)/310)*310+'px';
</script>
</div>
</center>
I know it doesn't look like much, but this took me many hours to figure out how to do. If you know of another (better?) way, post it in the comments.
Leave a comment