1. Draggable Views

We commonly use the Views component of Drupal to display a collection of a certain type of content in an organized fashion.  There are various ways to sort content: alphabetically, publication date, popularity (as dictated by the comments, page views, etc.), and other criteria.  However, we had a client for who such sorting was not helpful.  Further, there are several pages on their site in which they had to manually dictate the order of content in the view.  With a little research we came across the Draggable Views module that allows site admins to use their mouse to drag and drop content where it should be.  It is very handy.

2. IP Login

For another client, we had to place downloadable files into a secure folder – meaning that only users with member roles could access the files.  That in itself is not too complicated, but in addition to the client’s members, we also had to provide access to these files for people at certain organizations.  The client provided ip address ranges for the organizations.  To meet this need, we created a role that only granted access to the applicable files.  Then we created user accounts for each ip address range.  The IP Login module allowed us to automatically log users in coming from those ip ranges for seamless access.

3. Hide Submit Button

We set up a groups site for a client.  However, we ran into an issue; a small subset of the users are impatient when they hit submit buttons.  Thus, they would hit the submit button.  Before the process finished, they would hit the button again.  This would result in duplicate submissions of comments, in this case.  We used the Hide Submit Button module to display an image indicating to the user that their submission is still being processed.  It further disabled them from hitting submit again until the process completed.  One of the cool things about this module is that the site administrators can designate which pages this behavior occurs.  This module was a quick fix to a problem.

4. Views Bulk Operations (VBO)

VBO may not be a “sexy” module, but it is handy.  It is mainly geared toward development work when it is not uncommon to make the same change to a vast number of pieces of content on a site.  This can be used in many ways.  When a site was deluged by tens of thousands of spam comments, we used VBO create pages with many more items listed on each page.  Instead of deleting 50 comments at one time, we were able to delete tens of thousands all at once.  The process took over an hour to complete, but that beat deleting 50, waiting, and then deleting 50 more.  This is just one use for this time saving and frustration preventing module.  However, be careful, because you can also screw up a lot of content; so be sure that what you’re doing is correct.  (Needless to say, we love CAPTCHA when it comes to web forms.)

5. Search and Replace Scanner

Like VBO, this is not a very sexy module.  However, it has come very useful for us.  We were tasked with porting over thousands of static pages from a site into Drupal.  We had our programmers develop a spider proram to pull out the content into a csv file so that we could import it into Drupal.  However, there was still A LOT of clean up to do, and we soon realized that we came across a lot of common fixes.  This is where the scanner came in.  It was very helpful.  Having said that, like VBO, you have to be careful since you can definitely goof up a site badly if you’re not careful.  I remember pestering our systems team to back up the database a lot while using this module.

Note that the availability of these modules for various versions of Drupal (5, 6, 7…) will vary.

The spot proved so popular that VW continued to run the spot after the Super Bowl and followed up with a sequel this year that featured a Star Wars spoof at the end.

Seeking to gain some attention by riding on the campaign’s coattails, Greenpeace UK launched a Star Wars-themed microsite and viral video that sough to pressure VW to change its stance on environmental regulations in Europe.  It calls on the company to turn away from the “dark side’” and to embrace more progressive environmental policies.  Below is the viral video that was the centerpiece of the campaign. 

The campaign has worked.  The petition that is the center of the campaign has been signed by over 500,000 people, an accompanying Facebook page has over 75,000 fans, the video has been viewed over 1,100,000 times on YouTube, and the campaign has generated a ton of earned media over the last six months.

Nicely done, Greenpeace.

• Does the campaign have a version of their main website optimized for mobile?
• Does the candidate offer supporters a way to sign up for SMS updates?
• Does the campaign have an official iPhone or Android application?

The results sort of speak for themselves.  Romney’s mobile optimized website is the only current mobile initiative by a Republican candidate.

Mobile Sites

While extremely simple, the Romney campaign actually has a pretty good mobile site.   The homepage design is clean and presents the user with obvious choices.  Visitors can click to get to the desktop site if they so choose.

