A while ago I offered Just Miss a custom wordpress theme as a birthday present. I wasn’t sure whether she’d take me up on it, but in one of my afternoon design-y moments I designed and tweaked (and tweaked and tweaked) a possible theme and sent it her way. She might like it, she might hate it, she might not want to use it. Such is the way of presents, I think.

But I have to say that when someone you’ve created something for LOVES it, it is pretty much in my top 5 awesome feelings ever.

So I developed the theme (not without some serious frustration at DTR) and once it was all bug free she launched a fancy new site (justonemiss.com), with a fancy new theme!

Perhaps it’s just me, but I get such a kick out of seeing my designs in use. Seeing her blog rock my design all sweet like. Watching the comments and tweets roll in as she got more and more complements about it. Warm Fuzzies all round, I think.

There is a flickr photo pool that starts with ‘Design Is’. They have wallpapers that say things like ‘Design is Thinking Made Visual‘ or ‘Design is Created Reality‘ but really?

Design is AWESOME.

[Edit: After Kyla's super kind comments, I work for Sinter Design and Development, and if you'd like a wordpress theme, or a website or whatever you can reach me there, or you can find me on Etsy. :)]

- George Santayana.

I don’t do alot of design work in my current role, which is understandable. I wasn’t hired as a designer, and I have zero design training (my degree was all about the technical implementation side, and about usability) so that’s kind of understandable.

But I like web design. Creating cute websites, or wordpress themes or whatever. And while I’m not working on any big projects I put aside a little time each day to make something cute. Refine a logo, or a create theme overview, or some colour swatches or something. Just little things to refine my eye, bolster my design skills. And a friend of mine suggested that I DO something with these little pieces of practice.

So, I started an etsy store (rargBanners.etsy.com). It’s kind of ordinary, actually. I sell one-off premade banner packages, which is actually an okay format for my little doodles and whatever. The problem is, now that I have a store, I kinda hoped that I’d manage to actually sell something.

It appears that I’ve entered into an already saturated market. It doesn’t matter that my designs are prettier that alot of whats out there (though, I’m a little biased. I also recognise that there are some that kick my behind quite nicely), it appears that I’m not going to sell anything via the etsy search engine unless some one stumbles over it head first.

It also appears, that if I’d like to sell something I need to pimp it, and well. I’m kinda adverse to pimping something that started off as a daily design exercise, you know? My main goal wasn’t really to sell anything. Unfortunately etsy has (very small but still existent) listing prices so I’d at least like to make that cost back.

Anyway, I figured pimping could almost be excused if I used it as a critiquing exercise. So, here are a couple of the banners I’ve created. Let me know what you think? What you like, what you don’t like? What seems ridiculous, what’s really cute, what I should and shouldn’t have done?

These ones are all animal themed. I thought they were kind of cute.

Anyway, let me know what you think?

I’ve been working on a custom wordpress theme as part of a much belated birthday present, and one of the requests was to have the fancy font that I’d used for all the headers to be used dynamically for the post titles. Usually all the fancy titles and stuff that you see on sites are actually static images, as you can’t rely on the users machine to have the fancy font installed. So, generally, you’re limited to maybe a handful of fonts. I wasn’t so keen on making an image everytime the author wanted to make a post so I did some hunting around.

I came across A List Apart‘s DTR Article by Stewart Rosenberger. You upload your fancy font to the server and it uses a small php script to make a temporary image which is used instead of the text. I also found an adapted version called P+C DTR, which used PHP and CSS to do the same thing.

Win:

Fail:

But, there were a few problems. The P+C DTR files had been removed, and I wanted a little more functionality than what the ALA’s DTR offered. So I did what any normal person and scoured the internet to find a decent copy of the files. What I found was example 1.6.1. for P+C DTR. You can find a zipped version here.

Unzip the file, and upload the whole thing to your web server, and test the example page. If you don’t get the pretty pictures check with your host, you’ll need a decent version of PHP (I’m sure this script is old school, so it should work okay with anything 3.0 and up. I haven’t tested it, so don’t quote me. It works fine with 5.0). You will also need the GD Library with PHP support installed on your server. If you don’t know what that means, talk to your Host and get them to figure out it for you.

Once the example pretty pictures are up and running, follow the README instructions and upload your font file to the dtr folder, alter the heading.css as you see fit, and add the php calls to the top and bottom and link the style sheet. It really is as easy as it sounds.

