Search engine marketing and copywriting make uneasy allies. SEM means writing for a machine, for an equation, for a filter. Copywriting means expressing human desire, passion, creativity for people. Yet when you can combine the basics of search engine marketing with creative copywriting, your clients win. Big time. And I’ll address this at the end.

But first, to illustrate this, I did a little experiment this last weekend with the beer making blog that’s updated by a few folks here at Pop Art. We planned this past Friday to drink our way around the world at the Portland International Beerfest, then do a beer review. I wanted to see firsthand how a linking strategy and keyword density strategy would work. Short answer: It worked really, really well.

Granted, it’s not like there’s a ton of competition over the Portland International Beerfest search term. But we drinkers and brewers tend to write a lot, and being the sort who are willing to pay $9 per six pack, we’re probably well-educated with a good income. Plus this is Portland, home of craft brew. My point is that this ain’t like competing over a zillion dollar search term like mesothelioma, but it’s a decent test.

Here’s how it went: (more…)

Our Director of Making Money and Being Smart, Chris Tacy, sent around a link to this summary of a BBDO research study about daily rituals and the emotions they reflect.

You really ought to read it, then come back here. It’s frickin’ awesome.

For one, it’s a reminder that when consumers choose things, they tend to choose first on emotional reasons, then later rationalize those choices with product features and benefits. So as marketers, we have to (more…)

One thing about my job that occasionally makes me grind my teeth is letting other folks write. Which is unfortunate, because my job title is “Copy Editor” and not “Lone Wolf.” I probably shouldn’t admit to feeling this way, but what are blogs if not text-based confessionals?

I expect that I am not alone among editors. All our co-workers speak and write the language, so we often feel compelled to justify our jobs by rewriting. Add to that fact I’ve mostly been a doer in my career up until this point: a writer instead of an editor.

And so it was with much glee that we recently had an internal project written by someone else, with only advice from me. It was not painless — I wasted half a day floundering with a pale rewrite. The original draft from our CEO had the message, but not the style. My draft had the style, but completely missed the point. (more…)

I call Pay Per Click (PPC) writing “Haiku for Dollars.” Mostly becuase I think it’s funny, and people laugh so I assume they agree. But PPC isn’t much of a creative strain — unlike most creative endeavors in which a broad base of life experience helps you connect concepts in bizarre ways, PPC tends to be as surprising a corn-fed blonde making the finals of American Idol. Or so I thought. And then realized, as usual, I was right the first time.

I’ll explain in a very long-winded fashion.

So with PPC, you have certain words (keywords, or search terms) that you gotta squeeze into tiny little character counts (25 character headlines, and two lines of 35 characters). And you’ve got to put the selling point in there, and do it in a way that it differentiates you from all the other crap PPC ads offered by the loyal opposition and noble competitors.

But you knew that. You probably also know about negative keywords. No? Well, it’s simple. Say you’re writing about a hybrid air-conditioner. You don’t want a guy searching for a new Toyota Prius to click on your ad, so you tell Google to NOT display your ad when someone searches for “hybrid car with air conditioner.” Because you don’t want to pay for that dirty, unqualified hippy to click your ad.

Clear?

So I’m writing a bunch of PPC ads about laminated veneer lumber a while back. (Laminated veneer lumber? Think of plywood stacked a foot thick then cut like a beam. Sorta. Anyway, it’s strong “engineered wood” used in home construction.) And in our list of negative keywords, I see WoW and “World of Warcraft.”

“What the hell?”

Well, laminated veneer lumber is known in the construction industry as LVL. And apparently, in the World of Warcraft, lvl is shorthand for “level.” So we don’t want some 42-year-old ubergeek searching for “lvl 60 druid” to get our ad. Because after all, everyone knows that searcher lives in his mom’s basement, only uses a hammer when his +9 crossbow of wounding has run out of magic arrows, and would be a throw-away click. There’s twenty-five cents the client will never see again.

Anyhoo. The point? Well, I assumed that someone on our team KNEW this shockingly geeky information about World of Warcraft and snuck it into our project. “Who put this Warcraft crap in my spreadsheet?” I bellowed like a lvl 30 orc. Because that kind of geekery cannot go un-teased.

But it turns out, Google somehow provides that list of negative keywords.

That’s it. That was entirely the point.

…

In other PPC-related news, I have an amusing tic that surfaces while writing PPC: flinching. Character counts matter, right? I can’t count characters as I write, but I have a sense for when a line’s getting too long. And as I get near the end of that suspicious line, I make a pained face and cringe like the word count button is going to bite me if I go over. It’s like gambling. “C’mon, baby! Be 35! 35! Let’s go! AWWWWWW, craps. Thirty seven. Shoot.”

And you thought copywriting was boring…

Have you ever had this experience. You rent a DVD, maybe one you’ve been waiting for. You are so excited to view the movie and you throw it in the DVD player. After the player adjusts itself, recognizes the disc, you wait through a series of warnings and previews. You fast forward or skip past all this content only to end up on the DVD menu. You wait as various scenes of the movie fade in and out, lines from the movie are played, maybe some snippet from a theme song is played, and you wait… and wait… and wait… as the animation has to play itself out. After enduring for what seems like an eternity, the words “Play Movie” slowly appear. But wait. You can’t select them yet. The words “Play Movie” are not done animating yet. They eventually rest in their place. Finally. You click the enter button and are ready for the movie to start. But wait. You now have to wait as all of the elements of the menu animate themselves back out of the screen. First the play movie text fades, then the various scenes and images fly and fade out of view as some line from the movie is played (usually one that also has a double meaning that confirms the user selection to play the movie) and the music fades out. Then the movie starts and the THX or Dolby screens animate into frame… Ughhh.

What is the point of the DVD menu? What function does it serve? Why can’t the menu just appear as a still and give you the option to select “Play Movie” right off the bat? Why the excessive animation? It is not as if the menu is acting as a preloader while the DVD player is preparing something essential for movie play. In that case, that might be sort of useful or entertaining. I’m just guessing, but I believe the only people that enjoy DVD menus must be the people that make DVD menus.

When designing web sites, how much of the design and creative are you devoting to useless visual clutter that has no purpose other than filler. Take for example this site: www.drano.com .

If I were interested in purchasing a drano product, I probably have a serious problem with a drain in my house. Let’s say I have a problem with the toilet in the bathroom. Let’s also say it is an emergency. I’m probably in somewhat of a hurry. Before I head out to the store, I do some quick research online to make sure I purchase the right product.

I visit the drano web site and I notice three choices - bathroom, kitchen, and garage/laundry. I am eager to find the right product so I click “bathroom”. I wait for the site has to load some information. I wait patiently. It finally loads (2mb of Flash files) and what do I see?

I see a video of a lady standing in a bathroom in front of a mirror applying lipstick. Huh? I don’t see any product information but I do see three glowing circles - one over the toilet, one over the sink, and one over the bathtub/shower. I click on the one on the toilet. After I click, the lady looks at the toilet and exclaims, “Oh no!” Then the camera moves into a close-up of the toilet, which oddly enough is not clogged or backed up.

An information box pops up over the toilet and tells me I need to purchase Drano’s Build Up Remover. This little information box isn’t big enough to have all the information I need about the product so there is a button at the bottom I need to click on that says “Learn More About The Product”.

Once I click it, then I get another page that has additional information. The lower half of the page is divided into three tabs - How it works, Directions for use, and Precautions. Each of these tabs has so little information under them that I don’t really see the point of breaking up the page into three tabs in the first place. The whole site frustrates me as a designer and a user. Why didn’t the design firm focus more energy on animating “How it Works” or “Directions for use” instead of animating a lady putting on lipstick in front of a mirror? That actually would have been useful and interesting. Or, they could have spent more time on the Solution Finder, which doesn’t make choosing the right Drano product any easier the way it is currently designed.

If you are designing a web site. Do not create the equivilant of a DVD menu. Focus your time and energy on the content, including making the content come to life via great design/animation/sound/video. Users want richer content, not lengthy animated menu systems.

Here’s a checklist you may find useful when judging writing. It’s not really in any particular order, except maybe the first two or three items. And there’s probably a million exceptions to each of these, which I’m sure you’ll helpfully point out in the comments section.The real benefit of using this checklist: you’ll polish not just the words, but also “the big idea.”

1. Will the audience get it?

Use words and phrases you’ve heard the customer say. Avoid, when possible, the industry jargon of the company selling it. Unless industry wonks are the audience…

2. What are you selling them? Really?

Are you selling a widget? Or are you selling the idea that a widget provides some benefit, such as saving time, making money, protecting their future, recapturing vigor, etc? And ask yourself this: what’s the benefit of the benefit?

3. Does it work in context?

A billboard may not be the best place for a paragraph. A trade pub may not be the best place for a consumer ad.

4. Will it grab their attention?

Have you phrased the headline in such a way that it can’t be ignored? In a GOOD way?

5. Does it flow with the brand?

Does over-the-top work? Is subtle totally wrong?

6. Is it simple?

You should be able to reduce most ideas to just a few non-jargon words.

7. Is it too simple?

I said “non-jargon” words. Figure out a better way to say “solution.”

8. Have you tested it?

Ask a few qualified people (unattached to the project) to tell you the what and the why.

9. Can you sell the idea?

Will the client see the brilliance?

p.s. The one caveat to this list? You must actually read the copy you’re judging. Writing is not design — you can’t judge anything but the headline with a two-second glance.

p.p.s. What questions do you have about copywriting? Post them in the comments section, and I’ll either answer them or use them in a future post.

I have been working with web standards based design for many years now and I see many rookie mistakes. When newbies get started with CSS/XHTML based web design, most of their work is focused on just getting the page to look like the Photoshop comp. While this translation is important to keep the client happy, considerable thought process should be involved in creating the semantic markup and marrying that with CSS. CSS is not a collection of hacks to get the browsers to bend to your will. Style sheeting is more of an art form. The difference between choosing inline elements and background selectors is a delicate procedure. How will I manipulate the structure? What is the client brand and how does this work into my markup? Simply thinking through your process before starting each project will save you headaches as the site grows.

1. The client’s brand is important.

To exemplify the brand with visual queues is key. Keeping the logo whole is an example. Now that traditional table based slicing and dicing is gone, we can keep the integrity of our presentational inline images.

2. Keep content images whole.

Images that reside in the content flow should be allowed stability in that structure. This includes the logo or any supporting images in the document. I really enjoy right clicking an image, especially a logo, and receiving a nice whole transparent PNG. Deciding up front is detrimental to keeping the integrity of the design and brand. Even the markup. This may not matter to your client but it matters to your colleges or future employees who might edit your documents.

How is this done. Take advantage of transparent PNG’s. Since the birth of IE 7 and it’s fluent injection in the industry, currently 25% of the market, we can now take full advantage of transparent PNG’s^*.

^*What about IE 6? Their are many techniques to relieve IE6 of it’s transparency bug.

Think of your composition as Photoshop layers. Keeping your images whole allow you to layer your images using z-indexing. Don’t forget that the Trident engine(IE) thinks the the stacking order starts at 0. The Gecko engine starts at 1. Carefully organizing your stacking order allows you to keep track of elemental layering.

3. Go with the flow.

A designer knows what’s best for the client and the user and will make specific decisions about where structure shall live, where the logo will be, where the primary call to action will live, etc. If the logo rests in the top left corner of the comp, it should also live in the top of the markup. Before starting, review the composition and decide what images will rest in the presentational CSS and what images will rest in the inline with in the document. Obviously if the composition shows the logo at the bottom it should still rest at the top of the document. Try and keep it close to what the designer or project team intended.

4. Complex layouts are made of simple sections.

Consider the value of each section of the site when dealing with complex layouts. For example when presented with a 3 column comp, determine the value of each section. Should navigation rest underneath the logo? Does content take reign over all other elements? Taking time before you start will save you a lot of headaches down the road. Here is an example of sectional ordering with three column layout:

1. Logo/Branding
2. Navigation (vertical or horizontal)
3. Main Content
4. Secondary Content (sidebar-two or supplemental content)
5. Promotional Items (ads or internal promos)
6. Footer/Copyright

5. Keep containers to a minimum.

Save your document from structural bloat. New developers will use many div’s similar to table cells to achieve layout. Take advantage of the many structural elements to achieve layout. Do not add more div’s. Consider all options before adding additional wrappers (div’s) to achieve an effect when using a little nifty CSS can get you that same desired effect.

6. Use the @import rule to organize your CSS.

