New Media Campaigns Blog

10 Common Mistakes Political Campaigns Make with Facebook Pages

Tyler Pearson — Thu, 02 Feb 2012 16:38:33 -0500

1. Not promoting it

The first tip is super-straightforward, but it is so important yet so often overlooked that it is worth mentioning first. Once you create a Facebook page it needs to be promoted for voters and supporters to ever find it. Add a link to the page wherever you can online, including the campaign website, Twitter account, and Youtube video descriptions. Additionally, promote the page offline in places like on direct mail, campaign literature, TV ads, and in a candidate’s stump speeches.

Targeting Facebook ads to voters and potential supporters can also be tremendously cost-effective, so use some of the money budgeted for online ads (you are, right?) to promote the page.

2. Setting up a personal profile for a campaign

This is very basic, but I still see many campaigns get this wrong. Campaigns should be using a page, not a personal profile for a candidate.

3. Having both a personal profile and a page for a candidate

It’s the year 2012 and most people are on Facebook, including many candidates. Additionally, many candidates have been on Facebook for years now and accumulated quite a few friends. So the question often pops up on what should be done with a personal profile while a campaign is going on. It's best to simply hide the personal one through the duration of the campaign so voters don’t get confused trying to decide which place to connect.

4. Neglecting to set up a vanity Facebook url (and as soon as possible)

As soon as a page hits a certain level of “likes” (currently 25), a personalized url can be set up for the page that makes it much easier to remember. For instance, the default url for your page will look something like: http://www.facebook.com/pages/Bob-Smithford/143854752232314.

A personalized Facebook url allows it to be a much simpler: http://www.facebook.com/bobsmithford.

Also, while this isn’t always possible, ideally this should be the same as your domain and usernames for every social network you are on. For example, take the Obama campaign: the domain name is barackobama.com, the Facebook url is facebook.com/barackobama, the Twitter username is @barackobama, and the Youtube username is BarackObama. Keeping a name the same across platforms makes it much easier for supporters to find the pages.

5. Promoting a page on print and TV with just an icon instead of a url

On the web you can simply click an icon and it will take you to the website -- but you can’t do this with a postcard or TV ad, so including a url is import so supporters can find a candidate’s Facebook page.

In the same way that you wouldn’t add an icon of a website and tell people to go there without mentioning the url, don't only add a Facebook icon and expect people to find it on their own. Use the personalized url set up for your page and include that on any print or video pieces the campaign puts out.

6. Never looking at Facebook Insights

I’ve often found campaigns don’t realize the wealth of information they have access to through the Insights tab on a for the Facebook page. There a wide range of data that can provide insights things like:

the demographic makeup of those who “like” a page
the best times for posting and the most interacted with type of posts
the number of people reached through a post
number of interactions with a post
how many times a Facebook page has been viewed

7. Not setting up a custom landing tab

Facebook allows a tab other than the wall to be designated as the first tab visitors will see that visit a Facebook page and are not yet fans. Facebook also gives us the ability to customize a tab specifically how we want it. By combining these two options, campaigns have a great opportunity to convert interested voters into supporters and supporters into donors, volunteers, and more. By default, visitors are shown the wall of a page.

As an example, take a look at how Mitt Romney's landing tab is currently set up. While there is more to it than is probably necessary, it includes valuable elements like an email signup, donation call to action, and more information for voters on why Romney should be President.

Another example is the signup shown on Elizabeth Warren's Facebook page:

8. Auto-posting tweets to Facebook

Facebook and Twitter may both be social networks, but both are different from each other in how best to use them. Many campaigns are tempted to autopost tweets from a campaign Twitter account to a Facebook page (or vice versa), but doing doing so removes the ability to customize messaging for the platform.

There many reasons not to do this, but here are a few:

Facebook allows more characters than Twitter, so it makes sense to take advantage of that and use when necessary
Facebook gives users the ability to attach links, videos, and picture with a status update. This is lost when autoposting
It looks lazy to voters
There's a good chance a campaign will not notice and consequently not respond to any comments people may leave on the Facebook update
It's much more likely that you will inadvertently barrage users with too many status updates because Twitter is set up for more frequent updates than Facebook

9. Using the Facebook page to dump press releases and official statements

Keep the press releases and official statements to the reporters and customize your message with a more personal feel for people on Facebook. Press releases are boring, so resist the urge to directly post these to a page. If you do, don't expect fans to actually want to read what is posted. Instead post pictures, videos, and shorter messages that people will actually look at.

Compare North Carolina Governor Bev Perdue’s Facebook page to Florida Governor Rick Scott’s Facebook page. Which do you find more interesting?

10. Adding the position sought to the candidate’s Facebook page title

This is something I know other people disagree with, but I strongly believe that the title for a Facebook page should only be the candidate’s name and nothing more. For example, use “Frank Miller” instead of “Frank Miller for Springfield City Council” because once Frank Miller gets elected, he will want to keep using the Facebook page but the “for Springfield City Council” will no longer be correct. Alternatively, if Frank loses and runs for mayor in two years, the previous page will no longer be able to be used and the campaign will have to start from scratch again.

Facebook doesn’t allow changing a page title if there are over 100 likes, and it’s an awful feeling when you realize the page you worked hard to build to hundreds or thousands of fans is no longer able to be used because the title is incorrect. Keep it simple and stick with solely the candidate’s name -- in the long run you will be glad.

Unveiling our New Case Study Format

Joel Sutherland — Wed, 25 Jan 2012 14:38:29 -0500

We've always really liked the way the portfolio section of our website works. Even though we've redesigned our site several times over the years, we've kept the same layout and functionality: a grid of thumbnails that can be filtered by category. This works well because it is easy for prospective clients to find work we've done that interests or is relevant to them. Additionally, the large body of work demonstrates our experience across a wide variety of projects.

Where it falls short is in showing the detailed approach we take to every project we do. To paint a clearer picture of the way we work on projects, we're now writing up some of them as case studies. These give a better picture of our process and the thought that goes into each aspect of the site development process. Additionally, each one contains a beautiful photo (thanks to @markitos57) of the website in action.

Ciao Italia

North Carolina's Southeast

Ward and Smith

Recap of "Functional Programming" talk at Triangle JS/PHP/MySQL Meetup

Kris Jordan — Wed, 25 Jan 2012 11:54:47 -0500

Last night I had the pleasure of giving a talk on 'Functional Programming' techniques in JavaScript and PHP with an emphasis on the popular libraries underscore.js and underscore.php. The event was the annual joint gathering of the TriangleJS and Triangle PHP/MySQL Meetups.

We started out with some coverage of why functional programming is compelling to learn and what exactly it is. Functional programming, at its roots, is the idea that functions are values so they can be assigned to variables, passed to other functions as arguments, and returned from functions as return values. We looked at some examples of each which are best illustrated in the slide deck linked and embedded below. We hit on some of the facilities provided by the underscore library. Finally, the conclusion of the talk was a live coding session (with only one syntactical error! thank the Live Coding Gods) where we started fleshing out a little, functional SQL-like DSL for querying data in-memory.

Overall it was a great time and I really appreciate the TriJS / TriPHP&MySQL groups for putting the event together!

Slides are available on SpeakerDeck. Demo code is available on GitHub.

Accept campaign donations with the NGP contribution API

Josh Lockhart — Mon, 09 Jan 2012 12:25:20 -0500

UPDATE: This article is a follow-up to an earlier article on our blog about the NGP contribution API written by Eli Van Zoeren. We have since updated the code we use to integrate with NGP's contribution API. Our newest code is explained in this article.

New Media Campaigns works with many political clients that use the robust NGP fundraising and contact management platform. Unfortunately, the NGP donation API has proven a tough nut to crack due to sparse documentation. However, we’ve written a PHP class that makes it super easy to integrate with the NGP donation API so you can avoid the hassle and start accepting political campaign donations right away.

Using the NgpDonation class

The NGP donation API exposes a SOAP web service that consumes an XML request and returns an XML response. Our NgpDonation PHP class provides a human-friendly wrapper around the NGP SOAP API. Accepting contributions with the NGP donation API has never been easier.

Require the NgpDonation class

First, require the NgpDonation PHP class into your PHP script:

require 'NgpDonation.php';

Instantiate the NgpDonation class

Next, create an instance of NgpDonation. The class constructor accepts three arguments:

Your API credentials string provided by NGP.
A true or false value that will send or not send email notifications to the donor upon receipt.

An associative array of donation fields (see full list).

$d = new NgpDonation('your-credentials', true, array(
    'FirstName' => 'John',
    'LastName' => 'Doe',
    'Address1' => '100 Elm Street',
    'Zip' => '12345',
    'Cycle' => '2012',
    'Amount' => '50.00',
    'CreditCardNumber' => '4111111111111111',
    'ExpYear' => '13',
    'ExpMonth' => '05'
));

The NGP API requires that you provide at least these fields (case-sensitive) to collect a donation:

FirstName
LastName
Address1
Zip
Cycle
Amount
CreditCardNumber
ExpYear
ExpMonth

A list of all donation fields and field descriptions is available below.

Process Donation

Finally, accept and process the donation like this:

$result = $d->save();

The $result variable will be a boolean value indicating success or failure. If $result is false, you should inspect the NgpDonation instance for reasons why the donation failed.

Error Handling

Missing Fields or Transaction Errors

If you were unable to accept a donation, you may be missing required fields or the credit card may have been declined. Check for errors like this:

if ( $d->hasErrors() ) {
    $errors = $d->getErrors();
}

The $errors variable will be a one-dimensional array of error messages. Usually, this array will indicate that several required fields are empty or missing.

SOAP Fault

There may also be an error with the SOAP API itself. In this scenario, a SoapFault exception will be thrown and caught by your NgpDonation instance. You can check for and inspect the SoapFault exception like this:

if ( $d->hasFault() ) {
    $fault = $d->getFault();
}

In this example, $fault will be an instance of SoapFault that you may inspect as needed.

Inspect the API response

If all else fails, you can inspect the XML response from the NGP API with the NgpDonation instance’s getResult() method. This will return a SimpleXMLElement object.

$result = $d->getResult();
var_dump($result);

Example

HTML Form

<form action="" method="post" accept-charset="utf-8">
    <p>
        <label for="FirstName">First Name</label>
        <input type="text" 
                  id="FirstName"
                  name="donation[FirstName]"
                  value=""
                  required/>
    </p>
    <p>
        <label for="LastName">Last Name</label>
        <input type="text" 
                  id="LastName"
                  name="donation[LastName]"
                  value=""
                  required/>
    </p>
    <p>
        <label for="Address1">Address</label>
        <input type="text"
                  id="Address1"
                  name="donation[Address1]"
                  value=""
                  required/>
    </p>
    <p>
        <label for="Zip">Zip Code</label>
        <input type="text"
                  id="Zip"
                  name="donation[Zip]"
                  value=""
                  required/>
    </p>
    <p>
        <label>Amount</label>
        <input type="radio" 
                  name="donation[Amount]"
                  value="100"/> $100<br/>
        <input type="radio"
                  name="donation[Amount]"
                  value="500"/> $500<br/>
        <input type="radio"
                  name="donation[Amount]"
                  value="1000"/> $1000
    </p>
    <p>
        <label for="CreditCardNumber">Credit Card Number</label>
        <input type="text"
                  id="CreditCardNumber"
                  name="donation[CreditCardNumber]"
                  value=""
                  required/>
    </p>
    <p>
        <label>Credit Card Expiration</label>
        <select name="donation[ExpMonth]" required>
            <option value="01">01 - January</option>
            <option value="02">02 - February</option>
            <option value="03">03 - March</option>
            <option value="04">04 - April</option>
            <option value="05">05 - May</option>
            <option value="06">06 - June</option>
            <option value="07">07 - July</option>
            <option value="08">08 - August</option>
            <option value="09">09 - September</option>
            <option value="10">10 - October</option>
            <option value="11">11 - November</option>
            <option value="12">12 - December</option>
        </select>
        <select name="donation[ExpYear]" required>
            <option value="12">2012</option>
            <option value="13">2013</option>
            <option value="14">2014</option>
        </select>
    </p>
    <p>
        <input type="hidden" name="donation[Cycle]" value="2012"/>
        <input type="submit" value="Donate Now"/>
    </p>
</form>

PHP Script

