This site is best viewed at a resolution of 800 x 600. Ugh. If I ever see anything like that on a site, I’m gone in a flash. Yet today, many web sites seem to be built for a resolution of 800 x 600. Sometimes even smaller!

I have a 30″ monitor that I run at 2560 x 1600 resolution. I don’t say this to brag (OK, maybe just a little bit), but instead to bring up what I consider to be a big problem with many web sites. It’s really annoying to have a site that looks like the image on the right.

Cars and Code using the default Elegant Grunge Theme on my big monitor

That’s a LOT of white space. Now this isn’t all that big of a deal unless the content requires you to scroll. If all the content that you want to read fits in one screen then a centered narrow screen isn’t really all that bad. But having to scroll through a LONG story/article and watching all that wasted white space go by is something that annoys me. This morning I read this article from East Bay Express on Yelp and the Business of Extortion 2.0. It was an interesting read [although I’m not sure you can trust everything you read on the internet… 😉 ], but the whole time I’m reading through the six pages(!) at 11 words or so a line, I’m thinking “Man, this would be so much easier to read if there was more content on the screen.” It got even worse when I started looking at the comments (all 223 of them) and my scroll bar turned into a tiny little sliver on the right edge of my browser. I do understand that less content on more pages gives a site more hits, but even if you click the link for Full Text it just dumps all six pages into that one narrow column. My conclusion: I’m probably not going to trust Yelp! as much as I have in the past and East Bay Express needs to use a wider format for it’s articles.

That’s not to say that you can’t go too far the other way. If you are reading on the internet (as opposed to just scanning) then it can get a bit hard to make the jump across a screen that’s 2560 pixels wide. When I read PDF documents on my computer I usually use the 2 page non-scrolling view, as just about half the screen on a 2560 pixel width monitor is the right width for me. To me the ideal web site, particularly with content that you will READ as opposed to SCAN, is one where the reader has the choice of how it will appear. Tyler’s blog is like that. He’s got a lot of code examples that look better on a wider screen. Anton’s blog is pretty good too. The whole screen is used even if the side bar on the right hand side is a bit wide. (Sorry Anton!)

I’m not sure why I ended up choosing WordPress to host Cars and Code. I actually have a few other sites on the web and I could have installed WordPress there instead of using the hosted server, but it just seemed so easy to use WordPress on their servers instead of mine. It took minutes to turn carsandcode.wordpress.com into carsandcode.com. They have a number of predefined themes and many of them are quite good. Unfortunately for me, I happened upon Michael Tyson’s excellent Elegant Grunge theme. For some reason I immediately liked it (as do over 111,200 other people using WordPress!). It really seemed to fit in with Cars and Code. Elegant Code. Grungy Cars. Check! Now I say unfortunately because Elegant Grunge is one of those ‘all your content gets mushed up into the middle of the page’ type of themes. I looked around at some other themes but just kept on coming back to Elegant Grunge.

Well it turns out that for a small fee you can upgrade your WordPress account to enable you to customize the CSS for your blog. I’m not a CSS expert by any means, but with just a few modifications of the CSS and a bit of playing in Photoshop I was able to increase the width of Cars and Code.

Here’s how:

There are three main images that make up the background of the theme: header.png, body.png and footer.png. If you have a side bar (like these blog posts) then you use the default images. If you have no side bar (like my About and Rich Soule Racing pages) then you use header-no-sidebar.png, body-no-sidebar.png and footer-no-sidebar.png. I’m not using the two sidebar style, nor the rtl style (right to left), but there are images for those too. Since I’m not using those, I didn’t modify them. That means that of the four choices for elegant grunge in Appearance -> Theme Options: Content-Sidebar, Sidebar-Content, Content-Sidebar-Sidebar, and Full Width (No Sidebar), these modifications only modify Content-Sidebar and Full Width (No Sidebar). If you want to use the other options then you’ll have to update the images yourself. With the default images and the two theme options I’m using, you get this:

Cars and code at 1024 x 768

