iPhone optimization has come to mrjerz.org

Using this easy method of iPhone trickery that I linked to the other day, I’ve built a stylesheet that displays this site specifically for the iPhone and iPod Touch.

The method is simple. Put the header code:

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iPhone.css">

into the appropriate place in the header, and build your iPhone.css stylesheet. In that stylesheet, I chose not to display the sidebar (using display: none) and increased font sizes until they were readable without zooming. You should also pay attention to the width of your main content area. Mine is normally limited by a pixel count, so I changed that to 100%. Then, it was massive tweaking until I had it about right. I’ll still change it up constantly until I’m super happy.

That’s where you come in. If you have a suggestion for how it can look better, please leave a comment or send me a message, if you care to keep it private.

At least one suggestion came up earlier today, and that was to add a snippet of the post below the headline. That won’t be possible without altering how my main site displays, and I don’t want to do that. The downside to this method is that the page you see on the iPhone is the same page that displays when you use a regular browser, but the stylesheet that loads controlling the look is different. Anything within the CMS I do, like change the length of the excerpt of a post, or something along those lines is changed universally.

My goal here was to make it look similar to what I’ve seen from other places who take your RSS feed and turn it into an iPhone site. I don’t want anyone going to another site, and those haven’t worked at displaying the entire post, like this does.

So, if you have an iPhone or iPod Touch, check mrjerz.org out on it, and let me know what you think.