The blog and video sections are easy to use on my iPhone, as are the Donate and Volunteer forms (screenshot below).

The Romney approach to mobile is an interesting contrast to the strategy taken by the Obama campaign.  Instead of trying to make his entire site work on mobile like Obama 2012, Romney takes a “greatest hits” approach and only displays content that is mission critical.  I personally prefer the Romney approach.  By recognizing the constraints of mobile design, Romney has created a better experience for users than the Obama campaign.   Judge for yourself.

In the end though, neither campaign’s mobile sites are extraordinary.  Both feel like an opportunity missed to me.

Thoughts on Apps and Text Messaging

The failure of the campaigns to build iPhone and Android applications didn’t surprise me.  Building an app is expensive and time consuming.  And given that most apps never gain traction, the ROI is questionable.  Building an app is an advanced tactic that you probably aren’t going to pursue until you have a bunch of other boxes checked off.

Given the hype around President Obama’s 2008 SMS strategy, which included announcing his VP pick via text message, I expected the Republicans to be actively recruiting text message subscribers.  If I had to guess, I would venture that the choice to not aggressively use text messaging comes down to money.  Obama’s text message about the Biden pick may have reached 3,000,000 people, but it is estimated to have cost the campaign over $1,000,000 to send.  Republicans involved in an expensive primary may have reached the conclusion that there are more financially prudent ways to keep in touch with supporters than text messaging.

Given this reality, marketers are desperately trying to launch digital campaigns that build buzz on social media channels prior to the game, and that maximize the impact of those $3.5 million Super Bowl ads during and after the event.  Following are five examples of innovative digital campaigns that will run around this year’s game.

(1) VW Star Wars Ads

Last year, automaker Volkswagen capitalized on our collective obsession with Star Wars by running a great ad in which a young boy dressed as Darth Vader tried to control various objects with his mind, Jedi style.  This year, VW has released a viral video of dogs barking the theme to Star Wars as a way of building buzz about its Super Bowl ad prior to its airing.  It has worked – he video (embedded below) has already been viewed over 9,000,000 times on YouTube.

In addition, VW has built a tool on their website that allows you to send a Star Wars themed “Intergalactic Invite” to your game day party to friends and family.

I love the barking dog video, but the “Intergalactic Invite” thing didn’t hold my interest.  Overall though, I’m looking forward to seeing the new commercial.  So mission accomplished.

(2) Coca Cola Polar Bears

Coca Cola has launched a campaign in which its polar bear mascots will host a virtual game watching party, reacting to the game and commercials in real time.  To participate visit CokePolarBowl.com, which redirects to a Facebook application that asks people to RSVP for the game watching party.  Coca Cola is donating $1 to the World Wildlife Fund’s efforts to protect polar bears in the arctic for every RSVP.

This particular campaign seems like a bit of a high wire act.  It will either be hilarious or make you cringe.  Not a log of middle ground.

(3) Pepsi  Shazam Integration

Not to be outdone by Coke, Pepsi will run a commercial during the game that features “X Factor USA” winner Melanie Amaro performing the Otis Redding song “Respect.”   To facilitate the selling of the single, viewers can use the Shazam app on their phones to capture audio of the song and then download a free video of the performance.

While interesting, I’m not sure the Shazam integration will be a big hit, as the vast majority of people won’t have the app.  And even those that do have it are unlikely to turn on the app and record the song in time.  Plus, I’m sure video of the performance will be available on YouTube for free anyway, so why bother?

(4) NFL Social Media Command Center

In an effort to better service fans, Super Bowl host city Indianapolis has built a social media command center, where 20 social media experts will “tweet directions to fans in search of parking, direct visitors to Indianapolis’s best attractions, and stand by to provide information in case of a disaster.”   Below is a screenshot of the 2,800 square foot office in downtown Indianapolis that was constructed for the event.

