New Media Campaigns

Following content management's core concepts with your CMS

Tue, 10 Nov 2009 10:00:00 EST

Content Management is nothing new, but it does have its fair share of growing pains as it relates to the web. With the number of options readily available, it is easy for designers, developers and clients to lose sight of content management's core principals:

Sorting 'Stuff' — content defined by an end-user — into a content repository.
Support the workflow of the end-user.

The web community has the first principal down thanks to relational databases, but we really struggle with the second. Since the end-user can vary from an individual with varying skill sets to a large corporation with endless resources, demands on a Content Management Systems and its specific workflow have create countless options in the marketplace.

With each options comes a list of pros and cons, fanboys and detractors which ends up creating some misconceptions. Here are some misconceptions I've read repeatedly in the last few weeks that neglect to take these core principals into account:

One type of system is better than other.

Is it better to go open source, third-party or proprietary system? Truthfully, there is no right answer because each option can meet your goal of publishing content to the web but could create a potential workflow nightmare.

I use to advocate for using third-party software. I preferred working with a system that offered continuing support thanks to its customer base. If I was unable to continue to help client with maintenance there was always someone within the community. Now a client would never feel like they've wasted their investment on piece of technology.

That philosophy helped me in large part but I'm not sure it was in my clients best interest. When I started using other technology that better suited their workflow needs, I found myself getting more projects in the long run. Just because a company can afford an expensive system doesn't mean Wordpress isn't the best solution for their needs.

With the volume of clients and sites we work on, our proprietary system has proven the best option over time and I realized that within my first few days here.

CMSs should be more open to customization.

I think there is a false perceptions in the title 'Content Management System.' People seem to infer that they should have more control over the system itself and this can lead to people neglecting the content itself. Not all systems are created equal, so you can't be under the assumption any system will meet your needs.

If you feel like your system can't be customized, you have either chosen a system that doesn't fit into your workflow or you didn't define your content before development began on your system (I'll discuss defining your content in a future post). By ignoring your content from the start, you won't have a clear understanding of the work needed to publish your content and you will feel limited by any system.

Buying into a system means that you are committing to a set of standards, like a fixed design, so that you can produce and manage content quickly be streamlining your workflow. If you can't conform to any set of standards, moving to a CMS isn't in your best option.

I don't need to learn HTML now that I have a CMS.

The point of moving to a CMS is to avoid coding and/or reduce the reliance of a developer to speed up your publishing process, creating a better workflow. So why would I have to learn HTML when I have a WYSWYG editor to do the work for me?

You don't.

While there is no need to learn the syntax of a web language like HTML still you need to have an general understanding of how it works. You need to realize that pasting source code info your CMS from an e-mail newsletter is going to break your page in all likelihood. You need to realize when something is outside of the workflow of publishing content.

CMSs are bad for SEO

This goes back to the same ideas with customization: If you don't make SEO part of your workflow and create/use a system with it in mind early, it's going to make it harder to have good SEO. If that's the case, is it the systems' fault or yours?

Conclusion

The success of any CMS is tied to its ability to conform to your workflow. Most complaints with specific systems can be drawn to the fact they weren't developed with your particular workflow in mind. After all, the end goal of using a system is to publish and management content easily and quickly. Most systems can accomplish that, which is align with the first principal.

Having only worked with our in-house system for a few days, I can tell the team put careful thought into the workflow and it seems to be paying dividends.

Three Ways to Target Mobile Devices

Mon, 09 Nov 2009 11:05:00 EST

We recently launched a beta version of a New Media Campaigns mobile Webkit site. If you're reading this post from an iPhone, iTouch, Palm Pre or Android based phone you're seeing it right now. Josh Lockhart did the design and frontend code for the site, a topic he will be covering in a post later this week.

This post discusses how to target mobile devices and show them either different content, different stylesheets or even redirect to a mobile URL. Ideally, the check would be done for ALL mobile webkit platforms, not just the iPhone. It would be a shame to leave those Android/Palm out after developing a pretty mobile site. So without further ado, here are the methods:

1. Checking User Agent Serverside

When a browser visits a site, it sends a string describing who it is called the user-agent string. It varies depending on the browser and platform. The user-agent string for key mobile webkit browsers are:

iPhone - Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
iTouch - Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3A100a Safari/419.3 
Android - Mozilla/5.0 (Linux; U; Android 0.5; en-us) AppleWebKit/522+ (KHTML, like Gecko) Safari/419.3
Palm Pre - Mozilla/5.0 (webOS/1.0; U; en-US) AppleWebKit/525.27.1 (KHTML, like Gecko) Version/1.0 Safari/525.27.1 Pre/1.0

Unfortunately there is not a good way to check for mobile webkit in general. So each of these needs to be checked for in a case by case manner. Here is some rough php to do that:

if( strstr($_SERVER['HTTP_USER_AGENT'],'Android') ||
	strstr($_SERVER['HTTP_USER_AGENT'],'webOS') ||
	strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||
	strstr($_SERVER['HTTP_USER_AGENT'],'iPod')
	){
	// Send Mobile Site
}

We did this type detection since we wanted to send completely new templates for pages at the same URL. This worked nicely with our CMS since both the normal frontend and the mobile fronend were updated from the same database. We could also use this technique to redirect to a mobile URL if that is how we wanted to present our mobile site.

2. Checking User Agent Clientside

This method simply uses javascript to check the User Agent after the page has loaded. The obvious downside is that it first requires mobile visitors to load your standard site which might be fairly heavy. It is fine to use in a pinch where you are not able to modify server-side code.

Here is some javascript to detect the mobile webkit browsers:

if( navigator.userAgent.match(/Android/i) ||
	navigator.userAgent.match(/webOS/i) ||
	navigator.userAgent.match(/iPhone/i) ||
	navigator.userAgent.match(/iPod/i) ||
	){
 // Send Mobile Site
}

