Ad agency web development – a tech checklist.

If you’ve always worked at an ad agency, you probably know the technical Thunderdome it can be. If you’ve never worked at one or are just jumping on board, I’m here to tell you the nitroglycerin-addled heart of it is equal parts ‘The Matrix‘, ‘12 Angry Men‘, and ‘Dude Where’s My Car‘. While in the trenches of development, you can lose focus on the the right technologies, trends and competencies to chase. What are you bringing to the fight? You need to be bad-assed rockstars with a focused set of skills. You know, like nunchuku skills, bow hunting skills, computer hacking skills; but honed for hot Agency work. Here is what I see the baseline tech skill set needs are of a fun agency development team for 2010, a sort of “Things in which an Agency dev team ought excel list”, only without that horrible name.

Check out my hot front-end

In the agency world, the charge of development is to take the design, branding, and influence generated from your Creative dept and translate it for the web. The traditional media versions of these concepts all have analogs in the web space, it’s up to your team to be able to run with the ball, carry the torch, or whatever other sporting metaphor fits your demographics.

The basics:

1) As a team, you need to be have serious depth with Flash, Jquery, CSS, sifr, @font-face, and coming fast, HTML5. These are not optional. If you are going to forward the vision of an agency which often thinks in terms of TV, stickiness, romancing the brand, creating identities, and other similar bullshit marketing phrases, you need this toolset down cold. You need to be able to push back to design and get comps for institutionally-overlooked pages such as forms, search results, sitemaps, 404 pages, and favicons. These have styling and implementation techniques all their own and their lack of being given creative love can quickly bring down the hotness of an otherwise sexy site.

2) You need a go-to CMS that you can theme, configure, break, and work-around. I don’t need to tell you (but I will), maintaining content on brochure sites is not the space you want to be in. Like it or not, a lot of agency type sites are perfect/imperfect candidates for CMS implementations and as soul-crushing as they can sometimes be, are ultimately your ticket to client happiness in the end. Like a roll call of high school girlfriends, some are great looking and slim-line, others are unwieldy propositions you’d rather no one else find out you are associated with. Bottom line though, you need a go-to system you can bend to your will, extend, modify, and end-around as need be.

Next Steps:
Get an understanding of video streaming server solutions, content delivery networks. Be ready for the hella-traffic you’ve always wanted when it finally comes knocking on your door.

Integrate the heck out of something

The Basics:
True story. I received a pottery barn catalog yesterday that had social media icons on the *back cover*. "Follow us on Twitter, Become a fan on FaceBook, etc."  Ridiculous? Perhaps, but clearly social media is no longer an up-sell or nice-to-have. You *need* to understand each social media’s ecosystem, create presences for your client if they don’t have them, and integrate their existing ones if they do. You should be able to pull in a feed, stream, or embed from anywhere as a matter of course. Whatever dev language(s) you are using, know all the modules, classes, gems, whatever that will make these tasks a non-issue. Oh, and importantly, Pottery Barn has some pretty cool looking lamps.

Next Steps:
Get crazy, get your developer API keys, accounts, environments and start making out with the APIs and fog up the windows. Custom Facebook Apps, Twitter integration, Youtube, and Amazon queries are really becoming standard offerings across the board. The grim reality for full agencies with fledgling dev departments is if you don’t have a path to skilling into these techs, you will be losing business to interactive pure-plays in 2010. Don’t mean to be a downer, but it’s true.

Hello, McFly, Mobile sites!

Hello, McFly
The Basics:
Mobile presence is a huge selling point and while the tech is very accessible, but also frequently poorly implemented. Heads up friends; mobile web development is not just sticking a 400px-wide stylesheet on your current site. (Gasp!) To make it work for you and your client, you need to grok:

  • mobile conversions, probably creating a custom site map
  • a raft of meta tags standard web devs have never seen before
  • old-school attention to file sizes and speed on the wire
  • targeting resolutions and capabilities depending on demographics and analytics

Next Steps:
Mobile Apps for major platforms (iphone, android, blackberry, windows 7 mobile) These can be tough nuts to crack, and some lines need to be drawn in the sand depending on the size of your shop. That said, this offering is of course the new hotness, and what your agency will eventually pitch clients, ready or not. There’s no doubt it’s a brave new world fraught with bureaucracy, api keys and certificates, registering devices, emulators and app stores (and you without your soma!), but this market is huge and only embiggening.

SEO

The Basics:
All of the on-page SEO 101 things that fall more into the category of not-shooting yourself in the foot.

Next Steps:

Get deep, work with your SEO / PPC / Media people and master the tagging, tracking pixels, click-tags, and custom variables in Google Analytics and understand how these bubble up into the reporting.

Converting!!

The Basics:
Ultimately agency sites always have a conversion vector to them, be they of the infomercialesque BUY NOW ilk or the kinder, gentler, delivery of information / sign up for the newsletter variety.  There is a dance of compromises that plays out between design aesthetics, calls to action, user experience, and information architecture that will culminate in the eventual comps, sitemap, and wireframes passed down to the developers. (If not, you are in trouble.)

At the next more technical level, your team working with SEO dept should be conversant in:
A/B or multivariate testing apps like Google Optimizer
Technically identifying visitors by personas, based on referrer, user-agents

Final thoughts

This post is meant to just be a quick checklist to help keep focus on the core skills of an agency web dev team. Agency work and technology can at times seem to be a battle of flavor-of-the-month memes, languages, and protocols as we package old media influence and persuasion inside ever-hipper trappings. Keeping up to date is mandatory for relevance, and in the Lord of the Flies marketplace of agencies, if you can’t figure out who’s Piggy, it’s probably you.

How to add an ID to every body tag with JQuery.

How to add an ID to every body tag with JQuery.

This is a quick one, more of a snippet to myself than a legitimate blog post but figured I’d put this here on the off chance this might help some other folks.

Let’s say you are dealing with a CMS or some other legacy / 3rd party system that generates the page HTML of your site in a way that is beyond your control.  You might need to get a distinct handle on certain elements of a specific page so you can style them with CSS or perform some JQuery magic. 

This little snippet will add an id of the page’s name (swapping / with –) to the body tag of every page.  This is injected into the DOM on page load so you won’t see it in regular ‘view source’, but will be able to see it with FireBug or the firefox web developers toolbar ‘view generated source’ option. 

As the inline comments say, www.blah.com/this/that/whatever.html, will become body id="this-that-whatever" or, if you are the webroot of your site, body id="home-page". Just add this in your $(document).ready(function() block …

// Duncan hack, get the entire path, turn /s to -s 

// strip extension and add that as an id to the body

// so we can target specific pages in the styles if we need to

 

// www.blah.com/this/that/whatever.html -> body id="this-that-whatever"

// or body id="home-page" if at root / 

 

var pathname = window.location.pathname;

var pathSlashesReplaced = pathname.replace(/\//g, "-");

var pathSlashesReplacedNoFirstDash = pathSlashesReplaced.replace("-","");

var newID = pathSlashesReplacedNoFirstDash.replace(/(\.[\s\S]+)/ig, "");

 

$("body").attr("id",newID);

 

if ( $("body").attr("id") == "")

{

    $("body").attr("id","home-page");

}

 

If you instead wanted to add the new identifier as a class, simply use a line like:

$("body").addClass(pathSlashesReplacedNoFirstDash);

instead of

$(“body”).attr(“id”,pathSlashesReplacedNoFirstDash);

Now you can target every page with your CSS / JQuery and make everyone happy! Hooray!  This uses javascript regular expressions so may not be as super optimized as it could be using substrings, etc, but it gets the job done.