News Flash

Want to make extra cash? We just launched http://carsonified.com/affiliates!

Tagged: Blogs

5 October 2006

We live in a time where people have an amazing amount of power when it comes to publishing. Blogging, podcasts, vidcasts (or whatever you call ‘em) and more have been put into the hands of millions and it’s changing the way we live and work.

Despite all of that, content management for the web remains a huge pain point for many individuals and businesses. The amount of time, effort and money that’s involved (and often wasted) to do things that are seemingly rather straightforward is astronomical. I mean, how hard does it have to be?

Content publishing and management can be extremely complex, and therefore not surprisingly hard to do. Having said that, the biggest problems with content management lie not in that complexity, but in how we approach our solutions.

How’s that for a paradox? Welcome to the world of content management.

So, where do we start looking for a better way to “do” content management? Let’s take a hard look at the issues; starting with how most of us perceive content management.

Content Management vs. CMS

Without wishing to state the obvious, content management needs to be all about the content. However, when most of us think (or talk, or read) about content management we are quick to associate it with a specific technology – the CMS.

That, my friends, is our first, and probably our biggest, mistake. “CMS” should in no way define content management. If you’re currently in content management = CMS mode you should really take the time to step back and look at what you’re doing. You may find out that you’re wasting time, money and effort on something that’s not providing much, if any, value.

There are four important pieces to the content management puzzle: content, people, process and technology. Let’s look at those individually.

Content Management is About Content

Well, now that we’ve pulled the “system” out, let’s look at defining “content.” Here’s where it gets tricky. Content can mean a lot of things. You could be publishing all sorts of content; pages, articles, mp3s, events, and so on. You could have a variety of different mediums (html, images, movies) all of which have a different way of being created, maintained, and published.

And that doesn’t even take into account semantic issues. What’s the difference between a “page” and an “article?” What about an article and a blog entry? A blog entry and a news item. Sometimes these may seem obvious, other times it’s not as clear.

There is no one clear definition for content – it’s different for every situation and it’s important to keep this in mind. Don’t let the content be defined by the technology, for example, that’s something that most content management systems will do for you (or to you!).

Content Management is About People

You need to have people in order to properly manage content. Content can’t be created by a system and it doesn’t manage itself. Pretty clear, right? I think so, yet I’m constantly amazed at how often the people aspect is left out of the solution.

I could write a book on how to create, manage and maintain content and it would begin with something about hiring the right people.

In order to do content right you’ve got to make sure there are people in place and that they’re set up to use the systems you have. Find out if you even need a CMS, for example. Sometimes you’ll find that by having people with the right skills in place eliminates the need for a “CMS” altogether. Instead you may want to deploy technology that helps with the process itself, or nothing at all, in effect using people instead of technology to manage your content.

I think many folks would be surprised at how much time, effort and money can be saved simply by putting people before technology when it comes to resources.

Content Management is A Process

I think this defines the term “content management” the best. It’s a process. Take a look at why people want to manage content. What are they trying to express? What are their goals? What are the real problems they’re having? How do they interact with technology? These questions should be answered before any sort of system or technical solution is applied.

I think we can safely assume that most people who actually have to work with content management don’t care too much about the technology, aside from whether or not it works well. They just want to correct an error, publish their thoughts, share their knowledge. In order to provide the best solution, we need to understand those goals first. Then we need to establish a solid process.

If the process is flawed everything that follows will also be flawed. Unfortunately what normally happens is the process is created around the technology, which is usually hard to use, and everything falls apart.

But enough of that, as my pal Sean said recently, “consulting on process could be an industry unto itself.” Let’s talk tech.

Content Management is About Technology

When it comes to content management, technology should be a means to an end. It should be a way to help people accomplish their goals. This can be done in many different ways and should not be limited to what we traditionally think of as a CMS.

I realize that the promise of a CMS as a suite of technologies to help people with content management is a good one. However, good intentions don’t always come with good results. When it comes to CMSs, this is usually a bit of an understatement.

The usual problem with that is most CMSs aren’t really built to address the specific needs and problems of the people and processes you’ll have in place. Even when geared to a specific type of content or industry they often miss the mark.

