WordPress for Collaboration

I gave a ten-minute talk on this topic for the Tucson Digital Arts Community WordPress Workshop on January 14th, 2009. The talk could have been titled “How to Build a Private Twitter for Your Group With a Custom WordPress Theme” since that is the main idea. This is the text of my talk.

wordpress-for-collaboration001

I want to share with you an example of a non-traditional use for WordPress. As I’m sure you may know, WordPress is the most popular blogging software on the market. It is easy to use and customize, makes web publishing simple—it gets the job done. What you might not know, however, is that it does more than just blogs and simple CMSs.

I’d like to share one specific example of how I use WordPress to collaborate with a remote team. I figure I can kill two birds with one stone: I am going to show you how to use a WordPress custom theme for collaboration in a work environment, and at the same time I hope to encourage you to explore alternative uses of WordPress.

I live in an RV and travel around the country, so most of the time when I’m working with my colleagues, I am working remotely. That means that how I collaborate with a dispersed group of people is extremely important since we don’t have lots of face to face time. Even if you aren’t a stay-at-home or remote worker, you still have to collaborate, right? Even if it means sending an instant message to the guy in the cubicle five feet away from you.

dcr0744l

Who’s done that before? I think we all have. My point is that even if you are in a traditional office environment, it doesn’t mean that all your interactions happen face to face.

We all know that good communication is the key to getting things done. And I think my example tonight applies to in-house web design and development teams just as much as it does to freelancers or remote workers like myself that typically use email, instant messaging, and project management software to collaborate; those technologies take the place of the face-to-face interaction.

What I am doing right now?

Collaboration might not be the right word… I’m not going to cover what it means to manage projects with clients and how to collaborate on tasks and timelines. Instead, I want to talk about the simple communication that happens all day long. Answering this question, “What I am doing right now?”

How do you normally share that type of information with your group? And how do you keep tabs on your coworkers’ updates as well? Typically that would be done via email, phone calls, short meetings in the hallway, putting colored cups on top of your cubicle (hey—don’t laugh at that one, it works really well in some situations).

My sister once worked in an office where one way of saying “what am I doing right now” was exactly that: they had a red cup that meant “I’m busy”, and a blue cup that meant “I’m free.”

When these traditional methods don’t work, or if they aren’t practical, we often look to other tools for sending out quick and simple updates. Updates that are sent without much preparation or the need to open software. Updates that are asynchronous—meaning other people don’t have to respond right away—the message will be there for them when they are ready to read it.

Twitter

Lately it seems like there are more and more products being created to handle this type of communication. One great example is Twitter. It’s awesome, right? You get 140 characters to describe what you’re doing or how you’re feeling, or to post a link. Twitter is extremely popular because it gives you that “chatroom” feel of constant conversation. It’s quick and easy to post but can be engaging and effective.

It can be a really great way to simulate being in the same room with someone.

wordpress-for-collaboration0081

Twitter users share their personal updates with each other by answering the question, “What are you doing right now?” That question is typically a label on the text entry field on the Twitter website, for example. It’s the same action as updating your Facebook status to say you are having a bad day, or what you movie you are going to see that night. You just want to share a quick update without writing an epic saga or opening up your blog software to write a new post.

Twitter has changed how people interact. It’s effective precisely because it’s so simple. No tags or categories, no spellcheck, no formatting, just post it and it’s out there for all the world to see.

But what if you just need to communicate with one small group of people?

wordpress-for-collaboration0091

About a year ago, right here in Arizona, the makers of WordPress (Automattic) were having their yearly company gathering just north of here, in Oracle. They were thinking this same thing, and there they came up with a theme called Prologue that replicates Twitter-like interactions within a WordPress website.

Just like Twitter, Facebook, and other social web apps promote lifestreaming, Prologue promotes workstreaming for your team. Workstreaming is the publishing of work-related activities and events to your remote colleagues. Some might say that it’s also a way to convince your boss that you’re actually working!

What are you working on right now?

Prologue helps you answer the question, “What are you working on right now?”

