Colin Gourlay

4 notes &

abcnewsgathering:

INTERACTIVE STORYTELLING TEAM TO PRESENT THE NEWS IN AN INNOVATIVE WAY

The new Interactive Storytelling team, created within News Online in Brisbane, is up and running and looking to create innovative, informative, and entertaining digital content.

The team of seven includes Editor Matthew Liddy, Senior Digital journalist Cristen Tilley, Journalist Tim Leslie, Digital Developers Colin Gourlay and Simon Elvery, Illustrator/Animator Lucy Fahey, and Digital Designer/User Interface Ben Spraggon.

 

2 notes &

Latest Project: The Hungry Designs Giveaway App

It’s very rare that I’m able to work on top secret projects for Hungry Designs (my very talented partner Amanda’s wearable art business), but I love any excuse to hack on unfamiliar but exciting technologies. This project had me digging into the Facebook JavaScript SDK and Google App Engine, and I had immense fun putting it together over the past couple of days. First, a bit of back story…

Amanda used to conduct giveaways of her products on the Hungry Designs Facebook page, but due to a recent revision of Facebook’s promotions guidelines, this is no longer allowed, and pages continuing this behaviour have started being shut down. This has disappointed Amanda’s fans, as well as fans of other talented artists/designers who use Facebook pages in the same way to generate interest in their work.

I could have built a wholly independent website, but I think you can appreciate the power that comes with being able to tap directly into the Facebook accounts of the entrants, and forego the inconvenience of an extra signup process. I also wanted the app to feel like a part of the Facebook experience, and I decided to keep the style of the app very similar to Facebook itself.

The app itself was based on a sample canvas application released by Facebook at the end of last year, which was already geared towards usage on Google App Engine. The Facebook JavaScript SDK was fairly straightforward, and because I have experience working with Python and django, I was able to get stuck into the App Engine side of things and even build some simple admin pages for Amanda to use (a nice alternative to manually adding objects to Google’s datastore).

On the client side I also used the excellent HTML5 Boilerplate, which I’ve been using as an HTML/CSS/JS foundation for most of my new projects. All that was required to finish off the job was to put together a quick piece of static HTML to live on one of the tabs on the Hungry Designs Facebook page, so that people can easily find their way to the app.

Check it out if you have a few spare minutes, and enter if you’re feeling lucky…

Visit The Hungry Designs Giveaway Facebook App

Filed under hungry designs app engine facebook google javascript sdk apps html5 boilerplate

0 notes &

I gave my personal website its annual refresh today.
As I haven’t worked freelance in a while (a full time job and hacking on personal projects has kept me more than busy), I was worried that because of the portfolio focus of my last website, the content would start to stagnate.
I’ve opted to go for a simple one-pager that can route visitors off to the various places on the web that I hang out (including this blog). I had fun throwing it together, particularly my attempt to emulate some popular site logos using CSS3 and Google Web Fonts.
Check it out at http://colin-gourlay.com and let me know what you think.
[P.S. If you miss the old site, it’s living at its new home at http://2009.colin-gourlay.com]

I gave my personal website its annual refresh today.

As I haven’t worked freelance in a while (a full time job and hacking on personal projects has kept me more than busy), I was worried that because of the portfolio focus of my last website, the content would start to stagnate.

I’ve opted to go for a simple one-pager that can route visitors off to the various places on the web that I hang out (including this blog). I had fun throwing it together, particularly my attempt to emulate some popular site logos using CSS3 and Google Web Fonts.

Check it out at http://colin-gourlay.com and let me know what you think.

[P.S. If you miss the old site, it’s living at its new home at http://2009.colin-gourlay.com]

Filed under website projects

9 notes &

Frak featured on The Grid System

The Grid System

I don’t know how I managed to miss this one. The Grid System added Frak to their Tools page back in November, and I never even noticed!

I only discovered it had happened why I logged into Google Analytics for the first time in a few months, and noticed a dirty big spike in the graph on the 11th November, followed by a consistent flow of traffic that has yet to drop off.

I hope this means people have found it useful, or at least interesting. Thanks, Antonio. I’m chuffed to bits.

Filed under css featured frak framework grid projects

2 notes &

Frak. Another frakkin’ CSS grid framework

I know. We don’t really need yet another grid system. But I wanted to build one anyway. It’s inspired by Yahoo!’s latest YUI3 Grids offering. While I liked the approach, I didn’t warm to the class names and their application.

Here’s the gist of what Frak is (if you use GitHub, please pardon the pun)…

Frak got its name as it alludes to the word fraction (or fraktion if you’re comfortable with made up words). Fractions are what power the grid itself, so I wanted to use simple words like half, quarter and eighth to describe how I was dividing up my pages.

As Frak doesn’t define any margins or padding you’re free to nest grids as deep as you want without breaking the divisions…

Notice how in the example above, the first column has the class “quarter x3" applied to . The x3 serves as a multiplier for the quarter. This technique allows you to build some very complex layouts (without them becoming complicated). Frak respects whatever way you prefer to define your fractions, i.e. “quarter x2" and "half" are interchangeable. Frak doesn’t force you to simplify fractions, like some other grid frameworks require. The two grids in this example will both achieve the same result…

So grab a copy of Frak, have a play around with it, and please let me know how you get on. You can download the latest release here:

The download contains the frak.css file, as well as a small demo page that you can use to get up and running. frak.css itself is well under 1kB, and I’d recommend that you drop it into your site’s CSS, just after your reset. The only browser not currently supported by Frak is IE6 (because of the use of multi-class selectors to define the multipliers’ effects on the grid).

Check out the Frak project page at: http://colingourlay.github.com/frak/

You can also fork the git repository over at GitHub: http://github.com/colingourlay/frak

Filed under grid, css frak framework projects