This can be the result of a few problems common to many “out-of-the-box” solutions:

  • They’ve got an overly complicated feature-set. With most systems you’ve got a bunch of advanced features that don’t often get used. If they do it’s usually after someone’s spent tons of time learning the system. Heck, I don’t know how many times I’ve thought to myself, “I could teach the content contributors how to access static files and write XHTML quicker.” Regardless, if people don’t use the features, they’re not really useful.
  • They’re too inflexible. They don’t allow for easy customization (in more ways than one) and require significant resources (time, effort and money) to mold them to what you want. Sometimes that can be as simple as getting the content to display correctly or getting the CSS to render as it should.
  • They’re not tailored to the specific content you want to publish. Jeff Croft recently wrote a nice piece on personal content management that illustrates this well. He points out that, “the single biggest problem with content management is that personal CMS tools don’t facilitate structured data as well as they should. Instead, they give you a few fields and let you figure out how to best fit your content into them.” Very true, and this causes all sorts of problems.
  • They’re too hard to use. A CMS can be hard to learn, or simply too cumbersome for your teams to learn and use. This goes back again to people. There is a commonly held and horribly wrong belief that technology will make things so easy that the need for human involvement goes away. CMSs don’t run themselves, and if the people won’t use it, you’ve got a problem.

For a technological solution (CMS or otherwise) to work it needs to be tailored to the specific content management problems you’re facing. Simply picking and adding a CMS will not usually do it and can end up in lots of wasted time, effort and money. Sorry, folks, it’s more complicated than that.

Some Solutions

So we’ve got a solid, holistic definition of content management and we’ve talked a bit about the problems therein. But what about solutions? Well, I think we’ve already taken the biggest step in reframing the problem, but I’ve got some specific ideas as well.

Get Some People

To manage content properly you have to have people involved. That’s the first step. Put a person (or better, persons) in charge of your content. Give that person the empowerment to make decisions that relate to content.

If nothing else, do this before you do anything with technology. I mean it!

Define Your Content and Establish a Process

Next you need to clarify goals, define roles, and so on. A big part of that is to make sure everyone involved has a clear understanding of the content you’ll be managing. It’s not rocket science and should be fairly easy to pin down, but make sure and eliminate any semantic problems here.

It’s probably a good idea to be specific. For example; determine the that you’re publishing news articles vs. features, etc. Don’t limit yourself to something generic like words vs. photos.

Once you’ve got the people in place and your content defined, you’ll want to establish a solid process. Take some time and set up an editorial calendar and work on learning how the people involved will work together and with the technologies you’ve got in place.

Help Technology Help You

And now we get to the tricky part. The idea here is to discover a technical solution (not a system) that will enable the people to manage the process.

Let’s look at that again. Enable the people to manage the process. So, the “solution” needs to provide tools (publishing and otherwise) to help the people create, publish and maintain content.

There are a lot of canned solutions out there and I could give you a laundry list of this CMS and that CMS, but until you’ve solved the problems above you’d be wasting your time (and likely lots of money) exploring them. The enabling technology could be a CMS or it could extend beyond that, depending on the process and needs of your people.

One of the biggest problems with most CMSs is that they aren’t flexible enough to handle a wide variety of work styles and publishing problems. In many cases, somewhat surprisingly, they’re not tailored enough to the specific content they’re managing. They require hacking and lots of it.

In truth most CMSs end up being custom, regardless of how they start out. From those that bill themselves as one-size fits all to the highly specialized systems which deal with specific industries or types of content. It’s just a matter of how much hacking you’ll need to do to get to what works for your people.

Keeping that in mind, the case could be made for always building a custom solution (not necessarily a CMS) to suit the needs of the particular content, people and processes your working with.

It sounds daunting, but this is where I think the true promise of a technical content management solution lies. With frameworks like Django, CakePHP, Ruby on Rails and the like we can create custom solutions and construct custom systems that are extendable and much more flexible than most of what’s available today.

I don’t want to trivialize the development of these solutions. Building a custom CMS from scratch, for example, would be very difficult. However, it’s important to note the current costs and effort involved with most pre-built CMSs out there. They’re usually really expensive and already requires tons of work to implement in most cases. It’s going to cost you regardless. Doesn’t it make sense to put that money, time and effort into a true custom solution?

I think so. I mean, yes, you’d need specialized resources for development, but it seems as if you need those most times anyway. I know I’d rather offer my clients resources working toward a custom solution than learning yet another proprietary system.

So you could look at a development framework, as opposed to a canned system. That way instead of “hacking” you could “develop.”

Also with a framework, you can extend beyond Web publishing and build specific tools to help the process. An interactive editorial calendar comes to mind, or brainstorming tools. Of course, if you avoid the “one CMS as as a product” mentality, you could probably find lots of smaller, more specific, products that when pulled together are much more enabling than any bloated, proprietary CMS full of features your people will never actually use.

Confused yet?

I promise, the goal of this piece wasn’t to confuse you, and I know that it’s a whole lot to take in.

Here’s the bottom-line: content management can’t be trivialized. And it can’t be perceived as technology first; as a canned product or silver-bullet that’ll eliminate the need for people or processes.

If you’re serious about your content, and you should be, then take the time to do it right. Get the right people in place, clearly define your content, establish a solid process and then work on getting a custom technology solution that brings everything together and truly enables your people and processes.

Continue reading 45
CSS3 Online Conference March 22nd 2010 banner ad

3 June 2006

So you want to be a podcast superstar? Well, while this article might not make you a superstar, the aim is to help you record quality audio using Skype. Skype recording can be a tricky, but the benefits far outweigh the time investment it takes to learn. We use it on the Web 2.0 Show podcast to capture our interview audio and it has allowed us to interview some very big names without being in our interviewee’s location. Or running up large phone bills. This article will cover both Mac and Windows based recording techniques, and we will post follow-up articles covering post-production of the audio and how to upload and track your podcast.

Your mic plays a big role in sound quality. This is not an area I would skimp on, the more you can spend, the better the end result will be.

If you go with either of the Marshall or the Snowball, remember to use a nice set of enclosed headphones to avoid feedback.

One major note before we go on. Be absolutely sure to go into Skype preferences, then connections, and look at the port number. Ensure that port is forwarded from your firewall to your computer running Skype. This will allow direct connections between all the Skype callers, thus improving bandwidth and latency for everyone (and cutting down on the number of audio cutouts).

Mac Skype Recording

So we’ll start with the setup I use most often, the mac setup. I purchased a Mac mini (powerpc) to play around with and decided that podcasting would be a great use for it. After doing some research I found a company called Rogue Amoeba that makes a recording package called Audio Hijack Pro. When you combine its audio “hijack” ability with SoundFlower, you can create a really nice setup.

I have been through many different iterations of this setup and I have found the following works best, as this is the closest to real time monitoring.

  1. Install SoundFlower on your Mac, this allows us to input and output sounds from different programs and have it all mix together.
  2. Configure Skype output to use SoundFlower (2ch). Skype input will be set to Default System Input or your USB recording device.
  3. Setup a new component on AHP to use the SoundFlower (2ch) as the input and set the output to silence.
  4. set up a new component on AHP

  5. Add a second new component to AHP and set the input to Default System Input or your USB recording device. Choose the output to be silence (You may opt to output the sound to SoundFlower (2ch) and setup a third component to record the mix you have created, then there is no need to mix it later from two files.)
  6. Add a second new component

  7. Add a third component and set the audio source to Application and choose Skype.
  8. Add a third component and set the audio

  9. Go into each component you created and click on hijack.
  10. click on hijack

  11. When you hijack the Skype monitoring component, it will prompt you to ‘instant hijack’ or ‘quit and relaunch’. Just quit and relaunch, it is fairly quick.
  12. The Skype monitoring component

Now we will setup the recordings.

  1. Go into the first two components and choose the recording tab. Set each one to record to mp3, you can setup the naming however you want. (Mp3 recording is VERY processor intensive and I find it can bring my mac mini to its knees if I try to record two at once. If you find this, be sure to use a different format like Apple lossless or wav.)
  2. Set each component to record to mp3

  3. Start your skype call.
  4. Go into the first two components again when you are ready to record. Hit the record button and make sure the red dot shows up next to each (WARNING: This is critical or your audio won’t record… We did this with one episode).
  5. Hit the record button making sure that the red dot appears

  6. Record your interview, you can keep an eye on sound levels on the effects tab of each component. It is important to make sure you are staying under 0 and you don’t make the clip light go red.
  7. Keep and eye on the sound levels - stay under 0

  8. When you are finished, hit recording again for the two components. You can also stop hijacking the three components and shutdown AudioHijack Pro.

This process will leave you with two seperate mp3 files. You can use any sound editing programs (I use Audacity) to sync them and mix them together. That’s all there is to Mac-based Skype recording.

While writing this article, ecamm released a Mac-based program similar to Hot Recorder, Call Recorder. I haven’t had a chance to play with it, but it looks pretty straightforward.

Windows Skype Recording

Windows-based Skype recording is actually a bit more straight-forward than on the Mac. Hot Recorder is the windows program that handles everything for Skype recording. It is a $15 purchase, and well worth the money if you are doing everything in Windows. The only downside is that it records both sides of the conversation into one file and this can make things more difficult in post-production if your sound levels are way off.

  1. Install Hot Recorder and put in your key, the free version will record with limitations, but it can’t convert to mp3.
  2. Start your skype call.
  3. Bring up Hot Recorder and hit record.
  4. Open up Hot Recorder and hit record

  5. When you are finished just hit stop, and fill out the Skype call details. This will name and save your file in an .epl format.
  6. Now open up Audio Converter, it is under Program Files in the HotRecorder folder. Browse to your file (C:\program files\HotRecorder\PhoneCalls is the default) and choose mp3. Hit convert. You should see a success message.
  7. Audio Converter

