david a mcclain (blog) | Home

A quick post about the redesign (I kinda feel that I should say something)

So…it’s blue…and…it uses no flash anywhere…and…all the content is fed via XML…and…it doesn’t have a store yet but I’m probably going to use Big Cartel for that…and erm…

Making stuff with XHTML and CSS

This is the first version (and pretty much first site) I’ve built that uses no flash. Anywhere. At all. Although that decision just evolved through the design process I’ve justified it to myself in that I wanted v5 a simpler, understated affair that didn’t distract from the “purpose”. The purpose being that my design site is a place to showcase my design work. I had previously held that my site should itself  be something worthy of being showcased until I woke up one morning convinced that it should just be a frame, a box, a holder of “stuff” and as such should fade into the background as much as possible. Ideally it would be much more sparse than it is but I also wanted a site that was, even in some small way, visually distinct and so I was scared of going black on white.

Pandering to an audience of one

Being entirely flashed based, my previous site didn’t work to well on my iPhone (well, I did have a non flash version but I wasn’t too enamored of it) and I was excited to be able to have something I could pull up on my iPhone should need arise. But alas, it was a bit of a mess. The width was all messed up with some elements not spanning the full width that the should do, others overlapping. (Just a side note, I tested in iPhoney and it loaded perfectly. Hmm!) My best guess was that the browser was calculating the width of the page, and therefore how to scale it to fit in the 320px or 480px viewport, before the site content was loaded.

A simple-ish solution

What I ended up doing was to make a copy of the site into a sub-domain and tweak the CSS until it worked properly. Cowards way out? You betcha! I set up a wee little javascript do-dad in my “real” site to detect if the user was on an iPhone and if so give the user the option to go to the iphone-friendlier site or not. I say user, but I mean me. If you’re interested but don’t have an iPhone you can see it at iphone.davidamcclain.com. If you’re interested, the javascript I used went a little like this.

if (window.navigator.platform == 'iPhone') {
  msg = "Would you like to use the iPhone version?"
  if (confirm(msg)) {
    path = window.location.pathname;
    window.location.replace("http://iphone.davidamcclain.com");
  }
}

I might end up making a “proper” iPhone site, but for now this will do for my needs.

One last thing

For anyone looking to make a iPhone (or iPhone friendlier) site I strongly suggest you check out Apple’s iPhone Dev Center. You do need to be an Apple Developer Connection (ADC) member but it’s free to join and there’s an absolute ton of info there. Not just on iPhone but user experience, internet technologies and cocoa and galore!