This works if you have a really small monitor. You can actually fit the content section (minus the side bar) of the default Elegant Grunge theme on a 800 x 600 monitor. That’s cool… except SVGA (800 x 600 resolution) was introduced in 1989. That’s right, 1989. That’s before some of you were born… While 1024 x 768 was actually introduced in 1987, it became a standard with more adoption starting in 1990. Now were only talking about a resolution that is only two decades old. That said, an iPad2 has a screen resolution of 1024 x 768, so that became my compromise resolution. If the site was readable on 1024 x 768, I would consider it a success. But I’d like the content to use up as much as that 1024 width as possible while still looking largely like Michael’s theme. I used the Full Width (No Sidebar) theme option (which is used on the Rich Soule Racing Page, see the image at the left) as my test and at a content width of 955 pixels everything fit on the screen without much space to spare. When using the Content-Sidebar theme, I played around with sizes until the images for the date of the post didn’t overlap the vertical line separating the content body from the sidebar. By the way, Firesizer, a plug-in for Firefox was really helpful for looking at my site in different resolutions. (You are using Firefox and Firebug for development, right?)

A quick session with Photoshop (I tried Gimp first, but layers are so much easier in Photoshop than Gimp) stretched Michael’s images from their default resolution of 813 pixels wide for the body (there’s a bit of white space on each side of the image) to 1200 pixels wide. That’s an extra 387 pixels for content or a 47.6% increase in content width. That seemed about right. It’s not as good as letting the user choose how much content is on the screen, but it’s still a big increase over the default. I uploaded the images to my Media on WordPress.com, and then used the custom design upgrade to add my own CSS to Michael’s Elegant Grunge CSS. Custom CSS is loaded after the default CSS, so you can add just the CSS you need to modify to get the look you want. A quick search through the provided CSS showed me the locations where the header, body and footer images were being used and where the widths for content were being set. After a few minutes I had the below CSS in my Custom Design CSS window. I left the default of “Add my CSS to Elegant Grunge’s CSS stylesheet” checked and used 810 in the “Limit width to pixels for videos, full size images, and other shortcodes.”

Here are the six images that I modified: cac-header.png, cac-header-no-sidebar.png, cac-body.png, cac-body-no-sidebar.png, cac-footer.png, and cac-footer-no-sidebar.png. If you’d like to use this, please click each link, and then right click each image and save it to your computer. Then upload each image into your Media library on WordPress. Once you’ve done that you can click on each image name in the Media Library and you’ll see the URL for the image. Plug that URL into the code below, replacing each PUT-YOUR-MEDIA-LIBRARY-URL-HERE with the base portion of your URL. For instance if your media library URL for the cac-body.png is https://carsandcode.files.wordpress.com/2011/08/cac-body.png then you would update the second line below to background:url(‘https://carsandcode.files.wordpress.com/2011/08/cac-header.png’) no-repeat center;.

#header {
background:url('http://PUT-YOUR-MEDIA-LIBRARY-URL-HERE/cac-header.png') no-repeat center;
}
.no-sidebar #header {
background-image:url('http://PUT-YOUR-LIBRARY-MEDIA-URL-HERE/cac-header-no-sidebar.png');
}
#content-container {
background:url('http://PUT-YOUR-MEDIA-LIBRARY-URL-HERE/cac-body.png') center top repeat-y;
}
.no-sidebar #content-container {
background-image:url('http://PUT-YOUR-MEDIA-LIBRARY-URL-HERE/2011/08/cac-body-no-sidebar.png');
}
#content {
width:1150px;
}
#content-body {
width:810px;
}
.no-sidebar #content-body {
width:950px;
}
.post .entry {
line-height:1.5em;
}
#sidebar {
left:10px;
width:220px;
}
#footer-wrap {
background:url('http://PUT-YOUR-MEDIA-LIBRARY-URL-HERE/cac-footer.png') no-repeat center top;
}
.no-sidebar #footer-wrap {
background-image:url('http://PUT-YOUR-MEDIA-LIBRARY-URL-HERE/cac-footer-no-sidebar.png');
}
h1.entry-title,h2.entry-title {
width:700px;
}

After using the modified images and CSS, I get this:

Quick Specs (all measurements in pixels):

1. One sidebar: main column width is 810, sidebar width is 220.
2. No sidebar: main column width is 950.

What do you think? Is this better? Is anyone having issues now that the width is wider? Leave some feedback and let me know. Also, I know that these CSS and image modifications are not perfect. If someone else can come up with better numbers and/or images, please share and I’ll update the post.

P.S. This site is best viewed at 1280 (or wider)  x 1024 (or any other height you desire!) 😉

Edit: Added a line to increase the line-height after a suggestion by Designsimply on the WordPress forums. Also added some clarifying information about the theme options and why I chose the width I did.