Over on our Payments News blog, I’ve created an iPhone (and iPod touch) friendly version of our home page. The URL to view the iPhone version is http://paymentsnews.com/m. Here’s more about how I did it.
Basically, the process involved building on a basic template that the Six Apart folks have provided in one of their support items titled Tip: Creating a Mobile Friendly Weblog. We use TypePad’s Advanced Templates for Payments News so the process involved creating a new index template just for the iPhone page. The article contains the basic version of the index template that I started with.
Here’s what I ended up with:
Payments News – Mobile Version
body
{
margin: 0; margin-left:5px;margin-right:5px;
font-family: “lucida grande”, “lucida sans unicode”, “lucida sans”, lucida, arial, helvetica, sans-serif;
font-weight: normal;
font-size: small;
}
h3 { margin-top: .5em; margin-bottom: .5em; }
p { margin-top:.5em; margin-bottom: .5em; }
.entry-content { font-family: Georgia, “Times New Roman”, Times, serif; }
* {
margin: 0;
}
if (navigator.userAgent.indexOf(‘iPhone’) != -1) {
addEventListener(“load”, function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
<div class="entry" id="entry-“>
<a href="”>
<a href="#more”> »
Add your Google Analytics code here…
To use the template, in the Design tab of TypePad you select “Create new index template”, give it a description name (I used “PN iPhone” and an output filename (I just used “m” for the filename). Then paste the code in and hit save. Next, go to the URL of your blog and add “/m” (or whatever you used for the filename) to the URL and hit enter. You should see the new page. If it’s there, give it a go on your iPhone!
Note that if you use this template, be sure to add your own Google Analytics code near the end of the template.
I did this in a hurry this morning – so it’s not pretty in terms of using a separate stylesheet, etc. I’ve also got some font settings embedded in the code that I need to clean up when time permits.
The Javascript that’s included is a little trick I saw elsewhere that scrolls the Safari window up such that the URL bar is hidden when the page first opens. That helps put the most content onto the small screen of the iPhone.