<?php
require 'NgpDonation.php';
$donation = new NgpDonation('credentials', true, $_POST['donation']);
if ( $donation->save() ) {
    echo "Thank you for your donation!";
} else {
    if ( $donation->hasErrors() ) {
        $errors = $donation->getErrors();
        //Show errors to user
    } else if ($donation->hasFault() ) {
        $fault = $donation->getFault();
        //Log SoapFault for review
    } else {
        $result = $donation->getResult();
        //Log API response for review
    }
}
?>

NGP Donation Fields

This is a comprehensive list of all possible donation fields you may use to accept donations with NGP’s API. Required fields are shown in red.

Contributor Fields

LastName: String. The last name of the donor
FirstName: String. The first name of the donor
MiddleName: String. The middle name of the donor
Prefix: String. A prefix for the donor’s name (e.g. “Mrs.”)
Suffix: String. A suffix for the donor’s name (e.g “Ph.D”)
Address1: String. The donor’s street address
Address2: String. The donor’s street address continued
Address3: String. The donor’s street address continued
City: String. The donor’s city
State: String. The two-letter abbreviation of the donor’s state or region
Zip: String. The donor’s five-digit zip code
Salutation: String. The donor’s salutation
Email: String. The donor’s email address
HomePhone: String. The donor’s home phone number
WorkPhone: String. The donor’s work phone number
WorkExtension: String. The donor’s work phone number extension
FaxPhone: String. The donor’s fax number
Employer: String. The donor’s employer name
Occupation: String. The donor’s occupation
OptIn: Boolean. Should this donor receive future emails about the fundraising campaign?
Organization: String. The donor’s organization

Contribution Fields

Cycle: String. The fundraising campaign’s year cycle (e.g. “2012”)
Member: String.
Attribution: String.
Source: String.
RecurringContrib: Boolean. Will this be a recurring contribution?
RecurringContribNote: String. A note about this recurring contribution
Amount: Float. The amount of the contribution
Attend: String.
RecurringPeriod: String. The frequency on which total recurring contributions will be processed. Options are: MONT, WEEK, BIWK, FRWK, QTER, SMYR, YEAR
RecurringTerm: Integer. The total number of recurring donations

Payment Fields

CreditCardNumber: String. The donor’s credit card number
ExpYear: String. The donor’s two-digit credit card expiration year
ExpMonth: String. The donor’s two-digit credit card expiration month
CVV: String. The donor’s credit card number security code

Download

Our `NgpDonation` class is released under the MIT Public License.

Download the NgpDonation class

Paradigms of Iteration in JavaScript

Kris Jordan — Fri, 06 Jan 2012 17:31:29 -0500

One of the joys of programming is that no matter how simple a problem may seem there are always tons of ways to solve it. It can be good practice to go back and revisit fundamentals by solving simple problems with as many implementations as you can think of. In this post we'll explore approaches to basic iteration in JavaScript.

This style of exercise is a good interviewing technique, too, because it's open ended and leads to good discussions. The focus isn't a tricky, wacky problem you're seeing for the first time ever, but bread and butter programming awareness, command, and comfort. It's a good warmup to get a sense of strengths and depth of knowledge.

A Basic JavaScript Iteration Problem

Iterate through an array of letters, in order, one-at-a-time, and print them using console.print. Here are your letters.

var letters = [ 'a', 'b', 'c' ];

Your solutions should achieve the equivalent of the following hard-coded, brute force solution, except they should handle arrays of any length.

console.log(letters[0]);
console.log(letters[1]);
console.log(letters[2]);

How many different solutions can you come up with? Loop constructs, functions, library functions, you can use any means possible.

Go on, pop open your developer console. Play around.

Did you cover the loop constructs (for, while, do..while, for..in)?

Did you write an enumeration object?

What library functions are in your tool belt (Array.forEach, jQuery.each, underscore.each,...)?

Did you roll your own naive each function?

Did you implement your each function recursively, without using a loop construct at all?

Did you do something mind blowing not even mentioned? Awesome, leave a comment!

Iterative Solutions

When learning a language like Java, C, or JavaScript, one of the first things we're often taught are language-defined looping constructs. With JavaScript's functional capabilities it's possible to avoid using looping constructs almost altogether. We're talking fundamentals, here, though, and it's important to be comfortable with each basic construct. Let's take a look at a while loop based solution.

