Thoughts on Design and Fly Fishing

July 31, 2009 - Jesse Korzan

Lately I've been spending more time in the rivers near my house. As I endeavour to get my line out, trying not to hook myself, there have been moments when I feel like I am finally "getting it".

Unity 3D TGIF & Workshop July 24th, 2009

July 21, 2009 - Jordan Willms

Work at Play is excited to be sponsoring and attending this upcoming not-to-be-missed event for Unity developers, those wanting to learn about Unity, and those looking to network and socialize with like-minded gaming folks. To celebrate the launch of the Vancouver Chapter of Unity Users Group, dimeRocker.com in partnership with Unity Technologies invites all local game, web, and iPhone developers to a premiere industry Unity Networking TGIF followed the next day by a Unity Skills Workshop.

WorkAtPlay.com How It Was Made: The Slide Effect

July 17, 2009 - James Andres

The second installment in our "how it was made" series for WorkAtPlay.com. In the first part we covered flip and scale effect used on the home page. This post will dive into the slide effect used to navigate between site sections. Before we jump into the code, I was asked a few times why we didn't just use the jQuery ScrollTo to make the sliding effect.

Konigi : Tools and content curator for UX designers

July 09, 2009 - Jesse Korzan

Konigi is a great website for UX professionals and those involved in the design of websites.

We love the Konigi OmniGraffle tools at our office; they are an indispensable tool in my bag of tricks.

Not your ordinary design gallery

I am a big fan of the showcase and blog. They find unique and compelling aspects that deal with all sorts of design problems. It's fast become a daily stop and a resource I'll flag for almost any new project.

Since we use Drupal a lot (like this blog), we noticed it's a fine Drupal install. I appreciate the subtle details, especially enjoying how the tagging is done, nice big images in the postings, and the home page design.

And it's very encouraging to see our own work in the showcase.

A Healthy Online Community is Like an Art Opening

June 25, 2009 - David Gratton

A healthy online community is like an art opening. For the last year or two we've been using this analogy inside Work at Play when consulting with clients and especially when designing products like DEQQ. A vibrant community is like an art opening. One goes to the art opening and it has a particular style and theme. It has its own culture based on what the staring artist is like and the art she creates. Maybe it's black tie, champagne and caviar or maybe it's blue jeans, Jim Bean and BBQ wings. Either way we understand the culture from the moment we enter.

WorkAtPlay.com How It Was Made: The Flip and Scale Effect

May 29, 2009 - James Andres

There has been great reception to the Work at Play website design and effects. We have received several emails from intrepid geeks wondering how we pulled off all that cool jQuery eye-candy. After writing a few of these "how it was made" emails I think a blog post is in order. Without further delay, here is the behind the scenes story on WorkAtPlay.com!

The Flip and Scale Effect

On the WorkAtPlay.com homepage we use the jQuery Flip! plug-in in combination with some custom animations to give the "Flip & Scale" effect. This is a little more complicated than one might think, and deserves some explanation:

• User clicks on a work sample tile image.
• The click is caught using a standard jQuery $(elem).click() handler.
• Due to how the Flip! plug-in works it isn't possible to just flip the work sample tile directly. Instead we replace the tile with an empty div of the same colour and perform the flip on that new div. We call the new empty div the "flip_side" because it will actually become the flip-side of the work sample tile.
• The flip_side div is placed using absolute positioning directly on top of the work sample tile. The work sample tile is then hidden with CSS to keep it out of the way.
• Now, finally, the Flip! plug-in is triggered on the flip_side div.
• When the flip_side div is finished flipping the Flip! onEnd call-back is triggered. We use the onEnd call-back to insert the content for the work sample's "flipped side". This content is cleverly ready and waiting inside a hidden part of the original work sample tile (view source on the WorkAtPlay.com home-page to see for yourself). Oh, we insert the content with a basic $(flip_side).html(flip_content.html())
• Ok, so far we've got a div called flip_side that contains the right content. But it's still really small and the content is all scrunched up. How do we make it bigger? The scale effect is solved by the jQuery $(elem).animate() method plus some handy CSS positioning
• The tricky part of the scale effect is figuring out how big it should scale and to what X and Y pixel co-ordinates it should move to. This is accomplished by the following formulas:
  • flipped_side.top = $('#work-page .wrapper').offset().top
  • flipped_side.left = $('#work-page .wrapper').offset().left
  • flipped_side.width = $('#work-page .wrapper').width() + 1
  • flipped_side.height = Math.ceil($('.work-sample').length / NUM_WORK_SAMPLE_COLS) * $('.work-sample:first').height()
  jQuery handles the actual animation for us, awesome!

