I browse Google news and Reddit every morning on my iPod and many of the websites that link from them look very poor on the iPod/iPhone. It's really not hard to make a website look good on a small screen but unfortunately mobile web usability is often neglected.

You can either use Javascript or a server side method to detect if the user is on an iPhone; both are explained here, and redirect the user to an iPhone friendly version of the site. However I just wanted the website to be formatted differently, so I added this to my header:

<link rel="StyleSheet" href="/css/style.css" type="text/css" />

<![if !IE]>
<link rel="stylesheet" 
      href="/css/iphonestyle.css" 
      media="only screen and (max-device-width: 480px)"  
      type="text/css"  />
<![endif]

The main problem my site and many others have is the three column layout which just does not work on the small screen. The iPod tries to fit it all in making text tiny and unreadable, or when you double click to enlarge, you have to scroll around everywhere to find content. My iphone css gets rid of all floats and makes text very big. I make sure everything is in terms of percentages so that the only scrolling you have to do is vertical. Any comments would be welcome on how I can improve it more!

For any iPhone users, here's a list of the top 20 iPhone compatible websites, although really I think it's unacceptable for large and popular websites not to have thought about this already.