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 uses. 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 wither your have fixed or flexible sizes. So lets look at what content you might be using and some of the sizes of that content.
My webpages 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 it’s content in a range of sizes. For Youtube, the smallest size is 425px wide. The largest is 960px and inbetween we have 480px and 640px. It is instantly clear that the 425 size is small for current browsers. However, I thought, could it go in a side column? Well based on my current optimisation of 1024px screens, the answer is no. However, next time around, when screen sizes have jumped up a bit more, it might be that the 425px size will go in a side column. The 480px 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 960px size would be full page width and so crush out the side column. So that meant I had to go with the 640px size.
The other type of content I wanted to use was, of course, adverts. Looking at the standard advertising sizes, there is no 640px sizes. The closest that would fit in the large column would be a 468px banner. The next size up is a 720px wide letterboard. Neither of these match up with any video size from Youtube. So it would apear that I’ll have to put up with some miss-sizing there. However, look at the sizes for adverts running in the side colum. Now if my main column is 640 and I’m optimising for 1024px screens then I have about 364px 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 300px left for my side bar. So I looked at the stadard avertising sizes again and saw that a 300 x 600px half page ad and 300 x 250px Medium Rectangle would fit nicely. There are some other combinations of vertical banners and buttons that also add up to 300px. So that gave me the size for my small column.
Now I have by optimum page withs. A large column of 640px 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 642px and the small column to 312px. A margin of 18px was used to separate the two giving a page width of 972px – which fits nicely on a 1024 resolution screen. Using the same sizes, the home page is 3*312px columns with 2*18px margins, giving again the same page width of 972px.
Finally, I had a look around the web to see what sizes other people had settled on. I found the 972px 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 640px advert will become standard just as I re-optimise my page for another larger screen size.
XHDRENAPMH83