What You Should Know About Drupal Update / Upgrade Management

May 26, 2009 - James Andres

Drupal should NOT be installed with the "downloaded and unzip" method.

• Check Drupal core out from CVS. See Moshe Weitzman's Drupal Best Practices
• The core "Update Status" module is a life saver. See the Update Status project homepage on Drupal.org - which is in core as of Drupal 6.x. Enable the email notification feature on all live sites, sit back and wait for your Drupal sites to tell you when they need an upgrade.
• Using the install_profile_api module is a great way to update/upgrade Drupal. Check out the Install Profile API project on Drupal.org
• Every change to the system should be done with a hook_update_N() See: http://www.tributemedia.com/blogs/james_glasgow/updating_drupal See: Updating tables: hook_update_N() functions See: Dark arts of Deploying Drupal by Drupal Guru Jeff Eaton

The Three Drupal Commandments

May 26, 2009 - Jordan Willms

It is not as if these were passed down from Mount Sinai, but they are still pretty darn important for any Drupal based project or website.

Here are the three commandments that govern any work that our teams do with Drupal. Doing so increases quality, and minimizes costs (something that we know our partners appreciate in this economic climate).

16 things to check before launching a CMS based website (e.g. Drupal)

May 20, 2009 - Jordan Willms

It is always smart to sanity check a website before deploying it into a production environment. Whether this is a brand new website, or a upgrade to an existing website, there are a laundry list of things to check before proceeding. Humans are forgetful people. Checklists are not. That is why Work at Play created a "Before Launch Checklist" are part of our Process Library (which we'll slowly be publishing out over this blog as time goes by) Here is the checklist (which can also be downloaded in PDF above). This is by no means an exhaustive list.

Design

• If this is a website, does it have a custom favicon?
• Has the entire site been proof read? Who did it?
• Have you checked all the standard browsers? FF/IE/Safari/Chrome?
• Does the site still work with Javascript off? Who tested this?
• Are all pages W3C standards compliant? Who checked?
• Have all design assets been packaged for delivery to the client? (e.g. PSDs, FLAs, etc)

SEO Basics

• Are titles SEO friendly? Are meta title & description added?
• Does the client have an analytics package? Has the code been integrated?
• If the is an XML Sitemap, has the XML sitemap been submitted?
• Is the page's title in an H1 tag? (Not the site name!)

Drupal/CMS (if applicable)

• Make sure automated tasks are setup (i.e. cron or cron.php)
• Have development modules been deactivated removed from the production website?
• Is this an upgrade? Has the maintenance page been styled? Has the client been notified about the outage?
• Are on-screen error messages disabled?
• Are performance settings turned on? Caching? Compression?
• Is there a backup strategy for files & database?

This checklist is living document -- please let us know anything you believe we are missing and we'll improve the list.

Estimated Hours Module for ActiveCollab 2.x (UPDATED)

May 13, 2009 - Ronn Abueg

When you are a digital agency, you have alot of choice when selecting software to keep your teams productive. There are a wealth of software choices out there, including Basecamp, Unfuddle, etc. But, we needed a solution that we could host ourselves. ActiveCollab was a perfect match for our teams. However, not everything can be perfect. ActiveCollab was missing a few features which we've been adding through its extensible architecture. Our talented developers vowed to fill that gap. One gap ActiveCollab has is a lack of estimated hours on tickets.