Optimum Web Page Width

I have, over the last few weeks, been doing several redesigns of long standing websites. One of the key changes was a shift in page width. Before it was necessary to consider old screen sizes. However, with this redesign, we have made 800px and smaller screens redundant. The new designs are optimised for 1024px widths or larger. However, it’s not enough to simply consider the screen resolution of the majority of users. There are other aspects to consider.

To give an example from the real, non-computery, world. A friend of mine runs a small private school. She wanted to redesign the classroom layout so that instead of one large classroom for 20 to 30 students, they would have two classrooms. One that could take 12 to 15 students and another small room for private classes of less than 8 students. I drew up designs for the school but the opted to use another amateur interior designer instead. The designer split the classrooms making one larger and the other smaller but it didn’t work out that way. What the designer had failed to consider was the size of the tables and chairs that would be put in the room. The school’s tables are double width with two chairs at each table. The designer had made the large room 3 1/2 chairs wide (1 3/4 tables) and the small room 3 chairs wide (1 1/2 tables). Since you can’t use half chairs and half tables, the result is that both rooms hold exactly the same number of students. When designing a space, you need to consider what goes into that space.

The same is true of web design. When laying out a web page, you need to consider what content is going into the spaces within the page. this will determine the number of columns you can have, the spacing between columns and whether you have fixed or flexible sizes. So let us look at what content you might be using and some of the sizes of that content.

My web pages would contain photographs and videos. In most cases, the videos would be coming via YouTube and the photos via Flickr. So I checked out what sizes they have available. Each of these sites supplies its content in a range of sizes. For YouTube, the smallest size is 425 px wide. The largest is 960 px and in-between we have 480 px and 640 px. It is instantly clear that the 425 px size is small for current browsers. However, I thought, could it go in a side column? Well based on my current optimisation of 1024 px screens, the answer is no. However, next time around, when screen sizes have jumped up a bit more, it might be that the 425 px size will go in a side column. The 480 px size would work fine for a half page but I didn’t want two columns of equal width. I wanted one wide and one small. The 960 px size would be full page width and so crush out the side column. So that meant I had to go with the 640 px size.

The other type of content I wanted to use was, of course, adverts. Looking at the standard advertising sizes, there are no 640 px sizes. The closest that would fit in the large column would be a 468 px banner. The next size up is a 720 px wide letter-board. Neither of these matches up with any video size from YouTube. So it would appear that I’ll have to put up with some miss-sizing there. However, look at the sizes for adverts running in the side column. Now if my main column is 640 and I’m optimising for 1024 px screens then I have about 364 px left to play with. Now given that some space will be used for padding and margins and scroll bars, I could assume that I’d have 300 px left for my sidebar. So I looked at the standard advertising sizes again and saw that a 300 x 600 px half page ad and 300 x 250 px Medium Rectangle would fit nicely. There are some other combinations of vertical banners and buttons that also add up to 300 px. So that gave me the size for my small column.

Now I have by optimum page widths. A large column of 640 px wide and a small column of 300 px wide. Now for a little compromise. I wanted the home page to be small columns wide while my content pages would be two columns, one big and one small. So I had to adjust the sizes just a little to make the maths work so that 3*small = 1*big+1*small. Also, I wanted a little padding to go around my content. So the large column was adjusted to 642 px and the small column to 312 px. A margin of 18 px was used to separate the two giving a page width of 972 px – which fits nicely on a 1024 resolution screen. Using the same sizes, the home page is 3*312 px columns with 2*18 px margins, giving again the same page width of 972 px.

Finally, I had a look around the web to see what sizes other people had settled on. I found the 972 px size on several prominent sites including Mashable.com. I also saw many sites such as Flickr’s newest layout, YouTube and others, which have gone for the 640 and 300 sizes, though with some variation in the sizes of the margins. So it seems that for the next few years, these are the sizes to go for. Hopefully, the IAB standard advertising sizes will get revised soon to fit in with what are becoming standard web page design sizes and so make my sites more attractive again. But until then I’ll muddle through. Knowing my luck, the 640 px advert will become standard just as I re-optimise my page for another larger screen size.

Image by Istvan under Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic.