Raised Eyebrow Blog

There’s a lot of birth talk around the office these days. On top of Emira’s rapidly approaching due date, I find the birth of a new year often turns one’s thoughts to past accomplishments and new beginnings.

We’ve got one more birthday coming up on February 1, as our studio celebrates its tenth anniversary. It’s a little dumbfounding, I’ll admit, to think that it was ten years ago that Emira and I set out on our own and hung out our shingle – in some ways it seems the time has passed in a heartbeat, while in others it feels like a lifetime ago that we were working in a corner of my bedroom.

Beyond moving our desks out of my apartment, we’ve passed a few milestones in the last ten years. I’d like to mention just a few:

• Our first client was the Vancouver Recital Society, who we’re delighted to report is still working with us. (This past year, in addition to supporting online sales for their 2009-10 season, we also launched enhancements to their home page design along with a brand-new blog.)
• In 2005, we hired our first employee – the brilliant and witty Chris Torgalson, who we’re proud to say is still a member of our team. Since then, we’ve expanded to a staff of six.
• We’ve launched hundreds of websites for hundreds of clients, ranging from social justice activists, to research institutions, political parties, health agencies, and international consumer product manufacturers. The variety has been staggering and hugely inspiring – there’s never a day when our clients don’t teach us something new.
• When we founded Raised Eyebrow in 2000, Content Management Systems were new, and mostly in use on large, enterprise-level websites. We coded our websites by hand, page by page. For about five years now, though, we’ve been developing sites using open-source CMS platforms: first Typo3, now Drupal and WordPress.
• We’ve navigated a constantly evolving technological environment, that has seen changes such as the spread of broadband access, which made online audio & video widely accessible, and the dawn of Web 2.0 and social media.
• Emira and I published our book for women entrepreneurs, distilling the wisdom we’d earned in building Raised Eyebrow into a guidebook that encourages both budding and established entrepreneurs to build businesses that reflect their values and care for their staff, clients & communities.
• We’ve begun offering workshops on social media, publishing with WordPress, and other topics. Watch for more of these in 2010 and beyond – we’re excited about extending our longstanding commitment to sharing knowledge into this new context.

We set out ten years ago to create a small, sustainable business doing what we love, and it’s incredibly rewarding to look around and see what we’ve built over the course of a decade – with a lot of help from our amazing clients and staff. We’ve got ambitious plans for the next few years, too – but right now it feels good to pause briefly and raise a virtual glass to celebrate how far we’ve come.

Vacation’s only just over, but we are hitting the ground running here at Raised Eyebrow, and there are just two days left to apply for our Front-End Developer posting. If you’re passionate about clean code and building fabulous websites, and you’re looking for a position where you can learn from some of the best code artisans in town and work for clients who are making the world a better place, look no further.

We offer a friendly and healthy workplace, a client list that includes national and local nonprofits, mission-driven businesses, and government agencies, and a very competitive salary & benefits package. If you (or someone you know) might be a fit, please check out our posting & send your resume & cover letter in by 5:00 PM on Thursday, January 7th.

There are many ways to skin the cat when it comes to putting video on a Drupal site. I’ve tried and tested quite a few methods since my first introduction to Drupal 2 years ago. I’ve used Embedded Media Field as well as Video Filter but finally settled on the combination of FileField with JWPlayer or Flowplayer and in some cases the Media Mover Module for moving files to Amazon S3 storage. I’m going to use our recent launch of the CCPA website as a case study for how we currently handle video delivery. So let’s dissect this a little.

Uploading files

The video files need to be uploaded before we display them. This is best achieved using the wonderful Filefield Module. This is quite a simple yet powerful module developed/maintained by Lullabot, Nate Haug (quicksketch), whom I’ve had the pleasure of being trained by at one of their excellent Drupal Theming workshops. Once you install and enable the module you then add a new CCK field, of type “filefield”. In our case we have a content type called “Multimedia”. We add the field to this content type. You then need to configure the following:

1. Permitted upload file extensions

In most cases this is relatively straightforward, it’s just one file type. If you’re using JWPlayer or Flowplayer it will be FLV. Both these players are built to play Flash Video files (FLV). If you have Quicktime MOV’s or AVI’s that you want to upload then you’ll need to consider different options for playing video. For the purpose of this case study we’re just uploading FLV files.

2. File size restrictions

It’s very important that you set these, otherwise you may end up with users trying to upload 200MB videos, not a very good idea. I set this low as a learning feature for clients. Any reasonably long FLV file that is over 40MB is probably not optimized as well as it should be.

3. Path Settings

I like to keep all files that admin/editor users upload in a folder called uploads so that it’s easy to manage them later if they need to be exported etc.

Multimedia File Field Settings

Create a placeholder image

Most video players require some sort of poster/placeholder image to display before the video plays. In this case I created another FileField for the placeholder image. We’ll use that later on in conjunction with the ImageCache module to achieve our desired results.

Moving Files to Amazon S3

We’ve been using Amazon S3 for storing video files on quite a number of sites recently. One reason is that we were looking for a location off the webserver that could deliver the video, without impacting the performance of the server, so that in the event of a traffic spike the webserver wouldn’t fall over. We could also have used Amazon EC2 or another CDN service for this, however as most of our clients have a very regional (BC) audience. Most CDN’s have nodes in various locations across the US and Europe and this would have served no real improvement as the nearest cached version will always be in the same place for everyone.

So if they’re uploading the files directly to the Drupal site, how to the files get delivered from Amazon S3. That’s where the Media Mover module comes in. This module has many purposes, but for our needs it simply harvests all the files uploaded via the “Multimedia” content type and moves those files to Amazon S3 so that we can deliver them from there.

Download, install and enable the Media Mover module. You’ll also need an S3 account and will need to set that up via the module setting page. You then need to add a Configuration via https://www.yoursite.ca/admin/build/media_mover/add.

Media Mover has 4 actions which it performs on your files:

• Harvest – Define/collect the files you want to perform actions on
• Process – Perform certain actions on the files
• Storage – Where to store files once the actions have been carried out
• Complete – Final actions to perform on the files

So in this case we just want to harvest all Multimedia files and store them on Amazon S3.

So for clarification here Media Mover does NOT MOVE the files to Amazon S3, it simply COPIES them over to S3 and the original files remain on your server.

Media Mover Settings

Delivering the moved Video files

So this is where the Drupal theming trickery comes in. Flowplayer and JWPlayer are both Flash based FLV video players than can be called using Javascript and that’s exactly what I do on this site. In plain english this is what happens:

1. Output the placeholder image to screen as a link.
2. Use Javascript so that when the user clicks on the image the video plays.
3. Deliver the video from the file on Amazon S3 rather than the file on the webserver (Drupal site).

We need to modify three files to achive the above:

• template.php
• multimedia.js (a newly created JS file)
• node-multimedia.tpl.php (a custom template file for all multimedia types)

template.php file

Setting up all the variables we’re going to need to use as well as making the javascript available

if($variables['field_file'][0]['view']) { //If there is a file and there is something to display...
  if ($variables['field_aspect_ratio'][0]['value']) { //Aspect ratio handling
    $variables['aspect_ratio'] = $variables['field_aspect_ratio'][0]['value'];
  } else {
  $variables['aspect_ratio'] = 'normal';
  }
  $variables['multimedia_type'] = 'video'; //Set the type of multimedia - we also have audio and interactive...
  custom_theme_get_media_mover_files($variables['field_file'][0], $variables['media_mover'][3]); //Set the filepath to the media moved filepath...
  drupal_add_js(array('videoplayerpath' => path_to_theme() .'/scripts/plugins/flowplayer/flowplayer-3.1.1.swf'), 'setting'); //Set a JS variable to retrieve later...
  drupal_add_js(path_to_theme() .'/scripts/plugins/flowplayer/example/flowplayer-3.1.1.min.js', 'theme'); //Call the player...
  drupal_add_js(path_to_theme() .'/scripts/multimedia.js', 'theme');//Call the custom JQuery to handle creating the player...
}
 
/**
 * A function that takes a file object and a media_mover element array and set the file path to
 * its media moved path on Amazon S3 or wherever it moved to.
 *
 * It uses the unique file_id identifier to match file with media_mover file.
 *
 * $file = $variables['file_image'][0];
 * $media_mover = $variables['media_mover'][{id of media mover configuration}];
 *
 * @param 		&$file A Drupal file array (by reference)
 * @param 		$media_mover A media_mover file/element array
 */
function custom_theme_get_media_mover_files(&$file, $media_mover) {
  if(module_exists('media_mover_api') && $media_mover) { // If media mover is installed...
    foreach($media_mover as $media) { // Loop through each media_moved file...
      if($media['fid'] == $file['fid']) { // If they match (file id is a unique identifier...
        $file['filepath'] = $media['complete_file']; // Replace the attached file path with the media moved file path...
      }
    }
  }
} // custom_theme_get_media_mover_files()

Let me explain one thing in regards to line 9. I’ve created a custom function and I’m passing

$variables['media_mover'][3]

to my custom function. When you create a Media Mover configuration and map it to a CCK field, it creates an array in $variables to keep track of the Media Mover object. The array is called ‘media_mover’ and the number 3 in this case is the ID of the Media Mover configuration.

node-multimedia.tpl.php

Set up the template. Create a wrapper div with the placeholder image as the background image (this is run through imagecache) and display the play button as a link with the path set to the path of the Amazon S3 file. This link will also have an id attribute of ‘multimedia’. This is necessary as it allows us to attach the player, via Javascript, to this link.

<div id="containing-block">
<div id="video-wrapper" class="<?php print $aspect_ratio;?>">
<div>
     &lt; ?php print l('<img src="/'.path_to_theme().'/images/ccpa-button-play-large.png" alt="Play this video" />', $field_file[0]['filepath'], $options = array('html' => TRUE, 'attributes' => array('id' => 'multimedia', 'class' => $multimedia_type))); ?></div>
</div>
</div>

multimedia.js file

Hook the Flowplayer to the link, with id of ‘multimedia’, that we created in the template.

Drupal.behaviors.showMultimedia = function(context) {
  var interactive_path = $('#multimedia').attr('href'); /*Get the path to the video*/
  var interactive_image = $('#multimedia').css('background-image');	/*Get the path to the placeholder image*/
  interactive_image = interactive_image.slice(4,interactive_image.length-1);/*Tidying up the interactive image path*/
 
  if($('#multimedia').hasClass('video')) {/*If the link has a class of video*/
  $('#multimedia').flowplayer( /*Initialize the flowplayer and configure the controls*/
    Drupal.settings.basePath + Drupal.settings.videoplayerpath, /*Path to the player, gotten from temaplate.php*/
    {
      plugins: {
	controls: {
	  stop: true,
	  backgroundColor: '#efefef',
	  backgroundGradient: 'none',
	  borderRadius: '0px',
	  bufferColor: '#d2d6ab',
	  bufferGradient: 'none',
	  buttonColor: '#777777',
	  buttonOverColor: '#99a134',
	  durationColor: '#cccccc',
	  height: 25,
	  opacity: 1.0,
	  progressColor: '#99a134',
	  sliderColor: '#9999999',
	  sliderGradient: 'none',
	  timeBgColor: '#777777',
	  timeColor: '#ffffff',
	  tooltipColor: '#000000',
	  tooltipTextColor: '#ffffff',
	  volumeSliderColor: '#777777',
	  volumeSliderGradient: 'none'
	}
      }
    });
  }
};

I hope that was easy to follow. Now there’s one more thing to cover and that’s Aspect Ratio.

Aspect Ratio

The issue of aspect ratio is very important when figuring out how to display video. Not so recently YouTube switched all video display to the 16:9 ratio thus setting the stage for the proliferation of the widescreen aspect ratio across the web. So how do you allow the user to upload a video and choose it’s aspect ratio. I’m sure there are other ways to do this via Metadata etc, but for our needs on this site I used a CCK field. This is a simple CCK field set with three options:

1. None (defaults to 4:3)
2. Normal (4:3)
3. Widescreen (16:9)

Aspect Ratio Field Settings

We then check the value of this field in template.php above:

if ($variables['field_aspect_ratio'][0]['value']) { //Aspect ratio handling
    $variables['aspect_ratio'] = $variables['field_aspect_ratio'][0]['value'];
  } else {
  $variables['aspect_ratio'] = 'normal';
  }

and set a variable called ‘aspect_ratio” which we apply as a class to the div wrapping the video in the node-multimedia.tpl.php:

<div id="containing-block">
<div id="video-wrapper" class="<?php print $aspect_ratio;?>">
<div>
     < ?php print l('<img src="/'.path_to_theme().'/images/ccpa-button-play-large.png" alt="Play this video" />', $field_file[0]['filepath'], $options = array('html' => TRUE, 'attributes' => array('id' => 'multimedia', 'class' => $multimedia_type))); ?></div>
</div>
</div>

We have also created image cache presets for the placeholder images to account for both aspect ratios. These are named ‘multimedia_normal’ and ‘multimedia_widescreen’ and these have the appropriate dimensions associated with them:

Image Cache Presets

So using the amazing article on A List Apart for creating intrinsic ratios for video we use CSS to resize the player based on the aspect ratio chosen by the user.

style.css file

/* -- Multimedia -- */
#containing-block {
  width: 100%;
}
 
#video-wrapper {
  position: relative;
  padding-top: 25px;
  height: 0;
}
 
  #video-wrapper div,
  #video-wrapper embed,
  #video-wrapper object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
 
  #video-wrapper.normal {
    padding-bottom: 75%;
  }
 
  #video-wrapper.widescreen {
    padding-bottom: 56.25%;
  }
 
  * html #video-wrapper {
    margin-bottom: 45px;
    margin-bot\tom: 0;
  }
 
#video-wrapper #multimedia.audio {
  display:block;
  height:100%;
  margin:1em 0 0 0;
  text-align: center;
  width:100%;
}
 
#video-wrapper #multimedia {
  display:block;
}
 
  #video-wrapper.normal #multimedia img {
    /*margin:118.5px 0 0;*/
    margin:32% 42%;
  }
 
  #video-wrapper.widescreen #multimedia img {
    margin:22% 41%;
  }

And the end result looks something like this http://www.policyalternatives.ca/multimedia/matthew-poverty-and-looking-after-each-other-tough-times. They haven’t added any widescreen content yet, just testing content.

So what are the advantages of doing things this way?

1. You can easily use any player to play your flash files (all you need to do  is change the path to your player and a few configuration params in multimedia.js)
2. All your video content is hosted on and delivered from Amazon S3. But there is also a copy on your local server in the event of something going wrong on Amazon S3
3. You don’t have to worry about your video looking skewed due to aspect ratio problems
4. You can add many other apsect ratios pretty quickly
5. The video file is still downloadable when javascript is not present or disabled

I’d love to get feedback on how other do this, please leave a comment or send me an email and let me know how you deliver Video content on your site.

We’re expanding our team here at Raised Eyebrow, and this time we’re looking for a Front-End Developer/Themer — someone who loves building websites, and is looking to extend their skills with Drupal and WordPress.

Beyond our roster of fantastic, progressive clients, we offer a positive & healthy work environment, beautifully remodeled heritage office space, and a team of web experts who love what we do and are keen to share knowledge and produce top-notch work.

Intrigued? Know someone who might be a fit? Check out the job description and get in touch.

We are very proud to unveil a project we’ve been working on for several months now: a redesign of policyalternatives.ca, the online home of the Canadian Centre for Policy Alternatives. Canada’s leading progressive research institute, the CCPA is a prolific publisher of reports and studies, books, articles, commentary and fact sheets on issues ranging from income equality to environmental policy, privatization of public services, and beyond.

They are highly respected, but like many organizations working towards policy change, they don’t always reach as broad an audience as they might hope; not many people have the time and inclination to read an in-depth research report, so in recent years they have been creating more bite-sized, easy-to-digest content in both written and multimedia formats. As the range of content has grown, though, so has the need to cross-reference related materials — so the CCPA’s website needed to both invite visitors to browse through an extensive library in an intuitive and approachable way, but also allow people seeking more in-depth content to locate related materials quickly and easily. (One of our developers describes the complex interrelationships between the CCPA’s publications as “like Facebook for documents.”)

Their five year-old website, although rich in content and highly trafficked, didn’t offer visitors any way to easily share the CCPA’s content with their social networks, whether through Facebook or Twitter, or even through their own publications, blogs or presentations. Exchange of ideas is the CCPA’s raison d’etre, so it stands to reason that above and beyond extending the website’s “share this” features, the organization would benefit from encouraging online visitors to use and share its content — and they do, using a Creative Commons license.

This project was a complex one on several fronts, as we wrestled with improving navigation through the site (both via menus and site links as well as with improved search tools); updating the site’s look and feel; and migrating the extensive site content (along with the aforementioned relationships between content items) from a commercial CMS platform into Drupal.

Oh, and we also set up a shopping cart (for books, memberships, donations and journal subscriptions).

There’s a real sense of accomplishment here at Raised Eyebrow when we look at the final result, but of course on the web, there’s no such thing as a final edit. Our best hope, in fact, is that we’ve helped to create a solid platform upon which the CCPA can continue to build and extend over the coming years. So while right now we are celebrating the grand opening, the real fun in some ways is still to come. I’m sure we’ll see the CCPA continue to play a leadership role when it comes to presenting research online in accessible and innovative ways.

Once again we have space available for sublease in our office. We’re going through some changes here at the office which mean we’re now offering a slightly different configuration from what we’ve offered in the past. We have two options available: either individual desk rental in our larger office space, or, if it suits your purposes better we also have an enclosed office available which would fit up to two people.  Details are below. I can’t say enough about how lovely this building and the people in it are (plus we’re kind of swell folks to be around too).

For Rent in Shared Space:

Single Desks in Common Area: $400/month each
Raised Eyebrow has two desk spaces available for rental in our bright, spacious office in the newly-renovated Flack Block in Gastown. This five-story heritage building has just been renovated to top-notch environmental standards (LEED Gold, for those in the know), and features high ceilings, original brick walls — and our favourite feature, windows that open and let in the fresh outdoor air.

Your rent includes high-speed internet, a phone line, access to two different fully kitted out meeting rooms, a beautiful kitchen and eating area that’s decked out with energy-efficient appliances, secure bike storage and showers, and lots of opportunities to interact with some of Vancouver’s brightest sparks of progressive change — our neighbours include Renewal Partners, Penner & Associates, Forest Ethics, Tides Canada, Bullfrog Power, Octopus Strategies, and Rainforest Solutions. The building is highly secure, with fob access at every entrance, and alarms on both our floor and within our suite.

We’re located on the corner of Hastings & Cambie, with fantastic transit access, great lunch & coffee spots all around, and right across the street from the greenery of Victory Square Park.

On single desks we require a minimum 3 month commitment.

Or if you’d prefer:

Contained Office Space in Raised Eyebrow: $850/month
Raised Eyebrow has one self contained office available for sub-rental in our bright, spacious office in the newly-renovated Flack Block in Gastown. This self-contained office has a sliding door glass door to block sound/for privacy and features a long window along one other wall. The office is large enough to fit two people. The five-story heritage building has just been renovated to top-notch environmental standards (LEED Gold, for those in the know), and features high ceilings, original brick walls.

Your rent includes high-speed internet, a phone line, access to two different fully kitted out meeting rooms, a beautiful kitchen and eating area that’s decked out with energy-efficient appliances, secure bike storage and showers, and lots of opportunities to interact with some of Vancouver’s brightest sparks of progressive change — our neighbours include Renewal Partners, Penner & Associates, Forest Ethics, Tides Canada, Bullfrog Power, Octopus Strategies, and Rainforest Solutions. The building is highly secure, with fob access at every entrance, and alarms on both our floor and within our suite.

We’re located on the corner of Hastings & Cambie, with fantastic transit access, great lunch & coffee spots all around, and right across the street from the greenery of Victory Square Park.

On the office space we require a minimum 6 month commitment.

Contact:
Contact us at turningheads [at] raisedeyebrow.com if you’re interested.

The past few weeks have been quiet here on our blog, and as often happens, that silence has been an indicator of just how busy things have been here at Raised Eyebrow headquarters. We’ve been putting the final touches on some exciting new websites that we’re very proud to share with the world. Two major redesigns have just launched – one for a wonderful nonprofit group here in British Columbia and the other for a foundation that’s changing the face of lung cancer research across the United States.

The Deaf Children’s Society of BC offers programs, support and resources for families of young children with hearing challenges that range from parent groups for new parents of deaf or hard of hearing infants, preschool and summer programs for young kids, to a library and bookstore where families can access print resources. Their small staff includes several speech-language pathologists and sign language instructors, and they came to us looking to extend the reach of the services they are able to offer through the web. We helped them extend their resources online through the use of instructional videos for new parents to learn sign language that can then be used with their children as they develop language and reading skills.

The new website is a clean but cheerful home for their fun, informative, instructional videos as well as detailed information about the society’s programs and services. Parents can learn sign language in child-sized portions – with signs grouped in themes like animals, colours, numbers, and of course the alphabet, which they can then use to help their young children with developing language skills.

Uniting Against Lung Cancer is a nonprofit foundation that formed in 2001 as Joan’s Legacy, in honour of 47 year-old New Yorker Joan Scarangello McNeive, who never smoked, but died after a valiant battle with lung cancer. Her family and friends rallied and established the foundation to fund research and raise awareness about the disease; over the years it has attracted partnerships with other family foundations, and now Uniting Against Lung Cancer serves as a connector for groups across the United States who are raising awareness and funds. To date, the foundation and its partners have awarded over $6 million in direct research grants in 20 different states.

We worked with Uniting’s staff and board to develop and implement a transition strategy for their online presence, as they re-branded from Joan’s Legacy to Uniting Against Lung Cancer. The new website better reflects the scope and reach of the foundation’s work, and showcases their mission, partners, and events in a design that evokes a deep breath of fresh air on a sunny day.

On a technical note: Both sites run on Drupal’s open-source CMS platform, which gives them a strong foundation on which to develop future site enhancements – something that’s increasingly top-of-mind for our clients. We’re finding that more of our clients are looking at an iterative approach to making site adjustments, and even after a major redesign such as these ones, there are often “wish list” items that we can add to a site over time. We find Drupal provides a robust framework that allows this iterative approach to work well.

I’ve written before about the cost of websites, which is really hard thing to nail down. Like building a house, it depends how big/how fancy that house/website needs to be before a price tag can be attached. That said, we’ve been doing this a long time now, and recently we’ve been talking about rethinking our development model at Raised Eyebrow, which has some ramifications for our pricing and would allow us to answer the “what does a website cost anyway?” question a bit more directly.

On the development model side, we’re moving towards more of an Agile Development framework, which aligns really nicely with our company approach and philosophy quite nicely. For those of you that aren’t familiar with Agile development I do recommend following that link, but in a nutshell I can tell you that it means a more nimble process, more responsive to needs (in our case our clients’ needs), and generally means slower growth over time all of which fits really nicely with our vision of the web, community building and organizational/business sustainability.

I’ve written before, and waxed poetic over many a cocktail about new shiny features in the world of the interwebs taking priority over actual use value. Often we have clients coming to us, enticed by the latest cool new web tricks, and wanting to implement them — an understandable impulse. Often, we talk our clients down a notch when we know that they don’t have the internal resources to support said cool trick, or that their (let’s face it often limited) funds could be better spent elsewhere. In an Agile development model we’d be helping our clients focus on a smaller and defined set of features, rolling those out initially and then working with them to monitor the value and strategic impact of those features before we undertake further development. We already pride ourselves on having long term relationships with our clients where we’re happy to act as their trusted advisors when it comes to all things web, so tying that consulting relationship to a plan for a phased feature rollout is not a big new step to take. The new part, is the scaling back of initial specifications.

You may ask, why would a business (that is looking to make some money afterall) want to scale back specifications and features off the top? For us, it’s about doing our best work and supporting our clients to do their best work. It’s about making sure that clients are spending funds wisely so that they have something left over for features and consulting they’ll want in the future. Websites are fantastic in their ability to evolve and change, making sure our clients approach the work we do with them as a starting ground for a longer conversation, rather than a race to the finish line is one way that we feel we can better serve our clients and the non-profit sector we work in.

So what does a website cost under this model anyway?

For the first time ever we feel like we really truly have an answer to this question. In our case $15,000 (plus GST if you’re in Canada). And what do you get for that?

• You get a website. Not just any old website though. A website designed and birthed by a team of experts with many, many years of experience in this field.
• You do get an original design process.
• You get a rock solid Content Management System (Drupal), with an integrated search, that can be extended to add all kinds of cool features in the future.
• You get a site that is optimized for SEO both in its overall structure and its technical framework.
• You also get Information Architecture/Interaction Design consulting and ongoing strategic advice throughout the project.

You also get two features, things like:

• A basic events calendar, kind of like the one you see here at the Chan Centre.
• A standard publications/resources catalogue like this one at Pivot Legal.
• A news listing like this one for the Ending Violence Association of BC.
• A customized blog.
• An image gallery.
• A video carousel like the one on CaroleJames.ca.
• Something else that your organization needs specifically (that can be defined within a basic scope) like the integrated custom Job Applications form we did for Covenant House.

Why only two features? Well two features fits within our budget limit of $15,000 (obviously if you have more budget, we can expand the features), and two features is a great place to start. With two features up and running on a website we can work with you to make sure that they’re actually being used by the organization and users (through statistics monitoring), and we can then create a roadmap for building out new features or further customizing the existing ones to do even more for you.

The idea is, that we start with $15,000, get you an excellent and useful website that helps to meet your short term needs and helps you build on your long term communications goals. And then, ideally, we set up a retainer contract with you to have regular check-ins (quarterly, bi-annually, etc whatever works for you), and we help you plan out future feature roll-outs, strategies for enhancing the website and your online communications in general. We play an ongoing role in your communications strategy by regularly monitoring your website statistics and usage patterns, and we help make sure your budgets are being wisely spent over time.

But what about Social Media, is that a feature?

Yes, and no. Adding a link to your Twitter profile or integrating your latest Twitter posts into the website is easily done, and would be included in the project price. Ditto for adding Facebook links or integrating an RSS feed from the site into your Facebook Page/Group/Profile. By default (where applicable) we can include a Social Bookmarking widget that allows people to bookmark, repost, or email your site to a friend/social networks. Ditto for adding an existing email list signup box. Actual online strategic planning is another story. If you need help with creating a strategy for online communications, we’ll do that with you as well, but that would be a separate project.

Between my personal background in — and passion for — music, and the fact that many of our nonprofit clients hail from the arts sector, I try to keep an eye on how arts groups are using social media to achieve their missions. In particular, lately I’ve been looking around on Twitter to see which Vancouver arts groups are doing interesting things in the Twitterverse. I’m excited to see how many organizations are reaching out to new and existing audiences via Twitter, and I thought it might be of interest to some readers to hear about some Vancouver arts organizations who are doing a lot with 140 characters.

My focus tends to skew towards music, and classical music in particular, so you’ll definitely notice that bias here. I’ve also tried to limit the list to groups who are twittering actively, and conversing rather than simply broadcasting one-way announcements.

• Chan Centre for the Performing Arts at UBC*: Rachel Lowry at the Chan is doing a fantastic job of highlighting all kinds of interesting arts news, as well as sharing information about their upcoming events.
• Many of the big performing arts groups in town are making good use of Twitter, including the Vancouver Symphony Orchestra, and The Arts Club. But the leader of the pack may be Ling Chan at Vancouver Opera, who has been doing a bang-up job of extending the opera company’s reach beyond the usual classical-music suspects. The opera’s Twitter feed features fun & interesting opera news, as well as exclusive offers for Vancouver Opera fans. In related social media news, the organization has been reaching out to bloggers as well, through their innovative Blogger Night at the Opera.
• World-renowned men’s choir Chor Leoni* has a great feed, which I believed is managed by arts marketer extraordinaire Bruce Hoffman. My favourite recent tweet from them pointed to a video of Bobby McFerrin leading the World Science Festival audience through a fascinating musical exercise.
  