The problem I had was integrating it with WordPress. Three days of trying various combinations and banging my head against the wall. It point blank refused to work and by the end of it I was ready the gouge out my own eye, so painful was this DTR problem. What worked in the very pretty example did NOT work when I tried to do the same within the WordPress templates.

In the end I asked the advice of the brilliant Jennifer from InkSplash Designs who had successfully used DTR on Shamelessly Sassy and KDaly Photography and she said she’d had the same frustrating issues I had! But she did have some very clever tricks to get it working. Here’s what to do:

1. Install the /dtr folder in the root directory. So it should be in the same directory as the /wp-admin, /wp-content, /wp-includes folders, etc. (I’m fairly sure this is the source of all those frustrating issues! I’d installed it in the template folder)

2. In the theme files, put this:

In header.php, at the very very top, before the doctype: <**? php include 'dtr/dtr.php'; ?>

And for the stylesheet (I put this before the wp_head function): <**link href="/dtr/headings.css" rel="stylesheet" type="text/css" />

Then at the bottom of footer.php, after the html tag: <**?php ob_end_flush(); ?>

(You’ll need to remove the **’s).

Anyway, now it works like it’s meant to! Hurrah – I’m so glad. I figured I’d post about it here, so that no one else has to scour the internet and come up empty handed!

Sinter, the company that Liz and I have together is still going strong. Because we both work full time at ‘real’ jobs, Sinter often gets relegated to those moments usually reserved for procrastinating, or tv watching, or napping. It’s not so bad, we’ve churned out some good work in the last little while.

One of my favourite sites that we’ve done recently is for the fantastic dressmaker, Kirsty. She’s just moved to London, so we did her online portfolio. It was such a fun site to make. Very simple, very clean – the idea was to let her work shine through.

http://www.kirstymacdonaldportfolio.com

Another site which I’ve been working on here and there is the Forgotten Feline site. We had to do a quick redesign due to drama with last the designer (I hate such politics, really I do) so it was thrown together really quick and as such it’s not quite refined as it should be, but is still fairly pretty. Because Forgotten Feline’s is the charity I volunteer for, Sinter maintains this website free of charge for them. There are few sites we do that for, and I’m really glad that we do. Helping out in small ways can be really beneficial for everyone involved. :)

http://www.forgottenfelines.co.nz

At this point I’m still finding this kind of work so satisfying! Completing a small site, a nice tidy project is really brilliant. Being able to see everything come together and go live. Quite fun, actually :)

So with the being sick and the hens party and work and everything I’ve been a bit lazy and I did all the testing for rarg in Chrome, which is by far my preferred browser. It’s also probably the least used browser out there at the moment.

I’ve only just checked out rarg in ie and Firefox (I know, I know, I should have checked while I was developing and testing) and it looks, er, a bit different. A bit horribly different. Particularly in ie which is always a bit of a troublemaker in terms of web development.

Sigh.

Do me a favour and download Chrome. It’s got a bunch of fancy features (searching from the address bar, thumbnails of your most visited sites when you open a new tab and the fancy ‘crash control’ which means if one of your tabs fucks up, the others don’t and you don’t have to close your browser). It’s a nice streamlined browser that doesn’t fuck things up like ie does, and isn’t as clunky as firefox.

I will eventually figure out what it is in ie and firefox that is making rarg look horrible, I just have to find some time in which to do it!

Darius Twin is an epic artist who does some brilliant things with a couple torches from the 99c store. Darius Twin is into light painting. When I saw his stuff, I was blown away, for serious. Check it –

Amazing, right? Anyway, today I came across a tutorial he did about light painting and realised that as a medium it’s something anyone with a torch and camera can do. So I pulled out my old school point and click camera, fiddled around with the settings and ta da – did some light painting of my own.

Okay, so its a bit like a kid with fingerpaint imitating Picasso or whatever, but it was a cute little something that passed the time. And alas, while The Boy is off back to hickville (ooOOoo – did I just say that? My bad) I’m glad of things that pass the time till he comes home.

The Boy and I have been watching the first couple episodes of JJ Abram’s new show Fringe. It’s a fairly decent scifi/thriller with an interesting (although possibly far-fetched) premise. It’s got a few sequences which are a bit gory for me (which is why I haven’t watched the entire first season yet) but I’m slowly getting into it – a bit like slowly wading into cold beach water at the start of summer.