Given the mobile nature of the people attending the game, this strikes me as a really good idea.  Although I’m not sure they needed the fancy office.

(5) Doritos Crash the Super Bowl Contest

For the last six years, chip maker Doritos has run user-generated ads during the game.  This year the brand is holding an online vote in which site visitors can select from among five finalists, who have already win $25,000 each.  Two of the user generated ads will run during the Super Bowl, along with an ad created by the comedy group the Lonely Island Boys.  The maker of the advertisement that performs best will win $1,000,000.  If the Lonely Island Boys win the money will go to charity.

Perhaps I’m a bit jaded, but to me the concept of user-generated ads feels a bit overdone at this point.  Doritos might have been better off coming up with a  fresh gimmick.

To follow the buzz about the Super Bowl on Twitter, check out our tool Slurp 140.

There is little doubt that the 2008 Obama campaign was the most sophisticated digital operation in the history of politics.  It is not really close.

Given how high the bar has been set, there was a lot of hype surrounding the November release of the 2012 version  www.barackobama.com, which features a responsive design.    Responsive designs are all the rage these days, as they allow a site to automatically resize based on the resolution of the device the visitor accesses from.  This approach prevents web developers from having to create specific versions of your site for desktops, smartphones and devices like the iPad.

When well executed, a responsive design can be a thing of beauty.  Here are some great examples, with the Andersson-Wise and Boston Globe sites being particularly impressive, albeit in vastly different ways. 

When done right, a responsive design creates compelling user experience on all devices.  Unfortunately, I don’t think the Obama site achieves that goal. 

Desktop

In a podcast about the new site launch, members of the Obama site team emphasized that they designed for mobile first.  I think this is a nice sound bite, but in practice it just isn’t true.  While mobile is growing rapidly, I would guess that 80% of the traffic on the Obama site still comes from traditional desktop user.  Frankly, it wouldn’t be smart to design for mobile first.  And the Obama campaign didn’t. 

As you can see, the site looks great on a desktop (screenshot below).  It loads well in all browsers and looks great at all resolutions.  I particularly like the use of a fixed navigation bar and the presentation of top stories as boxes of varying sizes.

iPad

The user experience falls apart a bit if you view the site on an iPad in portrait view.  The top story boxes that line up so nicely on a desktop stack in a random fashion.  The text of the “State of the Union” cuts off a bit.  It just looks kind of sloppy (screenshot below).

However, if you view the site in landscape view on an iPad it looks just as fantastic as it does on a desktop.  And if you click through the site on an iPad in both portrait and landscape views, things display nicely and work well.

iPhone

It is on the iPhone where the trouble actually starts.  When I first visit the site on an iPhone I’m taken to a mobile splash page asking for my email address.  The splash page design looks to not have been updated from the campaign’s previous mobile site, with the shades of blue and iconography not matching the redesigned site.  

Perhaps more importantly, when you click on the “Full Site” link to skip past the sign up page I’m taken to a Page Not Found error.  That is a pretty big mistake to make on an initial splash page.

Once I get past the splash page and get to the homepage on the iPhone, this is what I see.

Everything renders brilliantly, but you see very little content initially and you have to scroll forever to access all the content.   Instead of being optimized for mobile, it feels like a versions of the main site shoehorned to fit in a mobile browser.

Further, if you explore the site a bit a bit on mobile you will find a variety of small little errors beyond the one on the splash page.  As an example, if you click on the Create Account link that is featured prominently you will be taken to this page.

The page encourages users to login, and then includes a box asking you to register if you don’t have an account.  The register link is cut off, and you can’t actually scroll to the right to access it.  So users are essentially boxed out from registering on a mobile device.

If you search for “barack obama” in a mobile browser, you get this ad from the campaign that encourages people to register for mobile updates.  This strikes me as really smart. 

But when you click on the link to register for mobile news, you are taken to the main mobile site homepage which doesn’t include an obvious email or text message sign up.   So the great idea of using the ads to encourage mobile sign ups is ruined by poor execution.