You can use this method to either redirect to a different site, send a different stylesheet or whatever else you may need to do for a mobile site.

3. Use CSS Media Type

If your HTML doesn't need to change between your mobile site and standard site, it may make more sense to send a different stylesheet just to mobile browsers. There are a couple of ways to do this, but using the media type capabilities of CSS may be the way to go.

To load an entirely different stylesheet, use the media attribute when loading the stylesheet:

<link href="mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />

Alternatively you can just add some declarations into your existing stylesheet:

@media screen and (max-device-width: 480px) {
    /* mobile declarations */
}

This method is a little dangerous since it depends on the screen resolution to send the stylesheet. A mobile site is generally not different from a typical site because of resolution alone; it is also different because of the physical screen size of the device. For instance, the new Verizon Droid has roughly the same screen dimensions of the iPhone but a resolution of 854px by 440px! Serving a mobile site to this device makes sense even though it has such high resolution.

If you've done a mobile site and have a perferred method be sure to share the site and the method in the comments.

Recap of Internet Summit 2009 in Raleigh

Fri, 06 Nov 2009 09:50:00 EST

Yesterday was the second annual Internet Summit in Raleigh. We were excited about the event, so we sent three NMC Team members, including myself. The event boasted an impressive speaker list, including the founder of Technorati, president of Pandora, and the CEO of Lending Tree.

With these big names on the roster and an imposing (maybe read: pretentious) event title like the Internet Summit, it was clear that the event was trying to reach national exposure and pull attendees from across the country. I applaud the Triangle area for trying to cement our reputation as a hotbed of tech and startups by hosting the Summit.

The panel topics ranged from the very technical (Cloud computing) to entrpreneurial (Growth & Liquidity) to buzzwords du jour (Social Media and Real Time). While I enjoyed all of the different options, and we often found ourselves splitting up to see different panels because there were a couple good ones in the same time slot, I think it may have been overly ambitious to cram the whole Internet into a single day.

I would've preferred if they made one or two areas, say Search Marketing and Social media, the focus of the majority of panels and then sprinkled in other topics, rather than having such a broad focus and single panels covering entire industries. The decision to stay broad caused for a lot of high level discussion didn'tplay well with the knowledgeable and inquisitive audience (at least the ones I spoke with) who would have preferred in depth case studies or a look into an industry's future, rather than hearing comments like "content is important in social media."

That's a general overview of the conference: some good discussion, but could have used some more specifics and even to be spread over two days. Now let's get to some specifics.

The Highs

There were several panels that provided some really great discussion. Through good moderation and interesting panelists, they managed to avoid the tendency to be broad and really focus on specifics. The top few panels that I caught were Search Marketing, Online Advertising Strategies, and Email Marketing. Email Marketing really stuck out as an awesome panel -- even though it's a common topic, the panel featured execs from industry leaders Bronto, iContact, and Emma. The panelists were very open, interesting, and thoughful.
The overall setup and running of the conference. The conference was hosted at the Raleigh Convention Center, which provided a lot of space to walk around, post up with your lap top, make phone calls, and host side meetings. Furthermore, the wireless was flawless, and the conference had side areas for bloggers to craft posts and for media to gather. The Demo showcase was a nice touch to highlight local startups doing exciting and interesting things in the space. The food was great, the after party beer was quenching, and the overall aesthetics were well thought out. Thank you to the convention center for doing such a great job!
Final keynotes from Pandora president Joe Kennedy and Lending Tree CEO Doug Lebda. Both of these guys gave really great speeches. Kennedy spoke about the importance of "disruptive innovation" (I was a little worried at first) in entrepreneurship and drew a phenomenal extended metaphor to the birth of modern film with The Great Train Robbery. Furthermore, he provided some really interesting facts about Pandora's business, including the stat they have 20,000 new iPhone app registrations every day! Lebda was one of the most engaging speakers I've ever seen. Period. He did an unusual format for his keynote and structured it as a Q & A with the CEO of Peak10. He was incredibly honest and interesting, and the majority of his answers were centered around his entrepreneurial journey, his failures, how his company has evolved, and what he's learned. The committee hit it out of the park by choosing these two speakers.

As you can see there were several factors that made the conference a joy to attend.

The Lows

Keynote by Richard Jalichandra, president of Technoratti. Everyone in the audience and in the tweetstream agreed that this speech was horrendous. He was pretentious, unprepared, and boring. Other people informed me that he was the same at past conferences, such as BlogWorld. IS09 should've done some research and realized that he should not have been put on the list.
Many panels lacked specificity that was desired by a knowledgeable audience. This point was mentioned in my overview, but is worth coming back to. A panel of four people, none of them especially notable, were given 60 minutes to cover social media. That strategy will almost never work, as there's just far too much to cover and discuss. The conference would've been better served to bring in a renowned expert on a specific area of social media and have them go to town on that specific element, rather than trying to cover the whole space. Again, this could also be fixed by having a multiple day format.

Since I enjoyed the experience overall, I don't want to be too negative and will just leave it with those two lows, as those were the two most glaring errors.

Bottom Line: Was it Worth the Price of a Ticket?

One of the best things about living, working, and playing in the triangle area is the low cost of living. The conference maintained that theme by being a very cheap ticket, between $295 and $395 depending on day of registration, compared to other industry fairs like Web 2.0 that cost closer to $1,000.

So, if you're a local and didn't have to worry about flying or booking a hotel and losing a day or two of work, then yes, it was definitely worth the cost of admission.

However, if you traveled a good distance and had to tack on a flight, hotel room for a night, and missed work time for travel, then you probably didn't get your money's worth.