• Pacific Cinematheque offers a delightful twist on the self-promotional announcement: each time they mention a film they’re screening, they include a quote from the script. (A recent example: “‘You’re wearing the wrong shade of lipstick, Mister.’ THE BLUE DAHLIA 9:20pm”.)
• Saturday Afternoon at the Opera, the CBC’s weekly opera show hosted by Bill Richardson (one of my all-time favourite Vancouverites), is relatively new to Twitter, but already making a splash with their contests to summarize opera plots in 140 characters.
• musica intima*, the a cappella (and conductorless) vocal ensemble with whom I used to sing, has a lively Twitter feed (though it seems to be on summer hiatus) written by two staff members and one of the group’s twelve singers. I particularly enjoyed the updates they posted while the group was on tour.
• The Dance Centre’s Twitter feed covers all things dance-related. I love that they write about everything from serious dance news to the latest episode of So You Think You Can Dance.
• For a couple of great examples of how festivals (whose “seasons” are short-lived by nature), check out the Vancouver Folk Fest, Vancouver Jazz Fest, and DOXA feeds.
• Pacific Baroque Orchestra is another Twitter newbie, but they’re posting actively about baroque & classical-era music and joining in the conversation.
• Finally, one of my favourite Twitter feeds comes from the Vancouver Public Library. They keep me up to date on everything from special collections I may not have heard about, to author readings, to branch closures. And they’re fun and funny.

Who have I missed? I’d love to hear of other examples. Please leave your suggestions in the comments.

(* = Raised Eyebrow clients)

As of Tuesday, with each new Drupal 6 website we build, we will be providing access to an online manual. Like our paper manual, the online manual describes the basic functions of Drupal in easy to understand language and has customized client-specific content. But the new format also has many new benefits.

Book Module

The online manual uses the Drupal book module, which is a great because the book module lends to organizing things… like a book. The book module automatically creates a listing of the child entries, like a table of contents. You can order the child pages in any way you choose. I also like the book module because is has a printer-friendly version of each page. It does a really nice job of stripping out the unnecessary stuff and optimizing the content for printing, so you don’t get pages broken in half or extra white pages when you print.

Information in a New Dimension

What I loved about moving from a Word document to an online manual is how easily you can cross-reference. With the old manual, you could footnote or reference other pages, but ultimately it had to be a very important reference to disrupt the reader in this way. Now with the online manual, text and images can be linked to other sections of the manual. So if I think a word sounds a little jargon-like, but is still useful, I can add it to the glossary and link the word to its definition. This is great, because it allows us to introduce some language that we might have otherwise shied away from using. This is beneficial in the long run because it helps us develop a more accurate shared language with our clients to talk about their websites.

Keeping the Manual Up to Date

The best thing about the new manual is that if I discover an inaccuracy or a better explain something, I can simply log in and edit the site. Clients instantly have access to the up to date manual. Also, if a client adds a new feature, I can simply add a new page to their online manual and they will instantly have access to the file. This saves sending updated .pdfs and having many trees wasted as manuals are reprinted.

Works Great for Remote Training

We’ve also been experimenting with online meetings for trainings with remote clients and the new manual is great for this. I have three online trainings this summer!

Have You Ever Searched for Drupal Help?

Uhg! Lots of the information available online is too techie for words! Seriously, try Googling “Help Logging Into Drupal” and you’ll see that you get the weirdest stuff! Our help manual covers all the basic functions of editing and creating content for your site. Clients can access it from anywhere and it is constantly growing and evolving. There is a text-based search, allowing you to search the entire contents of your manual instantly, with a listing view of relevant results. It’s a help manual that really helps!

_______________________________

Thanks to the whole team at RE who helped conceive of, build, create content for, and test the Raised Eyebrow Help Website!