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.
- I separated all the hardcoded width for the layers, and copied it to a separate file.
- I then created a copy of the new file, and modified it to work in 1024×728 pixel screen resolution.
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.
Have fun with your next design. If you want more such useful and interesting tips, don't forget to visit the Webmaster Tips section.