I have written a few times about the various options available for the hosting of videos online via third party services. If I have a choice in the matter, I use Blip.tv for all the reasons you’d expect: interface is easy to use, they allow the posting of video in higher quality than most providers, they’ve help when I’ve had questions, it works, etc. It is the best third-party option I have found, as a web developer.

But I think my favorite thing about Blip.tv is their Flash video player. It is awesome for a couple of reasons:

(1) You can remove all Blip.tv branding from the video player and replace with your own site name or URL, meaning you don’t have to turn your website into an advertisement for your video provider if you don’t want to.

(2) You can turn off any options in the player you want to. So if I can turn on/off options like embed code, autoplay, view in full screen, ads for other videos on Blip.tv, etc.

(3) You can customize the colors of the Blip.tv player so that it matches your site’s colors perfectly. This allows for designers to really seamlessly integrate video into the sites they build.

(4) The player is just really good looking.

Basically, the Flash player is super flexible and gives you the ability to do whatever you need to with it to make it fit into your site.

Below are some examples of the Blip.tv player being seamlessly integrated into various sites. Please click on the images to view the player on the actual sites.

WallStrip

This is basicallly what the player looks like by default.

(more…)

At the Politics Online conference yesterday, I participated in a panel entitled “Does Good Design Matter” (previous post here). In my opening discussion, I talked briefly about some common mistakes I see people make when building their websites. Here is a quick summary of what I said.

First, I think website design really consists of two things:

1. What the site looks like (the brand)
2. How well the site works (usability)

The instinct of most folks when building a website is to invest a great deal of energy into the overall look and very little into how usable the site is. In my opinion, this gets things backwards. I’m not advocating that people build ugly sites or not pay attentions to looks. Not at all. But, it is important to remember that, on the web, usability has just as much to do with your site’s brand as the overall look does.

Think about it. When you visit a site for the first time you definitely have an immediate reaction that is based entirely on how the site looks. The colors. The fonts. The pictures. Etc. Your brain processes this information quickly and then you go about the business of actually using the site. If the site doesn’t deliver in a usability sense (things are hard to find, forms don’t work, error messages aren’t in place, etc.), all the good will built up by that good first impression will be thrown out the window and the user will be left with a bad impression of your organization.

So my first piece of advice to folks building websites is to invest as much energy in usability as you do in agonizing over colors and font choices.

Second, always remember that content is the driving force behind any website. Design is there to serve the content. A blog that isn’t updated is going to fail no matter how pretty it is. The slickest tool for writing letters to the editor isn’t going to get used if you don’t provide a compelling reason for people to act.

Too many people think design is a panacea that can cover up content problems. “If we make our site really cool with lots of Flash animation and stuff, maybe people won’t notice that we only have two pages of content.” It doesn’t work. People know.

We actually struggled with this ourselves in developing our site, www.bivings.com. We got stuck trying to build something really design heavy and slick a few years back, because we weren’t focused enough on the conent. Below is what I wrote about our own struggles a few years back:

We’ve been contemplating a redesign of the main Bivings site for a couple of years, but the path forward only became clear the last few months. When thinking about a redesign previously we fell victim to our own ambition. We had grand plans and wanted to create something that was perfect. This sort of led to paralysis. We didn’t follow our own advice, which is to focus on usability and design that serves the content.

We finally started making progress when we shifted the focus to our blog. We decided to keep www.bivings.com really simple and not to overwhelm folks with lots of brochure content they don’t want to read anyway. We brought our blog content front and center. Our goal with the new site is to tell the story of our company a little bit every day by writing about the projects we are working on and the things we are passionate about. We think this will be much more effective than producing some sort of slick, heartless brochure site.

So my second piece of advice would be to figure out your content strategy in advance of even contemplating a redesign.

Without compelling content, your website is not going to work that well no matter how slick the design.

I’ll be speaking on a panel at the Politics Online conference next Tuesday (register here) on the topic of “Does Good Design Matter” in the context and political/advocacy websites. The panel was put together by Colin Delaney of e-politics and will also feature Margaux O’Malley (Grand Junction Design) and Susan Finkelpearl (Free Range Studios).

In thinking about this topic, one example from our work on the Fred Thompson campaign where good design didn’t matter immediately jumped to mind.

(more…)

One thing I am seeing more and more of on newspaper websites are interactive features that provide rich ways to look at otherwise flat data. Today, Gary forwarded me a great example from the New York Times website. Check out The Ebb and Flow of Movies: Box Office Receipts 1986 - 2007, an interactive piece that shows box office receipts by month/movie for the last twenty years. This Flash piece is really well done, and is definitely the kind of thing that will get past around and get eyeballs to the Times website. It also provides ways to discover other Times content, as when you click on the movie names you get a little pop up window that provides a summary of what the movie is about and a link to a full review.

We’ve written a bit here about how some of the Presidential campaigns this cycle have embraced stripped down emails that don’t include a lot of images or fancy formatting. In that previous post, the focus was on how this format can make emails seem more personal, and not on the technical reasons to avoid using a lot of images. Josh Levy’s post yesterday about John McCain’s email mistakes inspired me to look at the issue from a more technical perspective.

The most compelling reason to limit the use of images in HTML emails is that tons of people are never going to see them. Some people actively turn off images. Others don’t see them because their email programs turn them off by default (Campaign Monitor has a great chart showing a breakdown). Some people work at companies that block images in emails to save bandwidth/stop porn. And yet more people are accessing email on cell phones that can’t read images. I have yet to see a percentage I trust completely, but it is estimated that somewhere between 25 and 50 percent of email users block at least some images in HTML emails. That is a lot.

Speaking anecdotally, I’m a lot less likely to see images in email than I did a year ago. At work we upgraded recently to Outlook 2007 which has images blocked by default. I never changed the setting and now follow the process of opting in to see images based on whether I trust the sender. I use Gmail for my personal email and follow the same procedure. (You really should check out that chart breaking down default settings for major email clients.)

So what to do. Stop using images altogether? Use them sparingly? Although a bit old, the useful Campaign Monitor blog provides a great guide to email design. Here are their six tips on how to send emails that actually gets to the recipient in a readable format:

1. Never use images for important content like headlines, links and any calls to action.
2. Use alt text for all images for a better experience in Gmail and always add the height and width to the image to ensure that the blank placeholder image doesn’t throw your design out.
3. Add a text-based link to a web version of your design at the top of your email.
4. Ensure your most compelling content is at the top (and preferably to the left).
5. Test your design in a preview pane, full screen and with images turned on and off before you send it.
6. Ask your subscriber to add your From address to their address book at every opportunity.

Anyone that has sent bulk emails out knows that it is a really stressful thing. Even if you do your job perfectly (no typos, valid web links, good HTML, etc.), your email is going to be garbled for at least a small percentage of people who have weird settings or are using funky email clients (Hello Lotus Notes). And those small percentage of people will inevitably complain to your boss’ best friend from high school and you’ll hear about it.

Given the high probability for mistakes, email is really a format where you need to keep things simple. If you have to use images, design the email so that it will degrade gracefully if images are turned off. The emails we design that use images typically look like an online version of letter head, with a single header image. If you keep it simple, you’ll get yelled out less for supposed mistakes and your click through rates will increase since more people will be able to actually see the content of your message.

Note: I just saw this post from Michael Whitney at Tech President that looks at the use of email by Presidential candidates and expands on Campaign Monitor’s tips. Great minds. Give it a read, as it goes into things in a bit more depth than my post.

The Future of Web Apps Conference will be held on the East coast for this first time ever this year, hitting the beaches of sunny Miami February 28th. It’ll be interesting to follow the developments that emerge from this year’s event. Speakers and participants are slated to discuss everything from startups to social networks.

Also on the agenda is a “Launch a web app in 40 minutes” feature, which will be led by a moderated panel of some of the smartest web developers.  You can vote for what kind of application the panel will attempt to assemble through TechCrunch.

Wordpress and Google will be represented among the 14 speakers confirmed thus far. Various workshops will also be available for those in attendance, including a “Making Money From Your App” session.

The Future of Web Apps Conference comes to a close March first.

As most of you know, The Bivings Group was a part of the team that built Fred Thompson’s Presidential campaign website. Our main client contact on the project, Michael Turk, has a good post up rounding up the good, the bad and the ugly aspects of the online program we all put together. It is worth a read.

In the piece, Turk points out that one of the most successful aspects of the program was the campaign blog, the Fred File. He writes:

As an example of the strength of Thompson’s online effort, look at the Thompson campaign blog and you’ll see something remarkable for GOP candidates - comments. And not just a few comments, but hundreds and even thousands of comments.

Rudy’s blog doesn’t allow comments. Romney’s gets a few per post. Ron Paul just recently launched a blog (despite the fact that blog software is largely free). He currently gets between a handful and a few dozen comments.

I don’t think this indicates a lack of supporter enthusiasm as much as it indicates that the campaigns have created a blog with nothing to say on sites that are so scrubbed of interesting content they’re almost sterile. Most of the posts are rehashed press releases, rehashed campaign e-mails, or occasionally a video so overscripted it becomes almost completely unwatchable.

I think Turk is right on here. With any successful blog, 90% of the battle is producing readable content and engaging with readers. Many, many campaigns want a blog in theory but don’t have the stomach to do the heavy lifting that will make it actually work.  The Thompson campaign, lead by staffers Sean Hackbarth and Austin Walne, deserve the lion’s share of the credit for the success of the Fred File. But I also think there were some small, more technical decisions that were made that helped give the blog a greater chance to succeed. (more…)

My favorite SEO blogger, Rand Fishkin of SEOmoz in Seattle, has an excellent post titled “Choosing the Right CMS Platform for Your Website (from an SEO perspective).” It is about various aspects of SEO to consider when choosing a content management system (CMS) to build a site. 

Instead of doing a comparison and contrast between different systems like Drupal and Wordpress; Rand provides 12 issues to consider. These issues revolve around the ability of a site owner to control various design elements that search engines consider when assessing a site.  These issues range from page title tags to CSS.

It is worth reading.  Other than SEO, what are important issues you consider when selecting a CMS?

Just about every professionally done website you visit includes a copyright date at the bottom of the page. Every January you see websites that forget to update the year in their copyright statement. Many actually fall years behind before catching it and updating the dates. Above is an example of this phenomenon from the website of the Democratic National Committee.

We’ve made this mistake ourselves plenty of times. It is just something that is really easy to forget to do. That is why the best solution is to automate in the process instead of manually updating it every January. Here are two simple ways to accomplish this that our design/production department uses:

(1) If you are working in PHP (like sites in Wordpress and Drupal), use the simple PHP code below to render the copyright date in your footer. The date will automatically change at 12:01 am on January 1 every year.