With that being said, it's really important to remember that this was only the second year of the conference. For a second year event, it was very polished, and it wouldn't surprise me if it is worth traveling to next year or the year after. So, definitely keep your eye on this one, as it might be a deal in the coming years.

Did you attend the conference? What were your thoughts?

Thanks again for all of the panelists, speakers (except Jalichandra), volunteers, staff, and to the city of Raleigh! Also, if the conference folks need any talented panelists next year, our Nov 2010 looks pretty open right now ;).

Looking forward to Internet Summit 2009 in Raleigh

Thu, 05 Nov 2009 07:05:00 EST

Clay, Kris and I are looking forward to spending today in Raleigh for The 2nd Annual Internet Summit! The Summit is designed to promote innovating thought on the Internet and surrounding technologies. As a Raleigh web design firm, this is right up our alley. Some of the big-name speakers we're excited to hear from include:

Richard Jalichandra, President and CEO of Technorati Media
Joe Kennedy, President and CEO of Pandora
John Kosner, Senior VP and GM of Digital Media for ESPN
Matt Van Horn, the Business Development Manager from Digg
Brian Williams, CEO & Co-Founder of Viget. Viget is a local company that we especially enjoy hearing from.

Personally, I plan on attending panels on Search Marketing, Cloud Computing, Social Media, Design & Usability, Email Marketing and Real-Time/Twitter. I know Clay and Kris plan on going to more of the technological panels like Analytics, CIO/CTO Roundtable and Growth and Liquidity.

Keeping in spirit with its purpose, the Summit emailed all attendees early in the week and established a Twitter hashtag for the event, #isum09. So if you're interested in what's going on at this very minute of the Summit, be sure to search Twitter!

NMC Goes 5-1 in Off-Year Online Campaigns

Wed, 04 Nov 2009 11:20:00 EST

As a political website design firm, New Media Campaigns is happy to report that in 2009, an off year for elections, the company went 5-1. NMC built online efforts in 5 different states for city council, mayoral, and levy campaigns.

The five winners were Stephanie Miner for Mayor of Syracuse, Luke Ravenstahl for Mayor of Pittsburgh, Bonner Gaylord for Raleigh City Council, the Hamilton County Library levy, and the Five Rivers Metroparks levy. Unfortunately, the Joe Merrill for Mayor campaign was unable to unseat Binghamton’s incumbent mayor, but he ran a spirited and professional campaign that we were happy to work with.

Each campaign brought a unique set of challenges and goals to the table, and the NMC team was eager to assist them.

We were proud to assist Romanelli Communications help Stephanie Miner become the first female mayor of Syracuse, and build an online fundraising infrastructure that helped raised tens of thousands of dollars online.

The Ravenstahl mayoral campaign website design was successfully launched in just one week’s time – a very rare feat for a website of any kind, especially for such a high profile race. This re-election helps the mayor continue his mission of moving Pittsburgh forward, which was featured in the NY Times this week.

Bonner Gaylord put together a sophisticated web effort that is rarely seen with local campaign websites. He used his site to register and organize hundreds of supporters. Furthermore, the fresh design and feel of the site helped differentiate the political newcomer from other candidates.

The two levies had the unenviable task of asking voters for money in a tough economy. They were able to both be victorious by building a strong coalition of supporters. Both campaigns successfully used social networks to broaden their message and engage younger voters. Furthermore, the library levy was able to recruit dozens of donors through yard sign and bumper sticker promotions hosted on the campaign site.

NMC has already began lining up clients for 2010 and will begin revealing its client list, including several statewide campaigns, over the coming weeks as the new campaign sites launch.

Thanks again to our partners and clients on a successful 2009 election and congratulations!

Verizon Droid: iDon't Understand Microsite Search Engine Optimization

Mon, 02 Nov 2009 19:30:00 EST

I've been waiting for Verizon to announce a competitive smart phone for a quite some time. With a barely functional, 3 year old Motorola Q you better believe the first time I saw the much talked about "iDon't" commercial running during a ballgame I to ran to grab my notebook to check out the campaign's microsite: DroidDoes.com.

Big Red is flexing its marketing muscle to hype its self-proclaimed iPhone killer on all major mediums: TV, direct mail, Google ads, you name it. "Everything iDon't Droid does." Like the TV ad, these other pieces drive users to the microsite, too. With this big of an ad spend and a first-class partnership with Google you would think the microsite would be out of this world good.

As far as microsites and marketing landing pages go, DroidDoes.com is out of this world bad. Google should be embarrassed of how their Android Experience phone is being marketed. Not only is DroidDoes.com 100% flash but the flash itself isn't being indexed by Google, the content behind the flash is embarrasingly bad (pictured below), and you can't link to features you've navigated to within the microsite.

"Don't you wish you had a sidekick robot that moved at light speed?" This is what Google (via Google cache) sees when it visits DroidDoes.com and its indexing algorithm tries to figure out what the Droid is about. Google doesn't care about the fancy flash techniques or the robovoice saying "droid". Google cares about content, not flash.

When Google has access to meagingful content it can read, i.e. plain old "semantic" HTML, Google does a lot of work on your behalf. Check out what you get when you search for 'iPhone':

Not only do you get a link to the web site, but Google provides links to the other places on the iPhone website a visitor is likely to want to go and brings them directly there. This is possible because Apple's iPhone content is properly crafted using semantic HTML. Apple also used a meangingful meta description allowing Google to succinctly describe and position the iPhone.

Contrast this with the official result on a search for 'Droid':

Because subpages don't exist, Google can't do a better job linking you to the things a Droid-seeker is looking for: how to buy, features, support, apps, etc. The DroidDoes microsite is one gigantic flash file Google can't link to. The DroidDoes.com website team should be even more embarrassed of their meta description which doesn't describe what Droid is, at all. Upon further inspection there is more to the meta description than meets the eye:

"Get to know Droid a little better. Droid Does the Network. Droid is exclusive to Verizon Wireless, the most reliable network available. Droid Does Android 2.0. Droid contains a new exclusive version of the OS. Droid Does Multitasking. Make a call, answer an email and launch multiple apps simultaneously. Droid Does 10,000+ Apps. Gain power with every app. Droid runs multiple apps simultaneously. Droid Does 5 Megapixels. With a built in flash and 5 megapixels of detail - enhancing resolution, you can capture low light, fleeting moment in detail."

What DroidDoes.com doesn't know is that Google caps meta descriptions at around 160 characters. The DroidDoes microsite's description is 550 characters. No one will ever see the meat of their description because it is too long.

Everything DroidDoes.com uShouldn't on a Microsite

Most of us don't have multi-million dollar budgets to launch and hype advertising campaigns on the scale Verizon has taken its Droid campaign. For all the money they are throwing at consumers they are losing valuable, targetted inbound traffic because of the many poor technical decisions making up DroidDoes.com. With tighter budgets the rest of us can't afford to make these microsite mistakes. Here are a few high-level lessons to take away:

Do not build 100% flash based microsites
1. Especially if the flash file is not created carefully for Google to index
2. Especially if you can't link directly to locations within the Flash file
Always have meaningful HTML content for search engines to index
1. Meta description should be less than 160 characters long and descriptive
2. Use language and keywords that people search for to find your microsite (i.e. not 'always wanted a pocket robot?' when you're selling a phone)
3. Content for all images and flash should also be in HTML

The Droid is going to be Verizon's most compelling smart phone. It's Google's most complete Android phone and first in the Android 2.0 line. Yet the Droid's promotional microsite is underwhelming, clunky, and out-of-touch with the internet of 2009. If your marketing budget isn't that of a Fortune 500 company you can't afford to make the same inbound marketing mistakes with your microsite as the hotshots at Verizon who decided to promote an internet phone that can't play flash videos using only flash video.

Easy menus with nmcDropDown

Mon, 02 Nov 2009 10:55:00 EST

Since I released my nmcDropDown plugin for jQuery two weeks ago, several people have been asking for a simple example of how to use it. Althought the plugin takes care of all the behavior automatically, you still need to style and format the menu using CSS. In this post I will demonstrate two simple menu styles that use nmcDropDown.

The bare minimum

The examples below have styling and effects to make them look nice, but first I will show you the minimum you need to get your menus running. First off, you need a set of nested lists and link to create the structure of your menus:

<ul id="nav">
  <li><a href="#">Item One</a>
    <ul>
      <li><a href="#">Sub-menu Item 1</a></li>
      <li><a href="#">Sub-menu Item 2</a></li>
      <li><a href="#">Sub-menu Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Item Two</a>
    <ul>
      <li><a href="#">Sub-menu Item 1</a></li>
      <li><a href="#">Sub-menu Item 2</a></li>
      <li><a href="#">Sub-menu Item 3</a></li>
    </ul>
  </li>
  <li><a href="#">Item Three</a>
    <ul>
      <li><a href="#">Sub-menu Item 1</a></li>
      <li><a href="#">Sub-menu Item 2</a></li>
      <li><a href="#">Sub-menu Item 3</a></li>
    </ul>
  </li>
</ul>

Now you need a bit of CSS to put everything in its correct place. This menu isn't going to look nice, but it will give you a starting point from which you can match your site's overall aesthetic.

#nav { float: right; height: 30px; }
#nav li { float: left; position: relative; }
#nav li a { display: block; padding: 5px 10px; line-height: 20px; }
#nav li ul { display: none; position: absolute; top: 30px; left: 0; width: 120px; background: #fff; }
#nav li:hover ul { display: block; }
#nav li ul li { float: none; }
#nav li ul li a { display: inline-block; }
#nav li ul li a { display: block; }

The most important thing here is to set #nav li to position: relative; and #nav li ul to position: absolute; to the submenus are aligned with their parent item. In the interest of accessibility, we are also hiding the submenus in the CSS (#nav li ul { display: none; }) and showing them with their parent li is hovered over (#nav li:hover ul { display: block; }. That way, if JavaScript is disabled, the menus will still work in every browser but Internet Explorer 6. JavaScript is always required for drop-downs to work in IE6, unfortunately. Speaking of which, did you notice the oddity at the end where we declare the links as display: inline-block and then re-declare them at display: block? That is the only concession we need to make to Internet Explorer bugs—it removes the extra space IE6 inserts between list items, as discovered by Roger Johansson.

This CSS will create a horizontal menu with drop-downs, but by changing a few lines, you could just as easily make it a vertical menu with fly-outs.

Finally, the JavaScript to hook up the nmcDropDown script. Make sure you also paste the nmcDropDown script itself (and the HoverIntent plugin, if you wish to use it) into the JavaScript file.

$('#nav').nmcDropDown();

Makin' it Pretty

Now that we have a functioning menu, we can start styling it. I have created an sample page with two different examples using nmcDropDown.

The first—in the top-right of the page—is based on the simplified example above, just with additional CSS to style the menu bar and drop-downs. I also added an additional parameter to the call in JavaScript to make the menus slide down instead of fading in: $('#nav').nmcDropDown({show: {height: 'show', opacity: 'show'}});.

The second example is a little more interesting, as it's actually not a menu at all. In the right-hand sidebar, I am using nmcDropDown to create an informational panel with four heading that, which clicked on, each reveal a bit of text. To do this, I replaced the second level of <ul>s in my HTML with paragraphs. I then used the following CSS to line arrange everything vertically:

#sidebarNav { padding: 10px 0; background: #ccc; border: 1px solid #bbb; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
#sidebarNav li { border-top: 0 solid #ccc; }
#sidebarNav li:hover, #sidebarNav li.open { background: #bbb; }
#sidebarNav li a { display: block; padding: 5px 10px; line-height: 20px; color: #444; font-weight: bold; text-decoration: none; }
#sidebarNav li p { display: none; padding: 5px 10px 10px; color: #444; border-top: 1px dashed #aaa; }
#sidebarNav li:hover p { display: block; }

Finally, in the JavaScript I told nmcDropDown to activate on click rather than hover and to look for my paragraph instead of the unordered-list it usually expects:

$('#sidebarNav').nmcDropDown({
  trigger: 'click',
  submenu_selector: 'p',
  show: {height: 'show'},
  hide: {height: 'hide'}
});

Please look at the sample page to try these out, and view source to examine the code in more detail. If you find another creative way to use nmcDropDown, please link to it in the comments.

Judge an Ad Agency's Website On Content Not Creative

Thu, 29 Oct 2009 14:40:00 EDT

As advertising has moved further online and into social media over the past few years, it’s no surprise that clients have expected their agencies to be able to help them navigate and leverage this unfamiliar territory.

However, while virtually every agency claims to have the capabilities to help their clients in this space, few top agencies actually demonstrate that proficiency on their own site.

When judging agencies, you should judge the site on its content rather than its creativity.

Just about everyone I know wants their website to serve as a source of leads and to bring in new business. With that in mind, why would you hire a firm that has not even shown the ability to do that with their own web presence?

As a technology partner for advertising agencies, we have worked with many agencies to build their own sites. On each agency site, we place a premium on content and using the site as a lead generation tool. However, looking through top agency sites, it’s impossible not to notice that most agencies ignore the very advice that they give to clients.

This post looks at three very important content-oriented criteria on which to judge ad agency websites: blogging, optimization, and social media.

The Importance of An Ad Agency Blog

In today’s culture, no agency should have a website without a blog. It’s a proven inbound marketing and lead generation tool, an opportunity to promote work and news, and an educational resource for clients and prospects. Not to mention, they’re probably going to try and sell you one, so how can you trust them if they don’t eat their own dogfood?

Not only is it important to check that they have a link to a blog, but it’s also essential that you read the content and hold the firm to it. Is it thoughtful, helpful, and a priority? It’s important to ensure the firm is actually using their blog to engage, educate, and attract an audience rather than just somewhere that they post company news.

A great example of an ad agency blog is the DraftFCB blog. First, the firm demonstrates a rather rigorous posting schedule by adding new content nearly every day. Furthermore, it instantly caught my attention that management is responsible for much of the content. It’s not just a group of interns who had the summer job of writing posts.

My only complaint about the DraftFCB blog is that they host it on a separate domain from their main site, which is a definite no-no when setting up a blog for your business. Overall though, the top to bottom commitment and great content demonstrate that this agency really believes in blogging and its benefits for the firm and its clients.

Is the Content Optimized?

It’s true that major agencies don’t need to be focused on optimizing their site and content to an obscene level, as local targeting isn’t too important to them if they already have a national reputation. However, their site should still demonstrate the fact that they understand the basic tenets of optimization.

Perhaps the most common mistake among agency websites is that the content is totally invisible to search engines. If the site is built in Flash, then it is almost certain that its content is invisible to search engines.

If their site is readable by search engines, you should browse through the rest of the site and ensure that they have a basic understanding of SEO. Check to make sure they have clean URLs, place relevant title tags on pages, use web-safe fonts and not just images, and show an understanding of header stylings.

Again, most ad agencies aren’t going to take their SEO efforts to an extreme, and that’s completely fine. However, they should use their site to demonstrate that they understand how to make a content driven website in a way that’s easy for Google to index.

Social Media Usage

One surprisingly lacking element of top agency sites were their integration of social media into the site. Very few allowed you to easily share their news, blog posts, and other content across media such as Twitter, Facebook, Delicous, and others.

Furthermore, most agencies don’t have prominent links out to their social media presences. If they don’t make an effort to integrate social media into their site, that should be concerning to you.

However, that still shouldn’t stop you from actually making an effort to go scope out their presences on social networks. I would recommend looking for the presences of the general agency, the managing partners, and the account reps for your brand.

Look at how they use the medium. Are they engaging others and making a genuine effort to connect? Do they publish useful content? Have they been in the medium for a meaningful amount of time? These are all important things to analyze.

I’ve seen agency execs set up a Twitter account literally the day before a presentation, because they were pitching Twitter in the project. How can you trust them to advise you on using a medium if they hardly do it themselves?

Conclusion

An ad agencies site should be much more than a TV ad online – they should prove that they understand the medium and the responsibilities that come with it. If an agency is pitching you an overall online strategy, it’s essential that you take a hard look at theirs, too.

Don’t be afraid to ask the hard questions and be willing to put some time into the research. What has been your experience with agencies that talk the talk but don’t necessarily walk the walk? Are there other things to look out for on agency sites?

How to create a blog with the Recess PHP Framework, Part 3

Wed, 28 Oct 2009 11:55:00 EDT

This is the third article in my Recess Framework blog tutorial that will demonstrate how to create model relationships with the Recess PHP Framework. Previously in this tutorial, we learned how to list and display individual blog posts, and more recently, how to create, update and delete blog posts using Recess’ ORM (object relational mapper). This tutorial assumes you have completed the previous tutorials. If you have not completed the previous tutorials, you should download the most current version of our blog application before reading further.

As I explained in my previous tutorial, [BLOG_ROOT] references the filesystem directory where you have installed the Recess PHP Framework; on my machine, [BLOG_ROOT] is ~/Sites/recess/. [BLOG_URL] references the URL with which you can access the blog application in a web browser; on my machine [BLOG_URL] is http://localhost/~joshlockhart/recess/.

Authors

We will create a one-to-many model relationship between authors and blog posts. One author writes many blog posts, and each blog post belongs to only one author. If we were using a user authentication system, we could determine the author based on the logged-in user writing the post. We will explore user authentication with Recess later in this tutorial series. For now, we will display a combo-box on the Write Post and Edit Post forms that will display a list of available authors. Let’s get started. We first need to create the controller, models, and views for authors. Since this process was discussed in detail in the previous two two tutorials, I will move quickly through this process assuming you are familiar with these steps.

Creating the Author database table

Create the authors table in your SQLite database with the following SQL commands:

CREATE TABLE `authors` (
    `id` INTEGER PRIMARY KEY,
    `name_first` TEXT,
    `name_last` TEXT
);
INSERT INTO `authors` VALUES (1,'John','Doe');
INSERT INTO `authors` VALUES (2,'Jane','Doe');

Next, update the posts database table and add an “author_id” foreign key:

ALTER TABLE `posts` ADD `author_id` INTEGER;

Last, let’s make sure all existing posts are assigned to the first author.

UPDATE `posts` SET `author_id` = 1;

Creating the Author model

Next, create the Author model at [BLOG_ROOT]apps/blog/models/Author.class.php and insert the following code:

<?php
/** 
 * !Table authors
 */
class Author extends Model {}
?>

Creating the Author controller

The Author controller is responsible for listing, creating, updating, and deleting blog authors. Create [BLOG_ROOT]apps/blog/controllers/AuthorsController.class.php and insert the following code:

<?php
Library::import('recess.framework.controllers.Controller');
Library::import('blog.models.Author');

/**
 * !RespondsWith Layouts
 * !Prefix Routes: /, Views: authors/
 */
class AuthorsController extends Controller {

    /** !Route GET, authors */
    public function listAuthors(){
        $author = new Author();
        $this->authors = $author->all();
    }

    /** !Route GET, authors/$id */
    public function show($id){
        $author = new Author($id);
        $this->author = $author->find()->first();
    }

    /** !Route GET, authors/new */
    public function newAuthor(){
        $this->author = new Author();
    }

    /** !Route POST, authors */
    public function create(){
        $author = new Author($this->request->post['author']);

        if( $author->save() ){
            return $this->redirect($this->urlTo('listAuthors'));
        } else {
            return $this->ok('newAuthor');
        }
    }

    /** !Route GET, authors/$id/edit */
    public function edit($id){
        $author = new Author($id);

        if( $author->exists() ){
            $this->author = $author->find()->first();
        } else {
            return $this->redirect($this->urlTo('listAuthors'));
        }
    }

    /** !Route PUT, authors/$id */
    public function update($id){
        $author = new Author($id);

        if( $author->exists() ){
            $this->author = $author->find()->first()->copy($this->request->put['author']);
            if( $this->author->save() ){
                //set a success message if necessary
            }
            return $this->redirect($this->urlTo('edit',$id));
        } else {
            return $this->redirect($this->urlTo('listAuthors'));
        }
    }

    /**
     * !Route DELETE, authors/$id
     * !Route GET, authors/$id/delete
     */
    public function delete($id){
        $author = new Author($id);

        if( $author->exists() ) $author->delete();
        return $this->redirect($this->urlTo('listAuthors'));
    }

}

?>

Creating the Author view templates

Now, let’s quickly create the templates for the Author CRUD actions. Create [BLOG_ROOT]apps/blog/views/authors/listAuthors.html.php and insert the following markup:

<html>
    <body>
        <h1>Authors</h1>
        <ul>
            <?php foreach( $authors as $author ): ?>
            <li>
                <h2><a href="<?php echo Url::action('AuthorsController::show',$author->id); ?>"><?php echo $author->name_first . ' ' . $author->name_last; ?></a></h2>
                <p>
                    <a href="<?php echo Url::action('AuthorsController::edit',$author->id); ?>">Edit</a>
                    <a href="<?php echo Url::action('AuthorsController::delete',$author->id); ?>" onclick="return confirm('Are you sure?');">Delete</a>
                </p>
            </li>
            <?php endforeach; ?>
        </ul>
    </body>
</html>

You can view the author list at [BLOG_URL]index.php/blog/authors/. Next, create [BLOG_ROOT]apps/blog/views/authors/show.html.php and insert the following markup:

<html>
    <body>
        <h1><?php echo $author->name_first . ' ' . $author->name_last; ?></h1>
    </body>
</html>

You can view each author’s page at [BLOG_URL]index.php/blog/authors/1 (where ‘1’ is the ID of a given author). Next, create [BLOG_ROOT]apps/blog/views/authors/newAuthor.html.php and insert the following markup:

<html>
    <body>
        <h1>Add Author</h1>
        <form action="<?php echo Url::action('AuthorsController::create'); ?>" method="POST">
            <fieldset>
                <label for="firstName">First Name</label><br/>
                <input type="text" id="firstName" name="author[name_first]" value=""/><br/>
                <label for="lastName">Last Name</label><br/>
                <input type="text" id="lastName" name="author[name_last]" value=""/><br/>
                <input type="submit" value="Add Author"/>
            </fieldset>
        </form>
    </body>
</html>

You can view the Add Author form at [BLOG_URL]index.php/blog/authors/new. Next, create [BLOG_ROOT]apps/blog/views/authors/edit.html.php and insert the following markup:

<html>
    <body>
        <h1>Edit Author</h1>
        <form action="<?php echo Url::action('AuthorsController::update',$author->id); ?>" method="POST">
            <fieldset>
                <label for="firstName">First Name</label><br/>
                <input type="text" id="firstName" name="author[name_first]" value="<?php echo $author->name_first; ?>"/><br/>
                <label for="lastName">Last Name</label><br/>
                <input type="text" id="lastName" name="author[name_last]" value="<?php echo $author->name_last; ?>"/><br/>
                <input type="hidden" name="_METHOD" value="PUT"/>
                <input type="submit" value="Update Author"/>
            </fieldset>
        </form>
    </body>
</html>

You can view the Edit Author form at [BLOG_URL]index.php/blog/authors/1/edit (where ‘1’ is the ID of a given author). Next, create blank template files at [BLOG_ROOT]apps/blog/views/authors/create.html.php and [BLOG_ROOT]apps/blog/views/authors/update.html.php and [BLOG_ROOT]apps/blog/views/authors/delete.html.php. Although these templates are not necessary for our application, Recess requires a template for each public controller action to avoid throwing errors. The creators of Recess will remedy this behavior in a future framework update.

We are now able to list, view, add, update, and delete blog authors. Now let’s relate authors to posts.

Associating Authors to Posts

Updating the models

We need to tell Recess that each post belongs to one author. Open [BLOG_ROOT]apps/blog/models/Author.class.php and update it’s contents to look like this:

<?php
/** 
 * !Table authors
 * !HasMany posts, Key: author_id
 */
class Author extends Model {}
?>

We use a Recess declarative annotation to describe our Author model. In this example, we say that an Author !HasMany posts. We also specify the foreign key column used by the related model if the foreign key column name is different from convention; by default, Recess expects a foreign key column name of “authorId”. I like to suffix my foreign keys with "_id", so I needed to clarify this in the !HasMany annotation. Let’s now update [BLOG_ROOT]apps/blog/models/Post.class.php:

<?php
/**
 * !Table posts
 * !BelongsTo author, Key: author_id
 */
class Post extends Model {}
?>

We use a Recess declarative annotation to describe our Post model; a Post !BelongsTo one author. We also specify the foreign key column used by this relationship. The annotation on the Post model assumes the posts database table has an “author_id” foreign key column that references an existing Author database record. We added this foreign key earlier in this tutorial.

Updating the views

Let’s now update our Write Post and Edit Post templates so that we may select an author when we write or edit a post. Before we edit the templates, we need to make sure we pass an array of available authors from the PostsController::write() and PostsController::edit() actions. Open [BLOG_ROOT]apps/blog/controllers/PostsController.class.php. Edit the PostsController::write() action to look like this:

/** !Route GET, posts/write */
public function write(){
    $this->post = new Post();
    $author = new Author();
    $this->authors = $author->all();
}

And update the PostsController::edit() action to look like this:

/** !Route GET, posts/$id/edit */
public function edit($id){
    $post = new Post($id);

    if( $post->exists() ){
        $this->post = $post->find()->first();
        $author = new Author();
        $this->authors = $author->all();
    } else {
        return $this->redirect($this->urlTo('listPosts'));
    }
}

Since we reference the Author model in the Posts controller, we need to import the Author model into our controller. Add this line to the existing import statements at the top of PostsController.class.php:

Library::import('blog.models.Author');

Now we can update our templates. Open [BLOG_ROOT]apps/blog/views/home/write.html.php and update it to look like this. I have highlighted the changes.

<html>
    <body>
        <h1>Write Post</h1>
        <form action="<?php echo Url::action('PostsController::create'); ?>" method="POST">
            <fieldset>
                <label for="title">Title</label><br/>
                <input type="text" id="title" name="post[title]" value=""/><br/>    
                <label for="content">Content</label><br/>
                <textarea id="content" name="post[content]" rows="20" cols="50"></textarea><br/>
                <label for="author">Select an author:</label><br/>
                <select id="author" name="post[author_id]">
                    <?php foreach( $authors as $author ): ?>
                    <option value="<?php echo $author->id; ?>"><?php echo $author->name_first .' '.$author->name_last; ?></option>
                    <?php endforeach; ?>
                </select><br/><br/>
                <input type="submit" value="Create Post"/>
            </fieldset>
        </form>
    </body>
</html>

Next, open [BLOG_ROOT]apps/blog/views/home/edit.html.php and update the markup so it looks like this. I have highlighted the changes.

<html>
    <body>
        <h1>Update Post</h1>
        <form action="<?php echo Url::action('PostsController::update',$post->id); ?>" method="POST">
            <fieldset>
                <label for="title">Title</label><br/>
                <input type="text" id="title" name="post[title]" value="<?php echo $post->title; ?>"/><br/>    
                <label for="content">Content</label><br/>
                <textarea id="content" name="post[content]" rows="20" cols="50"><?php echo $post->content; ?></textarea><br/>
                <label for="author">Select an author:</label><br/>
                <select id="author" name="post[author_id]">
                    <?php foreach( $authors as $author ): ?>
                    <option value="<?php echo $author->id; ?>" <?php if($author->id == $post->author_id): ?>selected="selected"<?php endif; ?>><?php echo $author->name_first .' '.$author->name_last; ?></option>
                    <?php endforeach; ?>
                </select><br/><br/>
                <input type="hidden" name="_METHOD" value="PUT"/>
                <input type="submit" value="Update Post"/>
            </fieldset>
        </form>
    </body>
</html>

When we edit an existing post, the correct author will be pre-selected.

Relationships in Action

We have successfully related Authors to Posts. Let’s see an example of this relationship in action by displaying all posts written by an author on the Show Author page. Open [BLOG_ROOT]apps/blog/views/authors/show.html.php and update its markup like this:

<html>
    <body>
        <h1><?php echo $author->name_first . ' ' . $author->name_last; ?></h1>
        <ul>
            <?php foreach( $author->posts() as $post ): ?>
            <li><a href="<?php echo Url::action('PostsController::show',$post->id); ?>"><?php echo $post->title; ?></a></li>
            <?php endforeach; ?>
        </ul>
    </body>
</html>

Last, let’s place a link to the author’s page beneath each blog post’s title. Open [BLOG_ROOT]apps/blog/views/home/listPosts.html.php and update the markup as shown below. The changes are highlighted.

<html>
    <body>
        <h1>Posts</h1>
        <ul>
            <?php foreach( $posts as $post ): ?>
            <li>
                <h2><a href="<?php echo Url::action('PostsController::show',$post->id); ?>"><?php echo $post->title; ?></a></h2>
                <p>By <a href="<?php echo Url::action('AuthorsController::show',$post->author()->id); ?>"><?php echo $post->author()->name_first . ' ' . $post->author()->name_last; ?></a> | Posted on <?php echo strftime("%B %e, %Y", $post->created); ?></p>
                <p><?php echo $post->content; ?></p>
                <p>
                    <a href="<?php echo Url::action('PostsController::edit',$post->id); ?>">Edit</a>
                    <a href="<?php echo Url::action('PostsController::delete',$post->id); ?>" onclick="return confirm('Are you sure?');">Delete</a>
                </p>
            </li>
            <?php endforeach; ?>
        </ul>
    </body>
</html>

Also open [BLOG_ROOT]apps/blog/views/home/show.html.php and update the markup as shown below. The changes are highlighted:

<html>
    <body>
        <h1><?php echo $post->title; ?></h1>
        <p>By <a href="<?php echo Url::action('AuthorsController::show',$post->author()->id); ?>"><?php echo $post->author()->name_first . ' ' . $post->author()->name_last; ?></a> | Posted on <?php echo strftime("%B %e, %Y", $post->created); ?></p>
        <p><?php echo $post->content; ?></p>
    </body>
</html>

Summary

This tutorial demonstrated how to relate the Author and Post models using declarative annotations. We also learned how to declare a custom foreign key on model relationships if the foreign key column name does not adhere to the Recess Framework naming convention. And finally, we learned how to take advantage of model relationships with the Recess Framework ORM in our templates. The next tutorial in this series will explore RESTful routing in the Recess Framework. Stay tuned!

Download the final project

This file contains the Recess Framework and all controllers, models, and views for this tutorial.

Download (ZIP, 356 KB)

AutoSprites - A jQuery Menu Plugin

Wed, 28 Oct 2009 11:15:00 EDT

Download the Files (Zip) | View a Demo

We have written and released a jquery dropdown menu plugin as well as a CSS Sprites2 Plugin -- this post is along the same lines. Its purpose is to allow you to build an image-based menu with animated hover states as easily as possible and by using the most concise descriptions possible. To see the results on both a horizontal and vertical menu, check out the demo.

Setting up the jQuery Menu Plugin

The first component when doing something with sprites is a combined image that contains all menu states. For the menu above, this is the image below was used. (This was designed by Liaison Design Group, one of our Partners)

The image contains both the normal state and the hover state. The value to doing things this way is that it allows your site to load faster. Rather than downloading an image for each nav item and its hoverstate, only a single image needs to be downloaded. This minimizes the overhead of many http requests.

The next thing to do, is set up the HTML for the nav bar:

<ul id="hnav"> 
	<li id="hnavhome"><a href="#">Home</a></li> 
	<li id="hnavlocal"><a href="#">Local Industry</a></li> 
	<li id="hnavhigher"><a href="#">Higher Education</a></li> 
	<li id="hnavcomm"><a href="#">Our Community</a></li> 
	<li id="hnavnews"><a href="#">News</a></li> 
</ul>

Then we need to set up the CSS. There are a couple of things to note here. We are applying the background image to the containing element so that we don't need to respecify background positioning. This also makes the menu usable if javascript is disabled. Each element needs to have its size defined specifically as well.

#hnav { position: absolute; top: 0; left: 0; width: 615px; height: 72px; background: url('horiz_sprites.gif') no-repeat; }
#hnav li { position: absolute; left: 0; height: 72px; }
	#hnav #hnavhome { width: 82px; left: 0px; }
	#hnav #hnavlocal { width: 146px; left: 82px; }
	#hnav #hnavhigher{ width: 162px; left: 228px; }
	#hnav #hnavcomm { width: 143px; left: 390px; }
	#hnav #hnavnews { width: 82px; left: 533px; }
#hnav li a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 72px; text-indent: -9999em; }

Notice how much less complicated the CSS is than what is typical with sprites. There is no need to define background positioning for each element and its hover state. The last piece you'll need to do is enable the autosprites plugin:

$(document).ready(function(){
	$('#hnav').autosprites();
});

There are no required options. The plugin defaults to a horizontal menu and fading for the animation. It infers everything else from the CSS. If you would like to customize things, here are the options that are available:

settings = $.extend({
	offset: '100%', //Can be specified in px as well. This tells the plugin the offset between the two sprites images
	orientation: 'horizontal', //'vertical' is the other option
	over: { opacity: 'show' },
	overSpeed: 500,
	out: { opacity: 'hide' },
	outSpeed: 500
}, settings);

So that's it! You can specify the minimum amount of information about your menu and the sprites will be built automatically. Be sure to check out the demo and download the zip for your own projects. As always leave a comment if you have any complements, insults, suggestions or questions.

A Special Note on Compiling Javascript

The purpose of using sprites is to minimize HTTP requests. It would be foolish to use this plugin by including jQuery, the minimized plugin, and a setup script. Instead, it is best practice on a production site to bring all of your scripts together into one file, just as sprites bring your images into one file.