I have just recently built a cut down and customised version of mandurahweb.com for the iPhone. The site is still very basic and it hasn’t had any designer input as of yet. There were a few challenges I had to overcome when building the website that I thought might help some others:

1. To use a fluid width website I needed a way of detecting when the iPhone’s orientation changes.
2. I wanted to display the content of the blog on the iPhone but some of the images used on the blog were over 600px wide.
3. The RSS feed used different namespaces which caught me out for a while.
4. When I uploaded to the server I received the error SimpleXMLElement __construct, document is empty.

Fluid Width

This turned out to be fairly straight forward with only a few small snippets of JavaScript and a bit of cleverness with some additional CSS styles. The original article I read is available with a bit of googling, I would post the link but I've lost it now and there is plenty of information to go at. I adapted their code to only update the styles for either horizontal and normal and only changed the styles for horizontal orientation. This allowed me to customise the look and feel of the website to look almost identical in both views, the only differences being the amount of content being displayed when you change the orientation. The JavaScript simply used a switch statement on window.orientation, the four values it takes are:

1. 0 - normal
2. -90 - horizontal
3. 90 - horizontal
4. 180 - normal

The four values actually link to the four different possible orientations but I only wanted to be able to tell between horizontal and normal though. The iPhone doesn't yet support viewing with the phone upside down. Once I had decided the orientation I simply added the appropriate class to my website wrapper div.

Removing Images from an RSS Feed.

Due to the size of some of the images in the RSS feed I decided it would be better to simply remove them altogether rather than resize every single image. This would also making two copies of each image used in the blog every time we update the blog. The way I removed images was using a simple function I wrote which used some simple regular expressions. You can also see that I have used a few different expressions to remove images inside of anchors and headings as well as another str_replace which fixes ups any links to the iPhone equivalent of the site. This will be removed once we get some proper htaccess rules going to redirect site wide based on the browsers user agent.

<\/a>/"; 
    //remove any images
    $text = preg_replace( $pattern, "", $text );    

    $pattern = "//"; //Removes any remaining images
    //remove any images
    $text = preg_replace( $pattern, "", $text );    
    
    $text = str_replace("mandurahweb.com.au/", "mandurahweb.com.au/iPhone/", $text);
    
    
    return $text;
}

Full Text RSS feed from Wordpress – content:encoded

While I have done a little bit with Simple XML it caught me out when I came across content:encoded. I was simply trying to display the full article and not just the description which could easily be accessed using item->description. The problem was the encoded node was refereed to using a namespace and therefore I needed to pass that namespace into the Simple XML’s children() function to retrieve the encoded node. Once I did this the rest was fairly straightforward. I hard coded the namespace in as all I were after was the content:encoded text but it is possible to retrieve an array of all namespaces used in the document using SimpleXML's getNamespaces().

Here is how to pass the namespace to the children method on your selected node.

$desc = $xml->channel->item[$i]->children("http://purl.org/rss/1.0/modules/content/")->encoded;

SimpleXMLElement _construct. Document is empty

Well I finally uploaded the first test version to the server after getting everything working perfectly on the local server only to encounter the above error. I tried a few different things to get it working but in the end it was something to do with mandurahwebs .htaccess file which was redirecting the site based on whether the “www. " was present. If you are having this problem I would recommend changing the link to your rss feed inside your new SimpleXMLElement() call. I simply removed the www.