Conclusion

The Obama campaign deservers a ton of credit for building a site with a  responsive site.  I applaud the ambition, and think the site works great on desktops and generally performs well on the iPad. 

However, I don’t think the responsive design developed by the campaign creates a compelling user experience for mobile users.  In addition to being buggy, I’m not sure that the approach is right.

The previous iteration of the Obama site featured an optimized mobile site that looked like an iPhone application.  The screenshot below shows the old and new mobile sites side by side.

While simplistic, the previous mobile site presented users with clear choices.  You could quickly find what you were looking for.  The new site assumes mobile users will take the time to scroll to find the content they are looking for.  This is a pretty big leap of faith.

Given the resources that are available, I would have rather seen the Obama campaign build a fantastic site optimized specifically for mobile instead of limiting itself to a responsive design. 

As most of you know, splash pages are those annoying introductory pages that ask you for your email address before letting you access the actual website you are trying to visit.  Having worked in digital for ten years, I can make two definitive statements about splash pages:

1. They work.  A well executed email splash page harvests email addresses from between 10-30% of visitors, depending on audience, message, etc.
2. Visitors hate them.  Splash pages put a barrier between the user and the content they are looking for.  Even when well executed, you will probably see between 20-50% users bail without visiting another page.  Ever usability study I’ve seen says not to use splash pages.

When I consult with clients, we talk through whether the increased conversion rates brought about by splash pages are worth the problems they cause for users.  Sometimes the answer is yes.  Sometimes it is no.  It really depends on the overriding mission of the website.

Yesterday I visited the White House website for the first time in awhile and was surprised to see an email splash page featuring President Obama.   When I cleared my cookies and visited again today, I saw the version at the top of this post, indicating the White House is experimenting with different versions. 

If this were the website for President Obama’s reelection campaign I wouldn’t think twice about it.  Emails = donations, and donations are the fuel for all campaigns.  Harvest away. 

Perhaps I’m a hopeless optimist, but it seems to me that the White House website, which is paid for by taxpayers, should have a purpose higher than conversions.  The number one priority of the White House site should be to inform.  Putting up a splash page that will automatically drive away a large percentage of visitors seems counter to the spirit of the enterprise.

Mr. President, tear down this wall.

On January 15, 2001, University of Antwerp student Dries Buytaert released the first version of Drupal to the open source community.  Dries had originally developed Drupal as a news site and message board that University of Antwerp students could use for discussion and content sharing.  Drupal has grown into the most popular open source Content Management System on the market, with sites ranging from the White House to Fast Company to Warner Brothers Records built on the platform. 

I started hearing about Drupal fairly early on, and began experimenting with it in around 2005.  In 2006 we fully committed to Drupal, and it is now the  primary platform for all of our web development projects.  Embracing Drupal is one of the best decisions we ever made.  It is a great platform with a phenomenal support community.  It is simply the best open source Content Management System out there. 

So as Drupal turns eleven this Monday, we wanted to thank Dries Buytaert for his stewardship of the platform and commemorate the occasion by showcasing some of our Drupal sites.

Live Projects

• Mark One Partners
• Podesta Group
• Panthera
• Institute for the Study of War
• Foreign Policy Initiative (homepage only)
• No Labels Make Congress Work
• No Labels Main

Many people use the start of the new year as an opportunity to reflect  and recalibrate.  We are going through this process ourselves at the Brick Factory.

As a way of holding ourselves accountable and providing a peek as to where we think digital is going, we decided to share publicly some of our goals for the new year.

(1) Master mobile.

With the rise of the smartphone and the iPad, it is sort of a given that the way people surf for information online is undergoing a sea change.  It is estimated that by 2014 more people will access the Internet via mobile phones than via desktop computers. For most people, this is just interesting trivia.  For us, this trend will fundamentally change the work we produce and make us obsolete if we’re not careful.

