Feedcreator creates feeds  ⁰

Posted by Michael to PHP on October 9th, 2008  

It aint exactly new, but Feedcreator is a light-weight PHP class that is used for, well, creating feeds (automagically, of course). We just put it to good use creating an RSS feed for our mothership site.

::thumbs up::

Zipcar. An IT and marketing company.  ¹

Posted by hoss to UX on September 11th, 2008  

Imagine presenting a business plan that sets out the task of persuading Americans to get rid of their cars. Sounds crazy doesn't it? But Zipcar appear to have done just that, and the best bit is that their success comes from them focusing on user experience above all else. In the words of their CEO, Scott Griffith, "at core we're an IT and marketing company - we just happen to have a lot of cars".

Image courtesy of flickr user jm3

Griffith explains that they looked honestly at a candid list of all negative aspects of car hire, and fixed every single one. Continue reading

Sprinkles – making a good website great  ⁵

Posted by James to Design, UX on September 1st, 2008  

The web already has a few food related terms, cookies, breadcrumbs, spam... I'd like to talk about another one... sprinkles.

What is a sprinkle?

Well, hopefully you always take the trouble to put some icing on your cake. But how do you make your cake even better, even tastier? In a word, sprinkles.

Sprinkles are additions to a website that take it up a notch, from 'good' to 'great'. Something that enhances the user experience, whether in terms of aesthetics or functionality. Sites might work perfectly well without them, but with sprinkles they becomes unique and memorable. We've started keeping a prioritised list of potential sprinkles when working on a project, so that we know what to come back to if there's some spare time at the end of it.

A few examples.

Firstly Yay Hooray's custom smileys, affectionately known as pinkies.

skinnyCorp specialise in creating online communities (maybe you know a tshirt site called Threadless), and these cute graphics emphasise the exclusive/fun/designer vibe of the Yay Hooray forum in a way that default smileys couldn't:

Yay Hooray's smiley set

Continue reading

A Little Piece of Mind  ⁰

Posted by John to Project Launches on August 29th, 2008  

A Little Piece of Mind homepage

The site is is made up of one page containing many smaller boxes (or "patches") of content. Clicking on a patch brings it to the foreground. As the project grows & develops, more patches of text, images, etc. will be added.

Currently, the site has several patches explaining the project, a form to add yourself to the project mailing list, and a shadowbox form for submitting work to the project. To add a touch of dynamism to an otherwise static page, the background fades in/out three different patterns.

The javascript heavy-lifting is done using jQuery & Shadowbox, while the page generation and forms use PHP & MySQL.

Lee Mawdsley  ⁰

Posted by John to Project Launches on August 28th, 2008  

Its previous incarnation had a few significant usability issues. Firstly, the entire site (and all the content) was stored in a swf. Secondly, it opened in a tiny 710 x 567px pop up window (full size screen shot).

So, Lee needed a clean, image-rich space to display his photography to prospective clients. It had to have large images that could be dragged onto a viewer's desktop. He also wanted visitors to be able to browse through collections using the full screen (as opposed to the full browser window). The final requirement was a robust, yet easy to use content management system to keep his site up to date.

The new homepage

Given the site's simple, portfolio structure, we decided to use Indexhibit as the CMS. It didn't take very long to write a few plug-ins to customize look and feel of homepage & gallery pages. There was also a wee bit of tweaking to the config files, but that was to be expected. To address the browse-images-in-full-screen-mode issue we used Marque's very own SWF Lightbox. All of the javascript animation was taken care of by script.aculo.us.

Screenshot of SWF Lightbox in action.

You have 1 items.  ¹

Posted by hoss to UX on August 27th, 2008  

"Why bother? Nobody else does. And besides it wouldn't make that much difference if we did it anyway."

This is a statement sought out by organisations focused on customer service as it is often an X marked on a treasure map of opportunity to differentiate their offering.

There was a time when most online stores had a line of code along the lines of this for a basket summary.

summary = 'You have ' + nItems + ' items in your basket.';