Now you should have an mp3 file created in the same spot as the .epl file. Windows Skype recording is much easier to setup, but not as flexible in post-production. That’s all you need to know to create clear, crisp podcasts using Skype. Happy Podcasting!

digg.com logo Like this article? Digg it!

Continue reading 14

10 April 2006

Eons ago when I was taking the Freshman web design course in college (okay, it was only 4 years ago) I was taught about the acronym of all acronyms, the one by which all other web design acronyms were judged. We learned that good design is based on the C.R.A.P. principles where C.R.A.P. stands for Contrast Repetition Alignment Proximity, and when Creative Directors tell you that your design is crap, they’re actually giving you positive reinforcement. Okay, that last part was made up, sorry. “Crappy work” is probably not a term of endearment but rather an indication that your pixels smell.

There are various examples of what C.R.A.P. means on the web (Robin Williams first coined the acronym), but for me it’s this:

  • Contrast
    Elements that aren’t the same should be very different so they stand out, making them “slightly different” confuses the user into seeing a relation that doesn’t exist. Strong contrast between page elements allows the user’s eye to flow from one to another down the page instead of creating a sea of similarity that’s boring and not communicative.
  • Repetition
    Repeat styles down the page for a cohesive feel — if you style related elements the same way in one area, continue that trend for other areas for consistency.
  • Alignment
    Everything on the page needs to be visually connected to something else, nothing should be out of place or distinct from all other design elements.
  • Proximity
    Proximity creates related meaning: elements that are related should be grouped together, whereas separate design elements should have enough space in between to communicate they are different.

In this article I’ll go into further depth about each specific principle, and show examples of design that are either C.R.A.P. or just crap. Let’s go!

Contrast

Good contrast can make sites appear crisp and organized, whereas poor contrast blends it all into an incoherent mass of RGB values. Contrasting elements allow for the user to figure out which page areas are related and which are totally separate, so make sure to differentiate your elements and page sections.

One of my favorite designers, Jason Csizmadi, runs the killer design weblog Dangergraphics.com and his blog is a great example of what good contrast can do for the layout of a page. Here’s a screenshot:

Dangergraphics.com Screenshot

His site is split into two main columns, where the right column has a medium red background with an illustration at the top, and the left column is dark grey and very clean. The immediate visual separation between the two areas shows that they contain separate types of content — the right side is his weblog while the left holds some of his recent work and links to other sites. The stark contrast between the left and right columns really brings cohesion to the similar areas while defining the boundaries between different types of content.

Good contrast separates main areas on a page and allows readers not to be distracted by similar elements on other sections. In my opinion poor contrast on a site makes for poor design. And example of this is Northrop Grumman’s Capabilities page.
Northrop Grumman Screenshot

This screenshot is a good example of bad contrast on the web. They had the right idea with the shaded right column background, however the light yellow doesn’t separate it enough visually, and using the exact same typeface for all body copy and headings within the two columns compounds the problem. The main section headers are merely emboldened versions of the text underneath, and this slight change doesn’t separate the sections enough. I think that if Grumman changed their section headings to a larger size (with more padding), and made the right column background more distinct, better visual contrast would be achieved.

Repetition

If you’ve ever designed a weblog before, you know about repetition. Typical weblogs have all the same page elements: a header graphic, a main column with multiple weblog entries (each entry having a title, date & comment headings, and content), and a sidebar with archive/category navigation. At Business Logs, I happen to design a lot of weblogs since that’s basically what my firm specializes in, so once you’ve put together half a dozen blog designs you start to figure out what works and what doesn’t.

The repeating nature of weblog entries down a page lets you control how the user’s eye is guided down the layout of your site, and the correct spacing and design is crucial or else entries will cram into each other (poor Contrast), users won’t be able to find key elements (poor Repetition), or in the worst consequence, readers won’t be able to read and comprehend your writing as well as they should. The repetition of design elements down a page reinforces their meaning to the user, as well as letting the designer organize the layout in a cohesive manner.

9Rules Blog

