Suburbia Media are celebrating 20 issues of their seminal fashion magazine Pop. They asked us to deliver a simple Flash intro which shows all the covers from the issues. So here it is.

Slightly trickier than it looks, its a liquid layout that makes the most of the user’s browser window space, including a switch to full screen to see the covers at their best. The guys decided they wanted minimum acceptable sizes and margins, so all that needed to be thought out… but we’re used to such attention to detail so it was a nice smooth, enjoyable little project.

If all clients were as nice to work with as Fig Cashmere, the world would be a better place. When I first met them on the South Bank to discuss the project, I could not believe how open they seemed to ideas, how generous of spirit (they have a charity set up in Nepal to help the community that makes their clothes), and how relaxed they were. But as the project progressed, our complete rebrand and delivery of a cool-ass new e-commerce site became a true pleasure to work on.

Visit the site

We had to do quite a bit of custom work to make the store look good, but all the way along, the reception of the new designs was encouraging to say the least. We pulled in some nifty one-click menus (you can get to any section in one click), some nice Flash with simple fallback, and a flow that takes the user gently through every aspect of the store. 

We decided that their ethical approach warranted some attention so we delivered a nice 5-slide presentation called “The Fig Way” which highlighted all the brand values and showed that they were interested in much more than pure commercial gain.

As a “G-RAFF added extra” we delivered a microsite for their charity “The Human Touch”, just a nicely styled WordPress blog that will let them keep the world informed as to the great work they are doing in Nepal - even though they do it as a matter of course and would rather try to get a moose into a pair of jeans than blow their own trumpet. 

Lovely company, lovely job… more to come!

Fig Cashmere
The Human Touch

How do you cram a multi-layered works archive, full screen photo gallery, two channel music player, Yahoo Maps guestbook, RSS-friendly news engine and script-driven aurora borealis into a minimalist Flash website? Answer: Brendan-Perry.com.

What a trip! Steve first met Brendan when he toured the world with the man as his guitarist on the 1999 “Eye of the Hunter” tour, and they became friends. Steve built Brendan’s original Flash site back in 2000, using Flash 5, and we decided eight years on to persuade Mr Perry that it was time for a refresh.

Brendan is a man who knows what he likes, and is not easy to please… but when you do find the recipe that floats his boat, is so generous with positivity and excitement it is hard to believe. He does not suffer fools, gladly or otherwise… so the initial stages of trying out design ideas was not for the faint-hearted. We survived, and eventually we arrived at the idea of a super-minimal site (he wanted Flash) whose homepage was based on Brendan’s own photography, but sparked by an ActionScript-driven aurora. It gave a sense of serene and mysterious beauty that set the tone for the rest of the site.

We worked with lots of multi-level expanding panels to keep clutter to a minimum, but preserving a nice sense of “touchy-feely” interaction with the user. We were delighted after go-live to see such a glowing response from fans - as they can often be the hardest to please.

As an extra, we decided to give Brendan a Yahoo Maps guestbook so people all over the world could plant their comments… although still in development, this feature has been a great success, and we plan to release it in our forthcoming store, albeit in a different (more flexible) form.

Part of the launch was handling a large-scale e-newsletter solution, doing the mailout and managing the distribution of a special free download of Brendan’s first solo concert at the ICA, London in 1993. This was a real gem for fans.

The site was, once again, built and tailored to Brendan’s needs using our “Backstage” content management system, optimised for creative sites.

Some more screenshots:

Visit the Site

When “No Surprises” - a company based in Nigeria - called us back in January, I was predictably suspicious - all I’d previously had in the way of email from Nigeria were countless offers of $19,000,000 for the use of my bank account…

But here we are, many months down the line, their new ‘G-RAFF built’ site is live; and I have to report that not only are there genuine businesses out there, brimming with creative and smart minds, but that working with them is fantastic, and your definition of “beautiful people” will be revisited on more than one occasion. We’ve had a great time doing the site, learned some new tricks, pushed our “Backstage” content management system to the next level, and yes - we got paid (though sadly not $19,000,000).

They wanted the site in Flash, so we gave them some smart stuff… highlights included:

• A striking homepage that has had a great effect on their user base
• a sharp Flash tag-based gallery that effortlessly takes the user on a journey through all of the company’s events
• A sexy sliding panels system to keep screen clutter down throughout
• a shorthand system for writing content (markdown) in the backend system that all gets converted in the Flash to be beautiful formatted text - for example:
  “NO SURPRISES”->link:http://www.nosurprisesevents.com/ would become No Surprises
• A very low-bandwidth overall engine - we pulled the entire thing into a 96k engine - we wrote some nice progress systems, as most of Nigeria is on 56k dial-up, so at least they are kept informed of everything as it happens.

visit the site

Another architects site in association with Positive2. We were brought in to deliver a high-performance, content-managed Flash engine which would leave the company future-proof and able to take care of all their admin tasks. A few nice touches came in during the process.

VISIT SITE

The design was provided by Positive2, and was actually based on the existing site, which was already in Flash, but very “old school”, and longhand, meaning expensive updates for them, and a very large filesize for their homepage. They had to contact their web agency every time they wanted to make even the tiniest change, as no data was kept outside the Flash files themselves.