var i = 0;
while( i < letters.length) {
    console.log(letters[i]);
    i++;
}

How would you transform that while loop to a for loop? Why is a do..while loop awkward to use here? What risk does for..in pose looping through an Array object?

Functional Solutions

JavaScript's treatment of functions as first-class values enables us to avoid writing loop constructs in a wide variety of situations. Resig's jQuery can largely be thanked for encouraging this style of iteration throughout the web development community. Let's solve the problem with jQuery's each function.

$.each( letters, function(i) { console.log(letters[i]); } );
// or
$.each( letters, function(i, letter) { console.log(letter); } );
// or - idiomatic jQuery
$.each( letters, function() { console.log(this); });

jQuery's each expects a callback with a signature of (index,value). This is a different signature than ECMAScript's Array.forEach function which has the inverse and provides a reference to the array as the third argument (value,index,array).

letters.forEach( function(letter) { console.log(letter) } );
// or
['a','b','c'].forEach( function(letter, i, letters) { console.log(letters[i]); });

These iteration functions are nice. Have you implemented one before? If you wrote a for loop you can do it.

Let's implement a naive equivalent that passes just each element's value to the user-defined function.

var each = function( array, fn ) {
    for( var i = 0; i < array.length; i++) {
        fn(array[i]);
    }
};
each( letters, function(letter) { console.log(letter); } );

We've come up with a "functional" solution by abstracting away an iterative solution. A truly functional solution shouldn't need a loop at all. Functions only!

Recursive Solutions

If we can't use a loop construct we'll need to "jump" back to the top of our iteration by invoking a function recursively. Like a loop we'll need a base case an a recursive case. When will we exit and move back down the stack? Here's one take:

var each = function( array, fn, i ) {
    if(i === undefined) { i = 0; }
    if(i < array.length) {
        fn(array[i]);
        each(array, fn, i+1);
    }
}
each( letters, function(letter) { console.log(letter); } );

Look ma, no loops!

Object-Oriented Style Enumeration Solutions

Enumeration/iteration objects are a commonly used pattern in object-oriented programming. This style isn't frequently used in JavaScript, but it's interesting enough to deserve a mention.

Iteration state, in this problem the index in the array, as well as the logic for traversal (incrementing the index from 0 to the end of the array), are both encapsulated within the iterator object.

var iterator = {
    i:       0,
    hasNext: function() {
        return iterator.i < letters.length;
    }
    next:   function() {
        return letters[iterator.i++];
    }
};
while( iterator.hasNext() ) {
    console.log(iterator.next());
}

What is interesting about this approach is you can use different traversal orders without actually changing the logic of any loops that depend on the iterator object. Can you write a reverseIterator? Can you write a functional each to take an iterator object rather than a plain old array? What is interesting about the functional style, about the object-oriented style, about combining the two?

Wrap up

It's good for everyone to get back to the fundamentals every now and then and practice technique. Even trivial programming problems, like printing an array of letters, have non-trivial solutions. Exploring solution spaces can cover a lot of ground and act as a great tool for identifying strengths and discomforts.

What other solutions did you come up with?

Link Vulturing: An Interesting New Link Building Tactic

Joel Sutherland — Wed, 04 Jan 2012 16:30:00 -0500

A little while ago, we received a form submission on our website that struck my curiousity:

Hi,

I just wanted to let you know that you have a broken link on an old entry of yours, here:www.newmediacampaigns.com/page/how-trent-reznors-new-media-tips-for-musicians-apply-to-your-organization

Specifically, the website doshdosh.com went offline in 2010 and no longer exists. If you are interested in correcting the link though, we've written a similar blog post about word of mouth marketing here on our blog so that you could fix it:
blog.hubspot.com/blog/tabid/6307/bid/30490/The-Qualities-of-a-Powerful-Word-of-Mouth-Marketing-Strategy.aspx

Thank you!

[redacted]@hubspot.com

We get a fair number of link requests from people hoping to build their Page Rank, but this one is a bit more compelling. It offers something useful: replace a dead link with one to our site.

When I get a request like this I tend to think about how it came about. Did this person actually visit our post, find a dead link and then look for useful content that could replace it? Was it a bot? I can never tell for sure, but in this situation I think there is a somewhat interesting story behind the link request.