At the 9rules Blog, our layout represents a typical blog layout with two columns that provide normal blog functionality. Across both columns, I use similar design metaphors to keep the reader on track with what is being presented:

  • Body copy and regular text is set in Lucida Grande (Verdana for Windows users).
  • Section headings within blog entries and in the right column are Trebuchet MS with a dotted separation line on the bottom.
  • Links have a bold font-weight, and in blog entries they are bright green to match the entry title link.
  • All sections in the right column have a 7px grey border around them.

The goals for having the same typographical choices for both body copy and headings are 1) reinforcing their meaning within their context (headings in blog entries vs. headings above link lists), and 2) it’s cleaner and more visually consistent with the rest of the site. By repeating styles with similar significance/meaning across various areas of the site, I’m allowing the user get acclimated to this meaning which lets them browse the site more easily.

Alignment

In my opinion, quality alignment and spacing is the hallmark of good web design. Friends often ask me how I produce my design work, and honestly, I just line things up and make sure the padding around design elements is symmetrical and relative to their sizing. Here are some rules regarding alignment on the web:

  • Either left-align, or right-align text, but don’t do both. Right-aligned text in a right sidebar creates rivers of white space between the two columns and looks awful. If you left-align your body copy, then left-align your sidebar text as well.
  • Centered headlines are classy, centered body copy isn’t. Two examples of centered headlines with left-aligned body copy are McSweeney’s and A List Apart.
  • Use existing hard edges to line up other elements. If your header graphic is 5px from the left edge, then have your body copy be 5px from the left as well. Be precise: 5px is not 7px — good design is all about the details.

Bryan Veloso’s SXSW Bowling site is a great example of how to align various elements on a diverse page. Let’s take a look at his cool header graphic:

Avalonstar Bowling Extravaganza Site Screenshot

Bryan has 4 different visual areas in the header, and all are aligned for maximum effect and message communication. He uses the left and right edges of the graphic to align the text and phoenix illustration, and then keeps the spacing around all 4 elements the same for symmetry, a technique that should definitely be emulated.

Altered Screenshot of Avalonstar Bowling

Repetitive alignment and symmetrical spacing are two techniques that can be used extensively in blog-based interface design, simply because there are so many opportunities to group elements together in some type of designed widget or box-like area. Further down on Bryan’s bowling site we see the Bowling Teams section and pictures of the bowlers. Bryan has a small padding around each image, and then keeps that same padding size to separate each image in the row horizontally. Good stuff.

Proximity

The principle of proximity allows similar or related elements to be grouped together to form a cohesive whole. Items that aren’t related should be kept visually separate from those which are. This enables the viewer to glance at a page and immediately know which page elements are grouped together and which are separate.

Matt Brett’s personal site looks great, and he uses a technique on his section headings that I find extremely valuable and useful:

Matt Brett's Personal Site

For every section title, he has a sub-heading underneath it that provides a bit more explanation for what that area is about. He has tightly spaced the sub-heading with the larger title, and in doing so created a cohesive visual element that is the fusion of two smaller elements. If the sub-heading was 10px lower, the effect would be gone because the spacing between the two wouldn’t group the two elements together correctly.

This technique is very useful in weblog design, because too many blogs don’t put their sub-headings close enough to the paragraph they’re attached to, and without the correct spacing the elements appear separated instead of attached. Here’s an example of correct (left) vs. incorrect spacing (right) in this image:

Entry Spacing

The title and comment headings on the left are spaced evenly and form a cohesive whole, whereas on the right the haphazard and unsymmetrical padding causes the section to appear separated and jagged. Headings should appear close to the paragraph they apply to, same with images and their captions, comments and their author’s names, etc.

Oh C.R.A.P.

The C.R.A.P. principles (Contrast, Repetition, Alignment, and Proximity) are good ways to double-check your design work. Just like with a pre-shot routine in golf, if you constantly question and nitpick the details of your design work, good design habits will form and you’ll no longer have to think about if your padding is off or elements aren’t aligned, you’ll just do it correctly from the start.

Continue reading 40

Sign Up to our Newsletter

Enter your e-mail address below to receive regular updates on web design, web development and web business. Subscribe today and receive a free 44 page PDF "Designing Web User Interfaces" by Ryan Singer of 37signals.

Subscribe to the Think Vitamin articles RSS feed

Future of Web Design London May 17-19 2010

News

Twitter

Follow us on Twitter

Subscribe

Article Subscribers

Feedburner blog subscriber indicator

News Subscribers

Feedburner blog subscriber indicator

Subscribe by Email

You can receive Think Vitamin updates via email. Just pop your email address in the box below and click the arrows.

Subscribe by RSS

You can also receive new Think Vitamin posts via your RSS feed reader

Subscribe RSS Think Vitamin is a proud member of the Smashing Network

Ads Via The Deck