Not only will the @import rule save you from an undesired effect with legacy browsers such as IE4, IE5 MAC and Netscape 4 (a few still exist!) it is easier to maintain. Since you carefully organized your document you will not be ashamed of your un-styled markup.

7. Organizing your CSS helps with future maintainability of the site.

Start with a master style sheet. Within this style sheet import your reset.css, global.css, flash.css(if needed) and structure.css and on occasion a typography style sheet.

Here is an example of a “master” style sheet and how it is embedded in the document:

• @import url("reset.css");
• @import url("global.css");
• @import url("flash.css");
• @import url("structure.css");

<style type="text/css" media="Screen"> /*\*/@import url("css/master.css");/**/ </style>*

^*Notice the capitalization in the media attribute. Capitalizing “Screen” will save you headaches with IE on Windows Mobile 5. Currently, I use a Plam Treo to access all my mobile online content. (Yes, I will be switching to an iPhone when available.) The Treo’s OS is Windows Media 5. The browser is IE. Are you thinking the same thing as me? Yes, another IE browser to work with and eventually hack. And this one also has bugs. The biggest rendering problem is the mergence of presentational and handheld style sheets. You can imagine the disaster that creates. But their is a fix. If you capitalize the “S” in screen IE will skip the presentational CSS documents and render only the desired handheld mobile style sheet.

8. Organize your alt CSS documents.

What about devices that do not rely on CSS style sheets? Since your structural markup is already organized the visitor should have a pleasant experience with the site. On any device with style sheets or not.

Alternative documents such as arual, print and handheld can be grouped together in a alternative directory. As you can see I place these alternative style sheets in a directory called “alt”.

Use the link tag for other style sheets as so:

• <link rel="stylesheet" type="text/css" media="print and (min-width: 25cm)" href="css/alt/print.css" />
• <link rel="stylesheet" type="text/css" media="handheld" href="css/alt/handheld.css" />
• <link rel="stylesheet" type="text/css" media="aural" href="css/alt/aural.css" />

Do the exact with IE bugs style sheets. Organize them in to an “iebugs” directory.

Use conditional comments to include your IE bugs CSS:

<!--[if lte IE 6 ]>
<code><link rel="stylesheet" type="text/css" href="css/iebugs/ie6.css" />
<![endif]-->

<!--[if IE 7 ]>
<link rel="stylesheet" type="text/css" href="css/iebugs/ie7.css" />
<![endif]-->

9. Hook, line, and sinker.

Once you have your CSS and sections in place start considering where your selector “hooks” will live by using structural hooks in your mark up. This is your saving grace for future editing and maintenance of the site. This will also give you strength in your document.

10. Body tag ID.

In most cases placing an ID in the body tag will allow you manipulate CSS presentational items and markup elements by page by page basis. This also will cut down the amount templatatization (is that a word?). Not only will you be able to organize your sections you will be able to create multiple CSS presentations with out changing your markup from template to template or page to page.

For example if a 3 column layout requires being reordered from page to page. Such as columns switching places. This is easily achievable with the power of specificity and the CSS cascade. Simply adding an ID to the body will allow you to change anything inside and outside the document flow. This is increasingly useful when dealing with pages in CMS systems such as Wordpress.

That’s it. There is so much more to cover, but these simple techniques will get you off to a great start. Until then…

Happy Stylesheeting!

-Ryan Parr http://www.parrfolio.com

Specificity with CSS is like having ketchup with your hotdog. One does not taste good without the other. Right Dave? When dealing with very complex styling or multiple templating (10-20 page types) your best bet is to utilize element types. Various page by page styling can be achieved by simply adding an id selector into the body element. The body#foo specificity is very high and will overwrite other more generalized descendent selectors. The body#foo #foo has higher specificity than #foo thus overwriting #foo.

The Web site pica.org developed multiple page types and those page types have multiple color schemes. We were able to control the structure by utilizing elements by a simple ID selector in the body tag (id=”inside”). At the same time adding more strength with the addition of two class selectors level1 and blue (class=”level1 blue”). The CSS declaration looks like this: body#inside.level1.blue Now we have what we want. Multiple page types with multiple colors with out changing any of the underline structure.

What about the dependencies of such a method?

Plan out your structure carefully. PICA demanded specific template control and color scheming. We came up with a plan to execute these ideas. In this case the most obvious was to depend on the cascade with descendant selecting.