The site that went down, doshdosh.com was an extremely popular web marketing blog (34k subscribers) that went offline somewhat mysteriously about two years ago. Even more strangely, the site went offline even though it wouldn't have required much upkeep to be fairly profitable given its traffic. Hubspot, the company requesting the link, runs an even more popular web marketing blog. They would obviously love to capture some of the doshdosh.com PageRank.

In order to do this, Hubspot needed to do a couple of things:

Gather a list of all DoshDosh.com URLs
Gather a list of URLs that link to those DoshDosh.com URLs (These could be ordered by PageRank)
Map the URLs to relevant Hubspot Blog posts
Create a link request template
Manually go through the urls in step 2 and send the requests

What's amazing is how much of this process can be automated. The DoshDosh urls can be pulled from the web archive. The sites linking to those urls, ordered by PageRank can be done through the amazing SEOMoz Site Intelligence API. The link request templates could then be assembled in excel. In short order, hundreds of requests could be sent out.

I think calling this vulturing is apt. In nature, the vulture benefits and survives by playing a critical first step in the decomposition process. The web has always been plagued by dead links that infrequently get fixed. This tactic could become more widespread; it's automated and fairly symbiotic to the requester and the requestee.

So have we updated our dead link? Not yet. We probably won't -- we're just not sure how we feel about it.

A Beautiful Proposal Makes a Great First Impression

Alex Pomer — Thu, 29 Dec 2011 10:57:31 -0500

A lot of people, including us, are putting more emphasis on mobile website design because of the increasing frequency of readers viewing content on mobile devices. People are doing much more than just looking at websites on their mobile devices however, they're reading books, watching movies, playing games and checking email.

NMC's first impression on many of our clients is our proposal. And more often than not, this first impression comes into their inbox. In the last two years, checking email on mobile devices has increased 20%, whereas viewing email on a desktop has decreased by 11%. That's why we put great care into making sure our proposal looks beautiful on cell phones and tablets, in addition to when printed out or viewed on a desktop.

The attention to detail and effort in a proposal's design can go a long way toward showing a potential client the quality of your work and the care with which you approach projects. Apple is notorious for paying close attention to the design of the packaging of its products. They ensure that when it comes to their products, if people are going to judge a book by its cover, they're going to judge that cover favorably.

The same is true for a proposal. When a potential client's first impression of your firm's work is often your proposal, that first impression needs to show the attention to detail that you put into your work. And that attentional to detail should come across no matter where they're viewing your proposal. Make sure to think through every possible way a potential client will interact with your firm and the materials you provide them.

2011 In Review

Clay Schossow — Fri, 23 Dec 2011 17:30:00 -0500

2011 was an exciting (and fast) year for NMC! Our company added new team members, launched sites for organizations around the world, strengthened our product offering, and sparked some exciting new partnerships. We're all really proud of the work we did this year for a variety of clients. Below are some highlights from client projects and NMC successes in 2011.

2011 NMC Highlights

Growing team. We were really excited to add two talented developers to our team, this year! Ashley Bennett joined as a front-end developer right after graduating from UNC's School of Journalism in May. She has been a great addition to our team, designing and coding sites for a variety of clients since she came on board.

Tyler Pearson quickly followed, coming on board in September as a designer and developer. Tyler came from West Virginia where he had previously been running his own company, Blue Peak Digital, focused on political campaign websites, making him a great fit to help us serve our political client base in addition to the work he does for our other clients.

Finally, at the turn of the new year, Claire Atwell will be joining us as a Project Manager. Claire interned with us while an undergrad at UNC and joined a digital marketing company after graduation until we convinced her to rejoin the NMC family. We couldn't be happier with the quality of people and depth of talent we've added over the past year.

Launching more than 50 Fleet Feet Franchise websites. While we are proud of all of the projects we have been a part of in the past year, there's one in particular that stands out to us. Early in the year, we launched a site for Fleet Feet Sports, a national franchise of running gear with more than ninety stores around the country. That process went so well that they enlisted us to setup a standard template that franchises could choose to use. The new template would help unite stores with a common look and brand and also make available many new features powered by our CMS.

