Mobile friendlier site with media query in CSS

I got a HTC Desire phone today after living with an old non-smart SonyEricson for a while, so I thought it was time to update this site so it looks better on mobile phones.

The design of my site is based on Scribbish which was originally a theme for the Typo blog engine that I ported to the site generator Jekyll.

Scribbish has a fixed layout that is 900 pixels wide, which is too much for the iPhone and Android browsers. You would have to either scroll around horizontally to see the whole page, or zoom out and make the text unreadable. (Browsers for less powerful phones actually can handle this better by not even trying to render the pages the same as in a desktop browser.)

A fixed layout isn't very friendly to people who don't want to run their web browser maximized. For some reason, web designers are very curious about what resolution people have on their monitors, so they know how wide they can make their designs. The resolution of the screen is irrelevant. What matters is the size of the browser window!

To make this site look better on a device with less than 900 horizontal pixels, or in a window less than 900 pixels wide, I made some changes to the CSS of the site. If the width is at least 950 pixels, the sidebar is located to the right. In a thinner display window, it is placed at the bottom of the page instead to give more horizontal room.

I have tested the changes in Firefox, Chrome, IE6, IE8, on an iPod Touch and Android and it looks fine. Internet Explorer doesn't support the media query feature of CSS, so it will not move the sidebar to the bottom if the window is thin, but the page is not worse off than it was before.

Please let me know if you find any problems with the new design!

For the ones curious about how the media query looks, here's what I added to the stylesheet to override the styles for devices with a width of less than 950 pixels:

@media all and (max-width: 950px) {
  #header {
    height: auto;
    padding-bottom: 12px;
  }
  #container, #content, #sidebar {
    float: none;
    width: 100%;
    padding: 0;
    border: none;
    margin: 0;
  }
  #sidebar {
    border-top: 1px solid black;
    padding-top: 5px;
  }
}

Comments disabled on this post.