overzealous

It was just before Christmas and I was up late, waiting for a call from Christina who’s back in Canada. On a whim and needing something to do to keep me awake I purchased the-elliott-family.org, with a view to setting up Google Apps for your Domain and provider agnostic email addresses for my family.

I figured I should create a splash/home page for the domain as well, but what to put on it (and more importantly, how to make it keep my attention long enough to code it).

First things first, what does it need to do?

• Look modern/pretty. I’m not going to put my name & time into something I’m not proud of,
• Provide links to the various Google apps, so my family don’t have to remember all the subdomains,
• Provide links for randoms to contact people in the family, without giving out their email addresses – this will probably never be used but provides additional purpose for the site.

The finished result is now at http://the-elliott-family.org. I’m pretty pleased with it. The little bird image was stolen from a template in Pages and provided the inspiration for the rest of the page. To my eye it’s clean, modern, simple and kinda cute.

Things I don’t like:

• The menu is too hidden. Not a problem for my family (as they can be shown how to access it), but I doubt anyone will find it without being shown. That’s easily fixable by having the menu ‘open’ by default, but I don’t want to. And seeing as I don’t really expect anyone else to ever use this, I’m not sure it’s that important. I may change my mind about this
• My original idea for the menu was to have the little flock of birds trailing it behind them on a banner, with the animation showing them ‘flying’ across the screen (like this). But there are difficulties here. The banner doesn’t want to be as wide as the menu when opened. So I ignored this for now as not worth the effort designing a flying banner background image.
• I’ve cheated a bit on the CSS, using overflow:hidden on the html and body elements. This breaks when the window is small (or you’re on a mobile device). I should fix this up at some point.
• I’d like to use a nicer font all round on the site, removing the text-as-image from the central image. The only cheap & reliable way of doing this that I’m aware of is to use Typekit, but I already use them for my own domain and I’m not sure I can justify the cost of upgrading to a ‘portfolio’ account for this. But I might

This was really only a tiny project (about 3 hours of coding) and more of an exercise in design than engineering. But I don’t get enough time playing with design these days so I’m glad I put the effort in.

Have a look and let me know what you think.