Don’t go overboard with multiple selectors

Try to avoid writing many multiple selectors with in your document flow. Choose specific key areas to place you selectors. If you are writing a declaration body#foo.level1.blue.template3 #nav ul#on a.current to overwrite a simple link than you’ve may have gone over board. This can simply be avoided by writing li#link a.current.

Specificity can be come very complex.

With the long overdue arrival of attribute and descendent selectors, specificity is going to be more complex than ever. Of course this is due to IE7’s long and overdue arrival. For now, take advantage of specificity and rely on decedent selectors to do the job for you.

In July of 2006, Pop Art’s President, Steve Rosenbaum, commissioned the Pop Art design team to develop new marketing materials to coincide with our move to a new office space. During this process, Pop Art’s existing logo was called into question, and the design team set out to develop a new logo.

As with most internal projects (industry-wide, not just at Pop Art), the process was long and sometimes contentious, but the result is something the whole team is very proud of. The new logo reflects our passion, creativity, style, and attitude as we carry out the principles of the Pop Art movement with a unique brand of explosive creativity.

I thought it would be fun to show the route we took to get here from there.

The first pass was just throwing some ideas at the wall. My goal was to create something cleaner than the existing logo, something that would work better across media, at small sizes, and in different uses (the old one was tough to use on dark backgrounds). Additionally, our new location gave us the opportunity to have a large vertical sign, which the old logo wasn’t well-suited for. I wrote down a bunch of words, but the one that seemed to stick was this idea of “expansion” and that of the logo literally popping from being over-inflated. A personal favorite from this round was logo D. I thought it was clever to use the ® mark as part of the logo as a comment on the commercial nature of our work. Clever, but kinda boring.

In round 2, I refined the exploding/expansion idea further and ended up with logo A. Yes, I know the font is Bank Gothic, and yes, I know what a cliche font it is. The intention was to get an idea across and work on refining things like the font a little later. Ben created logo E, which I thought was a lot of fun, playing on the expansion idea in more of an entropy/Big Bang sense, with concentric rings that could represent sound or percussion waves. The use of Helvetica seems very appropriate to the commercial use of this logo. Intern Tom Solitt threw out something that we all thought was a great idea - a bottle cap logo (C). I liked the idea of opening something to release the good stuff - a pretty good metaphor for what we do. Web projects are often all about getting information from behind the corporate firewall and into the eager public’s hands. Steve’s personal idea (and an interesting one, at that) was to appropriate another company’s logo in a different context as Warhol did in the transition from soup to fine art. Logo B is inspired by Toys R Us’ logo. The old logo (F, if you’re playing at home) was inspired by the Tide detergent logo.

After this round, we sent the contenders out to Pop Art’s entire staff for their thoughts. Each team member was asked to pick their 3 favorites in order of importance. My logo was chosen, with a lot of support coming from our development team (who liked the “high tech” look of Bank Gothic).

For further evaluation, we placed the bake-off winner among some local and national companies in the same mind-space, to use some jargon, and the team felt we were headed in the right direction visually, since the new logo could easily compete visually.

Still, Steve was unsure this version was exactly right, and he asked me to go back to the drawing board for some more exploration. I spent an afternoon at home with pen and sketchpad, and did quite a bit of doodling. Here were a few favorites (or if you’re really crazy, download a PDF of my sketches to the tune of 6.1MB).

Steve, Justin and I all got together to review the sketches I’d done, and selected a few to elaborate further on. All of us were pretty much in agreement on the below sketches and felt we were getting really close.

We selected logos A and E for final polish and elected to view them in context. This seems like a no-brainer, but none of us had really gone through this step in a logo process before and I feel it’s worth repeating. I was initially drawn to logo E, but after seeing it in context on business cards (below) and in other venues (Here’s a PDF of the PA web site and our forthcoming media kit, 884KB), I was sold on logo A. And so was the rest of the team.

With a little more tweaking, a little more kerning, and developing a full range of logo uses, we were finally there. Er … here. Interestingly, Chank’s Adrianna font from round 1 is used in the final logo (a great compromise between business and fun), and I’ve incorporated Ben’s early CMYK idea in some of the identity materials we’re developing (hence the logo on those background colors.

I’d love to hear what you think of the new logo.