recent work: echoes of empires

Echoes of Empires Screenshot

Over the winter break, a close friend commissioned me to develop a website for his local LARP group, Echoes of Empires. I use the word “commission” loosely here. It was really more of a personal favor than a paying gig, an opportunity to focus my creative skills and produce something useful in exchange for a small quantity of personal glory.

Yes, “Live Action Role Play” means that these people, these adults, gather together every other weekend for the express purpose of pretending to be vampires. Yes, I designed their website. Yes, I hunted down the stock photos that adorn the opening Invitation. In fact, I wrote the Invitation (somewhat more hastily than I would have liked). No, I’ve never actually participated in a LARP. No, I don’t plan to.

The trouble with the old site was that it was really just a Joomla installation with a vampiric header image and a vaguely appropriate color scheme. The design lacked vision, and being built on Joomla meant that the contents of the actual game were guarded by the webmasters. Now, the game content is hosted on a wiki that can be edited by all participants, and the website, such as it is, functions more as an advertisement for the game.

My only guidance was to design in red, black, and white, since, as my friend said, those are “The only colors that Goth people can see.” I tried to make everything—from the two customized headers, to the subtle striping on the background, to the customized Google maps, to the altered stock photos—paint a certain picture, and lend the campaign some atmosphere. We wanted you to click through this thing and think, “Wow, this looks cool.”

It was a quick job, but a fun one. In the coming weeks and months, I’ll be working on three other much more restrained sites. Those will be exercises in how to dress up boxes and make them usable. But this one?  This one was just cool.

Special thanks to A List Apart for the rotating header script and stock.xchng for most of the imagery. Extra special thanks to Rowan for the opportunity.

Commentation

(6 Comments)

  1. sociallytangent wrote:

    Looks good. I like the changes to the ankh symbol since I last saw it.

    That header script, though, is really overkill — seriously, creating and destroying a copy of an image in the HTTP header? Just upload the images with sequential filenames (img1.jpg, img2.jpg, etc.) and shrink the PHP down to one line:

    <? php print “”; ?>

    I mean, I’m sure it was a great academic exercise for an ALA article, but Dreamhost supports inline PHP (so there’s not much point in making it external) and it’s kinda silly to be using a huge script like that for such a simple task.

  2. sociallytangent wrote:

    Trying again with HTML entities!

  3. sociallytangent wrote:

    WordPress seriously fails on parsing inset HTML.

    Replace the square brackets with angled.

  4. sociallytangent wrote:

    I give up!

  5. Jonathan Dobres wrote:

    Sociallytanget: I agree that the ALA solution comes off a bit clunky, particularly since it has to re-request the image with every page load. Thanks for the tip. I’ll definitely have to try it out.

    Also, did you notice that you can use the <code> tag? Makes writing things like…

    < ? php print "<img src=\"images/img" . rand(1,5) . ".jpg\" alt=\"Header image\" />"; ?>

    …way easier. Granted, you also have to substitute character codes for actual greater than and less than symbols, but it works, with a minimum of fuss.

  6. sociallytangent wrote:

    Yeah, I didn’t see the code tag until too late — I probably could’ve used URL encoding, too. Not permitting square brackets, though, is just inexcusable laziness on WP’s part. On the upside, you’re getting lots of comments!

    For anyone else that had further questions about adding the above PHP code to .html files, create a .htaccess file in the same directory with this code:

    <Files *.html>
    ForceType application/x-httpd-php
    </Files>

    (I’m sure this won’t work in WP either, but I’ll never pass up a chance to further embarrass myself!)