We were overwhelmed by the response from the franchises and have already launched more than 50 different franchises onto the template. The stores span from California to New York and are all running on a unified template that ensures new features benefit all franchises and that we can continue to improve the template for all franchises into the future. The template lets the stores register people for races, publicize upcoming specials, integrates their social media, provides fitness calculators, and plenty more. It was a real blast to work with so many small business owners around the country and help them launch their new sites.

Improving HiFi CMS. While our primary emphasis has been building powerful online campaigns for our clients around the country, we were still able to spend a lot of time improving our product HiFi Content Management System to both benefit our business and the developers around the world using the platform. Improvements have ranged from fine tuning the UI to building out new features. The new features have really rounded out the product into what we think is a premiere platform. NMC occasionally uses different systems like WordPress, Drupal, and ExpressionEngine for certain projects, but each time we complete one of those, we're reminded what a joy it is to have such a powerful and flexible system like HiFi at our disposal. We have heard those same sentiments echoed by other agencies and developers who have fallen in love with HiFi and now use it as their preferred platform. If you haven't tried the system recently, go sign up for a free trial to see the new features and experience the system.

Moving to a new office. In November, we were excited to move to our new office, a store front in downtown Carrboro. We're still working on getting the space decorated, but we have already been enjoying the added space and wonderful location. We've enjoyed all of you who have stopped by and encourage others to feel free to poke their heads in. To see the space and read more about why we needed a change, read our blog post about the move.

Launching our new site. Early in the Fall, we launched a new site for ourselves. It was a long process as client work always came first, but we are really excited with the final product and how it has been performing. The new site aimed to put our work up front and center and also give clients a better feel for the quality of work we do. We also built in several cool features like our filterable portfolio and our Footprint, which lets you sort through all the content our team is creating. Read what Joel had to say after the launch about the process and some specific features to check out.

Going 8-2 in 2011 general elections. We continued our strength in building political campaign websites and online campaigns by going 8-2 in the 2011 general elections. It was an exciting year in politics, and we're proud of all our clients and the work they did. We're looking forward the big election cycle in 2012, and we have already lined up a roster of campaigns that we're really excited to work with and help them win.

2011 Featured Site Launches

Fleet Feet Sports

NC State's Industrial Extension Service

Children's Mental Health Network

North Carolina's Southeast

FAAN

Harris Cloud Computing

Looking to 2012

2011 was a great year for our company and that has us incredibly excited for our prospects in 2012. We're excited about projects already in the pipeline and others that we haven't even imagined yet. In 2012, we're hoping to expand our portfolio of mobile projects, as mobile becomes such an important element of any online campaign. We're also excited to take on more custom development projects as our team has technically grown and also been freed up from the initial HiFi sprint. Finally, we want to continue to grow and promote HiFi as the leading hosted Content Management System for developers around the world. All of this of course is in addition to building great sites and online campaigns for our clients and helping them market on the web. It should be an exciting year and we hope to have a chance to continue to collaborate with all of our clients and build on those relationships.

Thank You!

None of the items listed above would be possible without the continued support of our clients, friends, and family, and we want to extend a very heartfelt thank you to everyone for helping us continue to grow. We look forward to seeing all of you in 2012 and hope you stop by the new office. Thanks!

Building a Mobile Site with Clever Navigation

Josh Lockhart — Fri, 16 Dec 2011 17:35:00 -0500

We recently built a mobile website for YourTown CMS in partnership with Liaison Design Group. We've had increasing demand for mobile web development lately, and we're particularly excited to show off our success on the YourTown CMS mobile website.

Mobile-Friendly Navigation

We were inspired by an example we saw in "Mobile First Web Design" recently released by Luke Wroblewski through A Book Apart. A simple "Navigation" hyperlink resides at the top right corner of each page. When you click the link, the page whooshes upwards revealing the site navigation. The navigation links allow you to jump to another page or return to the current page. It's a simple but effective — and really cool — way to implement mobile website navigation while still keeping content front and center.

Screenshots

Here are a few screenshots of the YourTown CMS mobile website.

Mobile Javascript Framework

The website is driven by a simple, light-weight Javascript mobile framework created by our own Joel Sutherland. The framework routes hash-bang paths to appropriate jQuery templates populated with data pulled down from the HiFi API. It's a brilliant bit of code and is still getting some polish before it's public release. Look for this soon.

Visit the YourTown CMS website