<?php echo date(’Y'); ?>

(2) If your site is in plain HTML or another language, you can use the following JavaScript to generate the date.

Put this code in the site header:

var date=time.getDate();
var year=time.getYear();
if (year < 2000)
year = year + 1900;

Then place this code where you want to generate the date:

<script language=”JavaScript” type=”text/javascript”>document.write(year);</script>

Two easy ways to save yourself some time/headaches.

Barack Obama’s team has redesigned his website just prior to the Iowa Caucus and, well, I hope you like the color blue. I do.

I also think this redesign puts his web design effort at the top of the heap.

Starting at the top…

The over the top photoshopping of the clouds and lens flare as a background is so dramatically piled-on that you have to give the designers a lot of credit for even submitting it. The fact that it works is a testament to not only the designers but also whoever approved this thing. An extra cloud here, a ray of sunshine there and this effort is a parody. The photo used of the candidate is also pretty gutsy, with him staring into the future or whatever, but again in this new setting works just fine for me. The tone of the site now is one of confidence. No blaring headlines or screaming calls to action. Even the illustration used to announce his victory in Iowa is tasteful.

(more…)

Making fun of bad logo designs is lame. So, let’s say that Xerox’s new logo is just fine, if a little curvy/Speed Racery looking, and move onto that weird ball thing next to it.

Around the office here we are thinking what it might represent. Surely there will be a corporate short story written about how it moves the company smoothly into its next phase or some equally ridiculous metaphor. I think it looks like a drag racer’s parachute. Jei thinks it resembles that Pokemon ball that the weird boy (?) kept those effeminate monster things in and threw at people. I’m sure we’re both right, but that’s not the point here. What follows is what Xerox might attach to their logo presentation to help us understand it more completely, and to justify the millions of dollars they spent on a logo that a college student might have handed over sheepishly to his design professor.

“The red sphere is at once familiar and mysterious, as it implies transparency and stability. It stands heroically next to its lower-case partner, instilling confidence as this new chapter of xerox advances. At its core the new mark of xerox is a streamlined thoroughbred, a coiled spring from which ingenuity will vault. Deep down, below the superficiality of its animal allure, lies the truth of xerox’s rebirth (mark). The sphere of a new day is also a reassuring nod to the past, as the confident x reminds us always of our upper case past.”

Pretty sweet, right? And it’s fun. Send your best (most terrifying) xerox logo descriptions and we’ll post them right up here.

In the summer I wrote a post vaguely complaining about the deterioration in the design of Barack Obama’s campaign website.

Here is the site when it first launched early in 2007:

I liked this. The design was clean and the site was really easy to navigate. After initially launching this version, the campaign spent a few months developing tons of great new features which they didn’t really have a place to put.

(more…)

Cyberjournalist has the scoop on the BBC launching a beta version of their redesigned homepage. You can view the beta site here and the current version here. Note that this redesign affects only the main BBC homepage and not the BBC News homepage, which is where I spend most of my time.

A quick perusal of the new homepage shows that the BBC is trying to turn its homepage into an Ajax style start page like Netvibes or Pageflakes. I’m not opposed to the idea, but the execution here is pretty poor. The whole thing is clunky, but what really jumps out is how poorly designed the customization options are.

Here is what it looks like out of the box:

I’m not a fan of magenta, so I immediately clicked on the Display Option link at the top to try to make a magenta-free version. After clicking that you are given the options to select from eight preset color schemes or create your own. Sounds great. The problem is that all the preset options look absolutely terrible. (more…)

On Saturday, MSNBC launched a redesigned version of its website (via Cyberjournalist). You can view some reader reaction here and take a tour of the new site here.

I’ve never been a fan of the MSNBC website. While I think the new design is an improvement from a design perspective, the site has a long way to go before I’ll be converted into a regular visitors. Here are my specific criticisms of the new design and the overall site strategy.

(1) The navigation on the new site isn’t very user friendly. For me, the banner at the top of the page is useless from a navigation perspective. Instead of just providing me with a nice breakdown of the content of the site in the header, MSNBC uses the entire thing to advertise the sites of the Today Show and Dateline. The actual site navigation has been de-emphasized and placed at the bottom left area of the page, meaning many, many users will be scrolling to find the Health and Weather sections on the homepage. (more…)

I was doing some work on Google and did a quick search for Barack Obama. I wanted to go to his main campaign site, so I clicked on the ad that shows up as the first result. I often find just typing search phrases in Google quicker than trying to type in a URL or sort through where I have the site bookmarked.

Not surprisingly, I got taken to a page designed specifically for Google Adwords that encourages me to join the Obama mail list. Below is a screenshot of the landing page.

This is pretty typical. The only thing interesting here is that the page doesn’t include any obvious way to opt out of the sign up process. Most of the time when you do these sorts of pages you get the little “Skip to go to Website” option. Want to to go to the website? Can’t get there from here. It seems to be designed in a way that conveys that the only option is to sign up. (more…)