While working on the redesign of Techie buzz, I had several things in mind that I wanted to include in the design. One of the things was to make the design widescreen friendly by making use of a larger content area.

Throughout the design process, I asked several team members to test the design on different browsers. However, all the testers had one thing in common, they were all using widescreen monitors.

Once I rolled out the new design, one of my friends and fellow bloggers Deepak Jain sent me a message saying that the design was broken on his PC. On further investigation, I found that he was using a monitor with a max resolution of 1024×768 pixels. The new design did not particularly work well on those resolutions.

Now I personally did not want to change the width to just fit properly in 1024×768 resolutions. To overcome that I came up with a much better solution.

1. I separated all the hardcoded width for the layers, and copied it to a separate file.
2. I then created a copy of the new file, and modified it to work in 1024×728 pixel screen resolution.
3. I then wrote a conditional Javascript to include the CSS based on the screen resolution of the user.

Doing this made the them work properly on both 1024×76 pixel and higher screen resolutions.

Here is the code that can be used to include CSS based on different resolutions.

<script type="text/JavaScript">
    var screenwidth = screen.width;
    if (screenwidth <= 1024) {
      document.write('<link rel="stylesheet" href="http://cache.techie-buzz.com/ntc/regular.css" type="text/css" media="screen" />');
    }
    else {
      document.write('<link rel="stylesheet" href="http://cache.techie-buzz.com/ntc/widescreen.css" type="text/css" media="screen" />');
    }
</script>

Have fun with your next design. If you want more such useful and interesting tips, don’t forget to visit the Webmaster Tips section.