In 2011, we built a number of mobile sites, improved our application development capabilities and experimented with responsive design.  But we didn’t do enough.  In 2012, we need to further develop our mobile capabilities and integrate mobile into everything we do.

(2) Embrace HTML5.

At this time last year, HTML5 was something that was still on the horizon.  A lot has changed in the last year.  Browser support for HTML5 has increased dramatically.  The lack of support for Flash on the iPad/iPhone has sped up the transition to HTML5.  Flash killed mobile support, effectively conceding defeat to HTML5.

A recent study found that 34 of the 100 most popular websites in the world use HTML5.  Interestingly, the seven most popular sites on the web (Google, Facebook, YouTube, Yahoo, Baidu, Wikipedia and Blogspot) all use HTML5.  When goliaths like these embrace a technology, it is time to jump on the bandwagon.  The time for HTML5 is now.

We have strong HTML5 capabilities  already, as evidenced by our HTML5 Christmas card.  But we need to get better.  We need to start taking advantage of all of HTML5’s features to deliver higher quality work for our clients.

(3) Always think strategically.

It is no secret that a lot of digital agencies sell tactics masquerading as strategy.  It isn’t hard to do.

We have always prided ourselves on focusing on substance, and developing digital strategies that have an actual impact on our client’s bottom line.

Despite our best intentions, too often last year  we got so caught up in the process of creating that we lost site of the why.  We let ourselves become a hamster on a wheel, and in some cases the work suffered as a result.

In 2012 we will strive to bring our best thinking to every situation.  We need to make sure to always ask why.

(4) Sweat the details.

The difference between a good website and a great one is in the details.  How a form works.  How a site renders on an iPad.  The typography.  The rollover styles.    Steve Jobs summed it up pretty well:

“When you’re a carpenter making a beautiful chest of drawers, you’re not going to use a piece of plywood on the back, even though it faces the wall and nobody will ever see it. You’ll know it’s there, so you’re going to use a beautiful piece of wood on the back. For you to sleep well at night, the aesthetic, the quality, has to be carried all the way through.”

We didn’t handle the details as well as we should have in 2011.  In 2012, we will strive to always use a beautiful piece of wood on the back.

When I worked at The Bivings Group, we always sent out traditional holiday cards.  The cards  were amazing due to the talent we had on staff, but it always seemed strange to me to produce a printed card.  As a digital agency, it seemed to me that we should do something digital.  So when we launched the Brick Factory, I knew I wanted to do something that was more in line with the work we do for our clients.  I wanted to take the opportunity to showcase the amazing talent of our staff. 

So this year we decided to give our website a holiday makeover and to produce a digital holiday card that shows off our HTML5 chops.  Check it out.

Happy holidays.

Here at the Brick Factory, we understand that competition for donor dollars is fierce in this economy. Having worked with many nonprofit and political organizations we know you have to be creative for your fundraising to have an impact.

Giving eCards is a new product that provides organizations with a creative and cost-effective way to raise money online. An eCard is a personalized image and message that an organization’s supporters can send to their friends and family. Giving eCards allows supporters to send a custom eCard through the site while making a donation to your organization in someone’s name.

How it works from an organizational perspective:

1. Organizations sign up for a free account on www.givingecards.com. When signing up, the organization reserves a custom URL for their Giving eCards page.
2. Once the account is created, organizations upload their custom designed eCards to their account. eCards can be categorized dynamically, allowing for sets of cards to be created for common occasions such as birthdays, New Year’s, graduation, etc.
3. Once the eCards are uploaded, the organization promotes their eCard page to their supporter base via email, social media, website links, etc.
4. As supporters donate and send cards on behalf of friends and family, the money is automatically deposited into the Paypal account of the organization. Giving eCards takes 5% of the amount raised on top of Paypal’s fees.
5. Organizations can access and export all donor information from their Giving eCards control panel at any time.

This Christmas, give your supporters a great gift idea and grow your organization at the same time with Giving eCards.