iPhone / Android Optimized Theme

iPhone and Android optimized WordPress templateAfter our previous post on mobile-optimized websites it seemed to us that we should lead by example. That’s why we’ve released version 1 of “C. Murray Consulting Mobile”.

For v1, we focused on the powerful and increasingly ubiqitous mobile WebKit, the website rendering engine used by the web browser on the and (available today on the T-Mobile G1) as well as some Nokia Symbian devices. It’s also the web engine behind the forthcoming Palm Pre. The core WebKit engine also powers and let us know what you think. We’ll be adding a check for other mobile WebKit devices, as well as a manual web address to check it out, soon.

6 Responses to “iPhone / Android Optimized Theme”

  1. Kris H. says:

    Are you doing server-side detection? I don’t see a iPhone/Android specific stylesheet, nor am I seeing JS…. so I’m assuming you’re sniffing the user-agent and then inserting a new stylesheet?

    Oh, and also, it looks great! :)

  2. Jake Goldman says:

    Yes, we are doing server side detection. Our template checks the user agent with PHP, and appropriates the right stylesheet and javascript accordingly. We found this to be the fastest / lowest overhead route. We plan to allow it to be “overridden” (think “standard view”) by setting a session variable.

    We’re actually planning to write a more detailed article about this within a few weeks… so stay tuned if you’re curious!

  3. Bill says:

    Sounds great. Will you releasing the theme to the public for download?

  4. Jake Goldman says:

    Bill – it’s not a standalone theme.

    Let me clarify a bit – the WordPress site template is a collection of files that generate the look and feel for this entire site. We custom built our own simple template (that you see here), and we will not be giving it away (mostly because, as web experts, we want a unique site).

    If you visit our site on an iPhone or Android phone all of the template elements (and output HTML) are almost exactly the same… with one small and one big exception. The small one – we add some special viewport JavaScript. The big one – we load an alternate stylesheet. Good, modern websites are built to have a generic, clean HTML structure. In theory (and in practice, here) just changing the stylesheet can result in a completely different look and feel. Makes maintenance, look and feel upgrades, and alternate views much easier!

    I’d be happy to release the publicly available JavaScript code and our stylesheet, but it would be useless without the rest of the theme.

    Stay tuned for that lengthier article in a few weeks… I’ll explain in more detail, and probably provide a block of code and stylesheet optimized for the default WordPress template.

  5. Bill says:

    Thanks Jake. Makes perfect sense. I guess I was thrown off by the line:

    ‘That’s why we’ve released version 1 of “C. Murray Consulting Mobile”.’

    I read that and quickly looked for a ‘download’ link. :)

  6. Mobile Website says:

    For web designers, mobile web design is becoming an easy way to acquire new clients. It amazes me how few web design companies are offering this for their clients.