Are you designing your website for widescreen monitors yet?

16 November 2011

technology changes all the time, and the type of technology people like to use is always shifting. The latest fashion is to have screens that are much wider than they are tall - it makes for better video watching, and allows you to see more information on a screen in one go. Yet strangely, most websites are still the width of early 2000s monitors - around 800 pixels.

This means there is loads of wasted space on either side, and visitors have to scroll down two or three times to see all of the content that you could easily have fit on one screen if you had designed your website for wide screens. Let’s review a few basic concepts of web design, to see how we can take advantage of wide screen monitors.

Above The Fold

This is simply the term for the content that people can see when they visit your website, without having to scroll down. One of the most irritating things to find on a website is when the top screen is entirely taken up by a fancy header and advertisements, and all of the content you want is two or three mouse scrolls down.

With the advent of wide screen monitors, you can now take advantage of this landscape-style layout to present more content to your visitors at first glance. This means you can direct their attention to the things you want, and you can still have your header and advertisements in the same frame.

Variable Width vs Fixed With

This is getting a little bit technical here, so if you are building your website using WordPress and a free template, and you don’t know much about CSS, you might find this a bit challenging. That’s no problem, because there’s never a better time to learn than right now!

Your website, if it’s built on a template, is laid out using CSS (Cascading Style Sheets). Most of your website’s CSS will be stored in a file, usually called something like “Stylesheet.css”, which is in the root folder of your website (the folder where your homepage is stored). You’ll need to access this file, and find the bits of it that define the layout of the various elements on your page.

This might seem daunting at first, especially if you are not familiar with CSS, but it’s actually very easy to find the bits of code you need to edit. Simply look for a line that goes something like:

#content article{float:right;padding:10px 35px;width:788px;}

Now, every site’s CSS will be different, but what is happening here is that the developer has defined something called “content”, and said that everything in “content” that you call an “article” will have the following properties: it is aligned to the right of the page, is offset by 10 pixels on top and 35 on the right, and has a set width. Here you can see that width is set to 788 pixels.

This is the part of the page (and I can tell you this because I designed the page) that is where the content goes, so it doesn’t include the sidebar (which is defined in the next line).
Now, you have two choices here - you can either simply set it wider (and set the sidebar to be wider, or move it around), or you can tell it to fill up a certain percentage of the page. If you increase the pixel value, it will do just that. Or you can set it to take up 90% of the available space in its container. If it is the highest level container on the page, it will fill all available space in the browser window.

It will take a lot of time and playing around with the properties of various elements until you figure out which numbers do what, but once you get the hang of it you’ll find that you can edit the size and shape of any element on your page, simply by trial and error. The only way to learn to do this is by playing around.

Remember to always save code somewhere else before you edit it, so that you can go back to it if you mess it up. Simply by changing one number, saving, seeing what it does, and then repeating this process, you can quickly change your website to suit wide screen monitors.