Anyway, as usual JJ Abrams’ has sucked me in – not with his characters or his plot (although both are fairly nice. Quirky, but you have to expect that from a JJA show) – what I’m loving is the typography used in his cut scenes (which I think is Helvetica Bold?) and how they were merged with the action shots.

It’s clean, well integrated and just looks damn cool! And the attention to detail – hurrah! They didn’t just put the text graphics in – they interact with their environment! There are shadows, the puddles and buildings have reflections, and clever directional light returns clever directional reflections. It’s all very clever, fantastically well designed.

They do remind me a bit of the intro shots to Panic Room, but with the characters offering witty one liners and the plot throwing unexpected twists I’ll appreciate the well designed and well executed typography without a fuss. :)

So you may have noticed in the last post I embedded an mp3 player so you could play Christopher’s songs without flicking to another page. Having waded through many MANY mp3 players, I thought it might be helpful for others to have this exploration stored somewhere.

I had a few requirements:

- Free
- Must be easily embeddable
- Must not be ugly
- No branding

After looking through a few of these players, I added a few more requirements:

- Volume adjustable
- Able to play multiple mp3s
- Able to view to the track name

The last three are features you’d expect from any player that you would use to listen to your sounds on a regular basis. I didn’t think I’d have to add them as requirements, but there you go.

The first couple don’t meet my requirements at all, but as not everyone is as fussy as I, maybe you’ll find this useful.

1. Odeo MP3 Player

This MP3 player is easily embedded. Simply copy/paste some code into the html, and point it to where the MP3 file is stored. You’ll need to define the duration for it to calculate how far into the song it is, but otherwise it’s fairly simple.

Unfortunately, its branded, will only play one track, and is not volume adjustable. Still, its pretty cute and super easy to use.

The Code:

You will need to replace ‘MP3_URL’ and ‘DURATION’ with the appropriate values.

2. Google Reader

This player is as easy to use as the Odeo Player, but better. It has volume controls, is branding free, and automatically detects the duration of the MP3 file.

Not particularly pretty though, is it. And it still only plays one track, and there is nothing to let you know what the track name is.

The Code:

You will need to replace ‘MP3_URL’ with the appropriate value.

3. Yahoo! MP3 Player

When I first came across this player, I liked what I saw. It’s customisable, so you can make it as pretty as you like. It has volume control, shows the track and has those handy next/previous arrow buttons, so you must be able to point it to multiple MP3′s, right? And be able to play multiple mp3′s?

Uhh, not quite. You can set set ONE MP3 track. If you’d like to make use of that handy multiple MP3 file functionality, you have to go to Easy Listener and have them crawl an html page looking for mp3 files. Not so handy when you don’t really want the files to be available from an html page, and you can’t point it to a directory either.

Still, it’s easily embedded. Like the other two players, you simply copy/paste the code and point it to the MP3 file. Unfortunately it’s branded, and still doesn’t play more than one track easily.

The Code:

You will need to replace ‘MP3_URL’ with the appropriate value.

4. Audio Player WordPress Plugin

Here the players start to get a little more complex, but not so much. This particular Plug In is from 1pixelout. It requires uploading a javascript audio player and flash player into the directory where the mp3′s are stored, and then it’s just a matter of copying and pasting the appropriate code into the html.

Unfortunately I’m not going to provide those files for you, but you can get them here, along with a pretty sweet tutorial and a working example. Here is a pretty picture for you, though:

While this solution is easily embedded, and is super cute (just look at the sliding action!) it’s still not what I’m looking for. While the tutorial suggests you can add more than one MP3 file, that is not actually the case, and there is still no track name. Alas.

5. Fabricio Zuardi’s Music Player

This MP3 is similar to the WordPress Plugin, in that you will need to upload some files to your server. Again,I’m not going to provide the files – you can find them here courtesy of creativetechs.com.

This player has all the features I was looking for (apart from the Not Ugly one, still, it could be worse!) and more – it allows you to upload cover art for each MP3 file. Unfortunately it doesn’t load one if none are playing, but as it’s an extra I let it slide.

The only real problem I had was that embedding it was slightly tricky. I had issues reading in the playlist.xspf file, but by changing the format to playlist.txt and altering the appropriate embedded html code it worked fine. Also, the cover art won’t show unless it is exactly 130x130px.

While this player is fine for here and now, if I ever decide to use something similar for a clients site (say, like christopher-reed.com then I think I will simply build my own player.

If anyone else comes across a nice, not-ugly MP3 player that meets my requirements let me know!