Designing a web site and setting the web page width to an optimal width is a conversation worth having. Many of you noticed that I recently changed the width of my blog's design. I pushed the page width out to 1048 pixels. Some of you may disagree with the move – but I wanted to share some stats and reasons on why I pushed the theme width so wide.
1048 pixels was not a random number, though.
There were two key influences in expanding my page width:
- Youtube offers larger embed sizes now. If you click the small gear on the sidebar of the Youtube video page, you're offered options for larger sizes as well as the theme. Since higher definition videos are becoming common place on Youtube, I wanted to incorporate those videos into my blog and display them with as much detail as I could (without consuming the entire page width).
- Typical advertising comes in widths of 125, 250 and 300 pixel widths. 300 pixels seem to be popping up more and more on ad revenue sites and I wanted to incorporate them neatly into my sidebar.
And of course, there's some padding to the left and right of the page, the content, and the sidebar… so the magic number was 1048 pixels for my theme:
Did I check my reader statistics?
Yes, of course! If a majority of my visitors were running lower resolution screens, I would definitely have had second thoughts about expanding my page. After outputting the screen resolutions from my Analytics package (In Google it's Visitors > Browser Capabilities > Screen Resolutions), I built an Excel spreadsheet of the results and parsed out the width from the resolution field.
Google provides resolution as 1600×1200, so you need to take everything from the left of the “x”, multiply it by 1 to make it a numeric result so you can sort descending on it, then do a SUMIF and see how many visits are greater than or less than the design width you are looking at.
Did I abandon the 22% of readers who are running a smaller resolution? Of course not! The nice thing about a layout with your content left and your sidebar right is that you can ensure that your content is still within the width of the majority of browsers. In this case, 99% of my readers are running greater than 640 pixels wide, so I'm good! I don't want them to totally miss the sidebar, but that's secondary to the content.