Nice and neat. A single line of code, the smallest piece of additive logic. But it means that when I add a £2500 television, my purchase is summarised with "You have 1 items in your basket." 1 items? Imagine this in a physical store. I'm about to hand over two and a half grand for a telly and you're not even taking the time to acknowledge I'm buying one item instead of many. Why not go the whole hog and call me Sir/Madam? Continue reading

N.E.R.T.F.M.  ¹

Posted by hoss to UX on August 27th, 2008  

Nobody ever reads the manual. Video games worked this out years ago, and it's now standard to begin a game with limited features/functionality/ability and for the full gamut of buttons presses to be revealed in contextual narrative form during Level 1. It was a very simple step to achieve - it only required two changes to be made.

1. Introduce the game's narrative in the Tutorial
2. Rename the Tutorial to Level 1.

By calling the tutorial Level 1 it takes on a new importance from it's new mandatory state underscoring the importance of delivering as compelling an experience here as in the rest of the game. The reason N.E.R.T.F.M. is because the main event is far more compelling, which is why making the manual part of the main event is a great solution. Continue reading

Monitor Remote Error Logs with WebTail  ⁰

Posted by John to PHP on August 25th, 2008  

WebTail is a tool that mimics the Unix 'tail -f' command through a web interface.

The problem: A webhost generates log files filled with useful debugging information. Unfortunately if you don't have shell access to the server, in order to read the logs you have to download the entire log via FTP, then open it on your local machine. This process has a lot of overhead, especially if you just want to monitor the last few lines of the log (where the most recent messages live).

The solution: WebTail. Just upload the WebTail folder to your remote server, navigate to http://yourdomain/path/to/WebTail/, type in the URI to your error log, and hit 'Restart log'.

Head over to the WebTail download page to get v1.0, and see the full instructions.

WebTail was originally made by Marque to view PHP error logs on our Mosso hosted server. Therefore, it has only been tested in a few environments.

Introducing SWF Lightbox  ⁸

Posted by James to Flash/Actionscript on August 13th, 2008  

SWF Lightbox allows you to view hi-res images in true fullscreen mode using Flash's StageDisplayState.FULL_SCREEN functionality.

When SWF Lightbox is activated, you can cycle through other images on the page with a mouse click, and press escape as normal to exit fullscreen mode.

Here's a wee demo using SWF Object 2.0 and the default colour scheme:

Please install Flash

And another with a custom colour palette applied to the button:

Please install Flash

Visit the SWF Lightbox download page for v0.2, full instructions, and a list of planned features. Top of the list right now are jQuery and Wordpress versions.

SWF Lightbox originated during a project for London photographer Lee Mawdsley, which demanded a way to view fullscreen images whilst retaining the normal functionality of jpgs that graphic-designer-types love (eg right click and save, or drag to desktop). Because JavaScript-based solutions like Lightbox and Thickbox are limited by browser width, we turned to Flash to make use of the entire screen width.

Vector map overlay for Google Maps  ⁵

Posted by Michael to Flash/Actionscript on June 2nd, 2008  

For a project we're working on, it occured to us very early on that though we wanted the location accuracy of Google Maps, we didn't need the incredible detail that Google provides. We also knew that we wanted to have a more visually customized map.

Unfortunately, the GM API and docs dont give an overwhelming amount of information on how to create custom map types, and even less is available for the Flash API. But something you will realize quickly is that GM requires tiles, lots and lots of tiles, which are traditionally going to be hundreds of individually sliced PNG files.

Fortunately, the Flash API gives us an easier solution. The method used to create tiles (loadTile) returns a DisplayObject. Among other things, that means theres nothing to stop you from creating animated map tiles. The code below uses Bitmap objects, but the principle is the same.

We started by creating a vector map that matched up with the Google map at its most zoomed-out level (there are lots of free vector maps on the web to use as a starting point). This meant we had a 512 pixel wide vector world map. We instantiate the map in the TileLayer class, and from there, we simply used Google's math (256px tiles, 2^zoom number of tiles) to generate all of the tiles. The vector map overlay matches with the Google Map at every zoom from there on—no PNG files needed! Demo with sample code after the jump.
Continue reading