My work as a consultant sometimes means being part of a small team—for one team I work with often Prologue has become one of our most-used communication tools. Besides constant updates on what we’re doing, we use Prologue as a scrum tool: every morning we all post our daily goals and roadblocks.

We also use it for sharing links and tips. But the main purpose for using Prologue is to update each other on our status.

Prologue helps you collaborate

How does Prologue help you collaborate better? Prologue is successful because it requires almost no work to post an update. The easier you make it for your team to post, the more they will use it.

  • It encourages short updates.
  • It allows a quick post on the home page—there is no need to view the admin site.
  • It allows comments so you can create a conversation around what you posted.
  • You can add tags and categories just like normal blog posts in WordPress, but you don’t have to. Like Twitter, you can just type and post.
  • You then use RSS feeds to track your coworkers’ updates. Or if your the boss, you sit there all day and hit Refresh! (Just kidding!)

Prologue is free, and easy to set up and use. All you have to do is download and install the theme, then enable it. It’s that easy. Even easier, you can sign up for a free WordPress.com account—it’s a default theme there, so you don’t even have to download it.

Here’s how easy it is to start using Prologue with a free WordPress.com account.

  1. After you’ve signed up for a free WordPress.com blog, log in and enable the theme.
  2. Then go to the blog home page, and post an update.
  3. Invite other users to join by adding them to the account.

That’s it!

Based on the default WordPress privacy settings, your Prologue setup can be public, or password-protected (meaning available only to your group). The password-protection is available with WordPress.com by default—if you are running your own WordPress site, then you’ll need to implement password protection on your own.

Try it for yourself

View the Automattic team’s live Prologue demo, and I’d encourage giving it a test run on your own WordPress site.

Discouraging Image Theft

Recently I received a question from a colleague regarding image theft and how to prevent it. The sad truth is that you can’t. There are techniques to discourage downloading and reuse of your preciously-crafted images, but they generally aren’t 100% effective or user-friendly for your normal site visitors.

The reality of unwanted image downloads is a bit depressing: there is no guaranteed way to protect your images from being taken—the most you can do is discourage it.

First, make sure your copyright notice is clearly posted on each page indicating that downloading or using images without permission is not allowed. In doing so you are legally holding your site visitors accountable if they steal and reuse your content.

If you suspect that image search engines or IE-only users are the culprits, using client- and server-side techniques might help alleviate the problem. But if you are looking for a universal solution, editing the images is your best bet since all these techniques can be circumvented by taking screenshots, using screen scraping tools, or simply viewing the locally cached images.

Client-side techniques

  • Disable the right-click menu
  • Disable the shortcut menu in Internet Explorer
  • Use a transparent image overlay

There are JavaScript solutions for disabling the right-click contextual menu; unfortunately, it will only deter a few people. Anyone that is intent on stealing images can still do so. In older versions of Internet Explorer you can disable the image shortcuts that appear when you hover over an image; again, if that is your target browser (or if you suspect that’s where it’s coming from) then implementing IE-specific techniques might work.

Most right-click disabling scripts rely on browser-specific functionality or JavaScript, making them unreliable in other browsers. The downside is that you risk annoying your real customers by removing expected menus and links.

Another technique—which Flickr employs—is the transparent image overlay. This involves layering a transparent GIF over the top of the image you wish to protect. When the image is right-clicked and saved, the person assumes they are downloading a JPG but instead get the transparent GIF.

From Flickr’s download prevention help text:

Preventing people from downloading something also means that a transparent image will be positioned over the image on the main photo page, which is intended to discourage people from right-clicking to save, or dragging the image on to their desktop. By “discourage” we do mean simply “discourage”. Please understand that if a photo can be viewed in a web browser, it can be downloaded. The transparent image overlaid on the photo will not keep your images safe from theft, and is intended only as a slight hindrance to downloading.

Using Flash to display images is another method to discourage image theft (since Flash right-click menus can be customized), but it isn’t foolproof. Just like these other techniques, people can simply take a screenshot to capture the image.

Server-side techniques

  • Block image search engines
  • Disable image hotlinking

Image search a popular way to access images. If you notice a lot of traffic from image search engines, try blocking them with a rule in your robots.txt file. See Remove an image from Google Image Search for more details.