For example, there was a “project locator” with every project they had done as a dot on a wireframe map of London. You could roll over a dot, and the name of the project would appear… if you clicked it, it would launch that project behind the locator window. Whoever did the Flash actually manually placed the little dots and did one new button for each project. Oh dear.

Our solution was not only to update and upgrade to a proper database-driven version of this, but to provide the client with a nice “drag and drop” interface for managing the project locator in the backend system, making it very easy for them to look after the application themselves.

Our secure backend admin system “Backstage”, designed and built in-house - is very comprehensive - they can add, amend or delete entire projects, staff biographies, add RSS-friendly news items / other content and just keep everything running nicely without having to talk to us. It was tailored to their needs, as we do for every client, and they have been very complimentary about how easy it has been to take care of even complex admin tasks such as adding a whole new project with 10 images…

The site performs well and the client is very happy.

We recently finished a Flash site for the author Lauren St John. She is best known for her popular book “The White Giraffe” but has a wealth of non-fiction, other childrens’ fiction and journalism to her name. It was an intriguing journey - one of those projects where the more we discovered about the client, the more it became a fascinating world to inhabit for a while.

Read on to find out what we did on the practical front to make Lauren’s work come to life… including an interactive realtime African game reserve, slide-out audio player and seamless layered navigation.

VISIT SITE

It all started when Steve had the idea of an interactive game reserve where the animals featured in the childrens’ books titles would act as clickable links to explore the books, aiming at the target audience of 9-11 year-olds. This is almost exactly what Lauren had in mind, so she asked us there and then to take the project on.

Nancy did some incredible illustration work, which was broken into layers and controlled by parallax scripts - so the foreground moves faster than the background. We added a realtime sky whose colour would change according to the time of day of the visit - including the sun which would rise in the east and set in the west, the moon and stars who begin to glow around 8pm and get brighter until around 11pm. Minute attention to detail? Yes… but that’s what we do. And our client loved it.

Lauren’s adult audience needed some love too, of course. She happens to be a rather fine photographer too, and looking through her collections, Steve found a good number of useable photos - setting the atmosphere perfectly. 

One shot in particular, called “Zen” triggered a nice idea for the Non-Fiction landing page - to create backgrounds for each category that would swap on rollover. This gave a nice feeling that the site was taking on the character of each side of Lauren’s work… as we found, when she’s in “golf mode”, she’s REALLY in golf mode, so the site had to echo this to stay true to Lauren’s personality.

Steve’s dad is a golf course architect, so he managed to pinch a lovely sunset shot of one of his courses in Turkey as the backdrop to the “golf” section.

Moving into these sections reveals another layer of navigation, making it very easy to get around. You can click on book covers, explore every detail - reviews, why Lauren wrote it etc., and either go back, or simply use the dynamically-generated menus to continue browsing. Its all pretty smooth.

A final touch in the portfolio site was to add a slide-out audio player to handle book excerpts and interviews.

To complete the site, we delivered a nicely styled WordPress blog so she could stay in touch with her fanbase.

(Ben pointed out that this does not work on Firefox… strange)

Get thy ass over to Greensock and get TweenLite. I simply can’t believe how much it improved the performance of my stuff.

So here are a couple of tips… firstly, there’s a cool little app called iPhoney which is a little iPhone graphical browser (for Mac OS X) for you to see how your site looks on an iPhone. Once its installed, select iPhoney -> iPhone User Agent from the top menu and that’s you. Surf to the site you want to check.

Now, on the server side, there a simple PHP script to catch any browser identifying itself with user agent “iPhone” - do whatever you like with it.

$current_agent = $_SERVER['HTTP_USER_AGENT'];

if (preg_match("/iPhone/i", $current_agent)) {
// do something
} else {
// do something else
} 

Pretty simple really. In my case, I just enclosed the SWFObject bit in the “else” clause, forcing iPhones to display the alternate content. Seems to work…

In ActionScript 1 and 2, there was a useful property - “_url”. It would return the URL of the current SWF… great when you wanted to do something like disable the launch of a relative URL when running a local SWF and testing your navigation (thus throwing an error). I used to use a simple function like this:

function isLocal() : Boolean {
if (_url.indexOf("file") == 0) {
return true;
}
return false;
};

Piece of cake. Then you could do stuff like:

function launchURL (url:String) : Void {
if (isLocal()) {
// don't bother trying to load the URL
trace("now launching " + url);
} else {
// we are online, go for it
getURL(url);
}
};

Now with ActionScript 3, things get a little bit more obscure, and its all down to a non-obvious thing - the default “loaderInfo” of the SWF you are running. This is also home to the variables passed in via SWFObject, if you use it.

SO…To get the URL of your SWF, just run this line of code:

var url:String = this.loaderInfo.loaderURL;

Or, to rewrite the URL launch function in AS3 (not forgetting to import the all important classes):

import flash.net.navigateToURL;
import flash.net.URLRequest;

private function isLocal() : Boolean {
if (this.loaderInfo.loaderURL.indexOf("file") == 0) {
return true;
}
return false;
}

Hope that helps. And if you’re wondering, you can get at the variables passed in via SWFObject by using this.loaderInfo.parameters.* where * represents the variable you’re looking for.