I also recommend disabling hotlinking by adding rules to your site’s .htaccess file. Doing so will not only potentially save you bandwidth costs by stopping other sites from reusing your images and content, it will prevent directly linking to your images without your permission.

Image content editing

  • Add watermarks
  • Use very low quality images

Although altering the image affects how it looks and works on your site, it is quite a bit more effective than simply trying to disable downloading or saving. Again, this is only a means to discourage theft — skilled graphic artists can remove a watermark and still have a usable image.

Using low quality images could also help, but finding a good balance between impressing your customers and deterring theft can be difficult.

Bottom line

If someone really wants the image, they will get it. Using the techniques described above will discourage most people from downloading your images, but remember that posting your images online means you run the risk of anyone downloading and reusing them.

Further reading

Color Blindness and User Interface Design

As a user-centered designer and developer I am always looking for ways to improve interfaces to be useful to all people, including color-blind people. Particletree has a great guide, Be Kind to the Color Blind [editor’s note, October 2012: link now offline], that nails the essential pitfalls and best practices in designing for color-blindness.

My rule of thumb is to use color only as a secondary indicator. This means that an important detail in my user interface should not rely on color alone to indicate meaning.

This type of design decision came up recently in my work on DF Studio. As part of a redesign for version 5 of the software, the design called for colored icons to show status for a photographer’s online portfolio. A green icon for an active portfolio and yellow icon for a disabled one (a disabled portfolio is not accessible to public viewers).

portfolio-status-version1

The problem with the icons being only differentiated by color is that a color-blind person that can’t distinguish yellow versus green would not be able to easily know the portfolio’s status.

The solution was simple: add a lock overlay to the disabled yellow icon. You can now easily tell that one is “locked” and one is not.

portfolio-status-version2

It is always good to run your design through a color-blind testing tool like Colorblind Color Filter or Vision Simulator. The DigitalFusion development team is fortunate in that the CTO of the company (who is also our product development manager) has a color vision deficiency; since he is constantly looking at the interface we have a way to find color-blindness issues in early stages of development.

If you work on websites or any kind of visual user interface, I would highly recommend reading the Particletree article, including the Additional Reading links. Knowing about the problem is half the battle, and you’ll be able to keep color-blindness in mind when developing and designing your interfaces.

Google's SEO Starter Guide

Google now offers a guide in PDF form to get you started with SEO best practices. The guide is chock full of great tips on navigation, meta elements, website promotion, headings, and much more.

So, the next time we get the question, “I’m new to SEO, how do I improve my site?”, we can say, “Well, here’s a list of best practices that we use inside Google that you might want to check out.”

Read more and download the PDF guide at Official Google Webmaster Central Blog: Google’s SEO Starter Guide.

Project Update: CPi Syndication

cpi-screenshot

On January 21st, 2009, DigitalFusion announced the new CPi Syndication website.

The site was released today and has been in development for over 1 year. The new site is completely powered by DFStudio and our entire software team contributed to the project — Michael McHugh did the design for the site and Lance Willett implemented that design while Matt Gile and Michael Rush worked on changes and extensions to our DF Studio system to meet CPi’s requirements.

CPi specializes in the syndication of the highest quality American and international photography. You would normally need to be registered user to access the images, but CPi has teasers on their home page that give you an idea of the type of photography they offer.

I handled the front-end development for the new site, including implementing the design in HTML, CSS, and JavaScript as well as integrating it with the backend framework (written in Java). The team has been very busy with client projects as well as continued work on DF Studio, DigitalFusion’s flagship web application for professional photographers (we recently released version 5 of DF Studio, but more on that in a later post).

For Sale: Discount SXSW Interactive 2009 Pass

UPDATE: Sold! Thanks Vincent.

I have one (1) registration for SXSW Interactive 2009 available for sale at a discounted rate. Since I purchased it early (last September) the face value is $375, which saves you $75 over the rate if you register before February 13, 2009—and $120 over the walk-up rate.

By SXSW rules I can transfer it to another person, so please contact me if you are interested.

(Why is it for sale? I planned on going this year, but am now unable to attend.)