The post was on the future of public relations, and where PR was headed. One of the explored paths, a scorched wasteland of a future, was SEO. Since my opinion on SEO is really a matter of public record, I disagreed. I said it was an oasis in the desert; drink it up and we (the PR profession) will find it was all just hot sand.

Cue mini-shitstorm. In the next 24 hours, I would brave the following:

• Having it suggested that my clients should be pitied.
• Being told what I was doing, spreading misinformation, was “shameful.”
• Being called a liar and a scammer.
• Being called a fucktard. (I’m happy to see the term has moved beyond the juvenile gaming community and into the real world. I always liked the word when I was thirteen.)

More often than anything else, I was called ignorant. Guilty as charged. I’m completely ignorant as to what SEO folks do. But I felt less bad about it when I figured out that– Surprise!– everybody else is too.

SEO guys don’t actually do anything

I should qualify this with a …that other professions don’t already do better. But I’m prone to dramatic statements, so let’s go with it.

Let’s start with the term search engine optimization. This used to be a really innocent term but, like the cast of Jersey Shore, it somehow got caught up in something bigger than itself.

The basic way of doing it meant tweaking a site to comply with (or better comply with) major search engines. If I could go back in time and shift the mighty river that is the meaning of a word, I’d keep it to this:

Search engine optimization: Optimizing your website (and only your website) to more easily be read by search engines.

NOTE: I should note here that SEO has also evolved to have a second meaning as well, a word that tries to quantify the effect that backlinks bring.  Some people call this “link juice” too. This post is only concerned with the term that pertains to professional techniques employed by individuals, not websites.

Anyway, onto the technical!

The Technical part of it

Anyone who does serious web development knows that this specific SEO is a byproduct of what they do. Semantic markup and quality construction of a page is the stuff crawlers love. Asking a web developer if he does SEO is like asking a carpenter if he drives nails. It’s like asking a barber if he trims around the ears. “Well, that’s part of a haircut, isn’t it?”

SEO (in this sense, not the runaway-train phrase of today) has to remain in the technical realm, and there’s a pretty simple reason why: There’s about a million ways to build a website. Even if we narrowed it down to a dozen major frameworks/languages, you’d still be hard pressed to find a single guy that knew everything about all of them.

And yet, SEO gurus consistently claim to be able to optimize any site, whether it’s a Django site, a custom PHP job, a Joomla site, or a site coded in a Swahili version of Perl.

To me, that’s a pretty amazing claim. I know competent programmers who struggle for months and years to become good with one framework. To me, that claim can only be bullshit. Leave the technical stuff to the guys who know what Javascript is.

And, yes, of course there are very simple things you can do to improve your website’s ranking, if your website is in a bad enough condition. But getting your hair trimmed around the ears doesn’t qualify as a haircut. And you shouldn’t be paying full haircut prices for it.

The non-technical part of it

Websites have stuff inside the tags, too. I get that. Content is the big driver of the web, and it’s a big driver of a website.

If you’re consulting on content strategy or rewriting the content of a website to better suit your market’s searches, then fine. But let’s call that Search Engine Marketing. Because that’s what you’re doing, if you do that. There’s nothing wrong with SEM because these techniques (among many others in SEM) are clear, well-documented and easy to explain.

For a lot of folks, this could boil down to semantics. If you just thought, “Okay, great, he’s not talking about me,” then you might just be right. If you’re one of those folks, go to your various web presences and delete all references to SEO.

Do it because, right now, you’re never been a part of a more wretched hive of scum and villainy. As Obi-Wan said, you must be cautious.

SEO doesn’t have the openness or easy explanations. SEO is a mystery wrapped inside an enigma, etched in another language on stone tablets pulled from the side of a mountain. But I’ll get to that in a bit.

Building a backlink empire

The final part of “SEO” is the stuff done off-site. Ever since a startup called Google decided to make backlinks a leading factor in search results, this has been a pretty big deal. I’ve heard it described by SEO pros a being between 40% and 80% of the job.

There’s two ways to build your backlink empire: whitehat and blackhat.

Whitehat is the good stuff. It’s getting coverage on blogs or other online publications. It’s getting people to link to your site in their tweets. It’s building a social media presence on sites like Twitter, Facebook and Youtube.

It’s, well, it’s public relations. More and more, this is (and has been for a while now) a function of PR. There are other whitehat strategies like building partnerships (linkswapping sounds so 90s, but you might know it by this name), but I see those as in the realm of PR too.

I’ve asked about other backlink strategies that fall specifically to an SEO guy and outside the PR realm. That’s when I collected most of the insults I listed above. There are some easy answers too, such as paid listings (search advertising) but again, I see that as falling to SEM. Buying a search ad isn’t optimizing.

Whitehat’s evil twin brother is blackhat. Blackhat practices are unfair to everybody involved except the person doing them. They’re basically a bag of (admittedly, often very clever) tricks that can artificially boost a site’s rankings.

The problem here for “SEO” is that the bag of tricks is running out. Year after year, new tricks are squashed by Google and the other search engines. What’s left? Well, I have no idea. Like I said, I’m completely happy to confess ignorance here.

But don’t ask me, ask an SEO guru which specific techniques he uses to build backlinks. You’ll be met with silence. Or you’ll be called a liar and a scammer, like I was.

Why? Well, in my mind, there’s three possibilities:

It’s a secret sauce: The SEO guru has a bag of tricks that are all above-the-belt, honest techniques that he can use to supercharge your web presence. He just doesn’t want to tell anyone because, hey, it’s a trade secret. This is the pick for folks who still believe in the tooth fairy.

It’s blackhat: The SEO guru makes a bunch of fake blogs that link to a product. Or he knows a hack that will be fixed by Google six months from now, potentially getting a client site banned in the process. Because he uses blackhat techniques, he doesn’t want to talk about it because hey, it kind of makes him look like a jerk.

It’s complete bullshit: All the tricks have run out. SEO is a duct-taped faux-industry running on fumes. All that’s left is to live out the momentum of the glory days and hope that clients keep paying big bucks for a temporary fix that’s best executed by real professionals with real specializations.

I’m leaning towards the bullshit option. SEO has surrounded itself with a shroud of mystery that keeps people from asking questions. Part of what allowed this is the very nature of search: It’s complicated. Google says they use over 200 factors in weighing sites. And it changes literally every day, every hour and most recently every minute.

It’s too easy to label yourself with SEO. And I’m just not buying it. SEO is still a band-aid on the bleeding wound of bad web development.

Next time someone tells you they do “search engine optimization,” ask them which search engine they work at.

Facebook is rolling out a new layout. If the story doesn’t sound familiar, it should.

You can guess the rest. Some people got it early. It has mixed reviews. There’s a facebook group with thousands of people unhappy with the changes. And the latest step: People groaning that it’s already happening again. (The irony of including this step in this post is not lost on me, but bear with me for a moment.)

It’s starting to feel like they’re just moving the same ol’ furniture around.

Maybe that’s exactly what they’re doing. Has Facebook found the formula for keeping the top spot? Keep it feeling fresh, even if nothing has changed all that much.

Madonna reinvented herself every few years. Facebook rolls out a new layout every few months.

Is it the only reason they have hundreds of millions of users? No. But it’s a big reason that people are staying with the site.

The takeaway: It seems to work.

What have you done lately to keep your site feeling fresh?

Like many others, at one point I found myself asking, “Wait… it’s a 4:3 screen?” It wasn’t because I was disappointed in the new specs; this was hours after I had seen actual images of the device. “I could have sworn it was widescreen!”

I wasn’t quite ready to dismiss my initial perception of the device. After all, the media-consuming public has been conditioned over the past decade to accept that widescreen is just better. Our TVs are wider. Our monitors are wider. Even our Apple laptops are wider.

But the iPad, as it turns out, isn’t wider. That doesn’t stop Apple from giving the impression of width on their website (or, at the very least cleverly transitioning us towards this “new” aspect ratio). My initial perception was wrong, but it took an image rotation in Photoshop to really convince my brain.

Looking at the promo images of the product, it’s not hard to see why. The iPad is almost always presented vertically. If not, it’s slanted away from the camera and pointing off-page, giving an illusion of width-through-depth that, if you don’t look carefully, makes it look wider than it actually is.

Apple isn’t evil and this isn’t a malicious “gotcha” scheme, of course, but it’s worth noting. The folks at Apple are masters at presentation, and I’m positive that they put as much thought into this as any other part of their launch campaign. As far as gripes go, the 4:3 aspect ratio usually comes in pretty low on lists, and I’m betting it’s due in part to this clever presentation.

It reminds me of the old tables optical illusion: Which tabletop is longer?

The answer (like most optical illusions) is that they’re both the same. Exactly the same shape for both tabletops. That one on the left sure looks longer though, doesn’t it?

Blur

Blurring is a pretty common image editing and design technique. Unfortunately it looks like a lot of negative after-effects of image manipulation.

The two Orlando Sentinel logos seen here have a major difference: One is sharp, and one is blurry.

To most people (including most designers), it’s impossible to tell if something has been blurred, or if it simply looks blurry as the result of something else. If the above logo had been made larger, for example, it would look a bit blurry afterwards in most programs. For a print company on the web, this might not reflect well on the Sentinel if they had the bottom, blurry logo on their website.

Of course, they do have the bottom, blurry logo on their website– that’s the original. The top one has had a simple sharpen filter run on it.

The tips:

• Avoid unnecessary smudging or blurring, especially on type.
• Solicit feedback from people just getting started with design.

Lossy

Image manipulation can wear out your images fast if you’re not careful. JPEGs get a grainy look. GIFs can go low-palette or get that weird, spotted look. And all images can get pixelated through repeated resizes, even if you’re resizing down.

Occasionally you’ll want to use a pixelation effect, a grainy effect, or an effect that mimics a low palette. Be careful that your image or artwork doesn’t too closely resemble these common missteps in image manipulation.

Even popular effects, like the “grunge” effect, can start to resemble image degradation. Here’s a “grunged” bit of type, and then a lossy version of the same type, without any grunge effects.

One has a carefully applied dirt/wear effect. One was just saved with really bad GIF options. To the layperson, these two might start look very similar, very fast, especially if we were more aggressive with a grunge or retro effect.

The tips:

• Avoid retro or grunge effects entirely. (I’m kidding! But seriously, do be careful with any effect that adds wear to a picture.)
• Be extra careful with pixelation and grain effects.

Repeating backgrounds

You can do really cool stuff with repeating backgrounds while keeping your file sizes ultra-low. The second you remind your user of the bad backgrounds of the past two decades, however, you’re done.

(This says “Welcome to my homepage!” Tell your eyes I said sorry.)

The tips:

• Avoid seams. If you’re in Photoshop, you can use Filter > Other > Offset to quickly see where they might be apparent. For certain backgrounds, the healing brush can help you fix seams really fast.
• Avoid prominent details. If you have a smaller repeating background, make sure there are no large marks or patterns that make the repetition painfully obvious. In Photoshop, use Edit > Define pattern to make your image into a pattern, which you can then use to fill (Select “pattern” instead of “foreground color”) a large canvas. If anything sticks out, remove it. You can also make the background image larger to less the repetition effect.
• Avoid repeating backgrounds altogether if you can. Lots of sites have full page background images, with surprisingly low file sizes. But that’s another post…

So there you have it: Some mistakes the pros can make and accidentally look like amateurs. Got something to add? I’d love to hear it in the comments.

I wrote about brand perception and brand image before over on Fedorable, and some of that thinking applies here. Brand perception is how customers see a company, and brand image is the actual stuff that the company creates. There’s usually a big gap here, even when it comes to something as simple as a logo (which is not in itself a brand, but rather a small part of it).

Very few people have photographic memories, and when a brand is brought up in the customer’s head, there’s usually an associated logo.  This thought is where brand perception and brand image meet. It’s the thought that you need to be designing for.

Try it. Think of the logos for these companies.

Nike McDonald’s Facebook

Got some images in your head? Good. Do you think you could draw them? How about pick them out of a lineup of similar logos?

Keep this simplicity in mind. Most people could produce a semblance of these logos with a pen and piece of paper. The same can’t really be said for complicated logos involving large sketches, gradients, or multiple elements. State flags make for great examples. Here’s Florida’s:

If a logo is as complicated as the seal in the middle of this flag, then it’s got problems. Here are a couple methods for simplifying a logo:

Simplifying an existing logo

I don’t feel like picking on anyone else’s logos, so I’m going to go ahead and use the Match Strike logo for this example.

It’s already pretty simple. But if we wanted to simplify it more, we could. The method I typically use here is trying to recreate the logo, using only two colors: Black and white. This brings out the shapes that will stick with the audience best. If the logo you’re working with relies heavily on color, you can cheat here and use a third color, 50% grey. Here’s my Match Strike result:

The flame and match are still easily identifiable, even though I had to cut out a few color distinctions. If your logo is still recognizable in this state, then it’s probably simplified enough to really stick in someone’s head. If it looks like a muddy mess, then consider throwing out the same elements that make it hard to recreate in two colors.

If it looks okay, then try working forward from this point. If you can simplify the logo, consider just using the simple version as your new logo.

Creating a new logo

The best advice I can give for creating new logos is to start off with a rough, black and white sketch. You can evoke a lot of emotion and get a lot across in a single sketch. They’re also quick, letting an artist produce multiple logo concepts in a short amount of time.

Limiting yourself to two colors also keeps you from expressing too much, keeping the logo simple. I’ve used this process for a while now– here’s one of my earlier logos (below is a  suggested color palette, and the finished logo on the right):

Even though the end result is a pretty complicated logo, it didn’t go too far in my mind because it was easily represented in the concept. I should note that I used the “cheat” method here of 50% grey. If it’s something that we learn again and again in the logo design world, it’s that rules don’t exist– just suggestions.

GIF or PNG-8 sprites should be grouped by color

If you’re taking advantage of the low file sizes offered by the GIF or PNG-8 format, make sure you’re not sacrificing any color quality at the same time.

In this example image, we have three different color groups of buttons sharing one 64-color palette (intentionally low for demonstration purposes). If you look closely you’ll see the gradients in the buttons, especially purple and orange, aren’t looking so great. Here’s just the purple group in an image of its own, using the same palette limitations:

Since the palette is devoting more of its 64 spots to the one gradient, it appears much smoother. Generally try to keep color groups in separate spritemaps, especially if the images contain gradients.

If you’re using JPEG or PNG-24 sprites, you don’t need to worry about this grouping, although you may need to be worried about file size. Managing CSS sprites is often about managing the trade-offs.

Sprites without padding break when zoomed

Certain browsers will display CSS sprites in a weird way when zoomed in or out. If the sprite has padding between each element, the browser will display the padding instead of the element next to your image.

Here’s a close-up of zoomed Chrome and zoomed Firefox (3.5.5) on At Libs, focusing on the alternating image that uses a CSS sprite (in this case, the Django pony).

In Firefox, the pony image blends in seamlessly with the surrounding image as it is designed to do (and so do the other switch-in overlays). In Chrome, however, the trick unravels  as the areas around the pony image on the top and left show up when zoomed. Firefox handles this better, but it’s not necessarily a mark against Chrome, since zooming generally seems to be a crapshoot.  Older versions of IE work like Firefox does here, while newer ones have the lines like Chrome. Right now, it’s best to just prepare for the lines.

To do so, just add 1px of padding between your sprites. In the fully-colored pony example, adding an additional 1px that matched the rocket background on all sides would have solved the problem. It’s a bit easier with a simple white background– just space out your sprites a bit.

Use Photoshop coordinates to quickly position backgrounds

Using a combination of rulers (View > Rulers) and the info box (Window > Info), you can easily find the top left coordinates of any image in your sprite map.  Move your cursor to the right spot and the coordinates are displayed for you in Info. Use these with background-position to easily place your background. Just remember to put negative signs in front of them. If that’s confusing, then think of it as moving the background to your image, not specifying where the background itself is. Photoshop top-left coordinates of X: 15 and Y:90 would become background-position: -15px -90px;. Easy, right?

Transparent ‘spacer’ GIFs are bad

I still see this method in use now and again, and it leaves me scratching my head. After all the images on a page are loaded into a sprite map, the original img tags in the document will be replaced by a spacer image, usually a transparent 1×1 GIF. It’ll look like this:

<a href="/links"><img src="/img/spacer.gif" alt="Links" class="spriteclass" /></a>

The CSS spriting technique will then be applied to the img, with the transparent gif being stretched out invisibly. I prefer a different method which involves taking out the img tag entirely. I use this:

<a href="/links" class="spriteclass">Links</a>

Looks like a regular link, right? With some CSS we can turn it into the button we want it to be, using a technique called Fahrner Image Replacement.

.spriteclass {
display:block;
width:200px;
height:100px;
background: url('img/spritemap.png') -200px 0px;
font-size: 0;
line-height: 0;
text-indent: -9999px;
overflow: hidden;
}

The important bits here are display, font-size, line-height and text-indent. Make sure you use these values, or you’ll find your text popping up in some way in certain browsers.

With this method, you’ll find yourself relying on the img tag a lot less often, further separating your design from the semantic markup of your document. In the end, that’s a good thing. You’ll also kiss one HTTP-request goodbye when you stop using spacer.gif.

CSS Sprites shouldn’t add production time

Unfortunately most developers and designers have a bad first experience with CSS sprites. Usually a developer will learn of the technique mid- to late- in a current project. As a result, the first task he or she will be faced with is converting a site from regular old images to a full-blown CSS spritemap. Sometimes this translates to “CSS sprites are an annoying process that I have to do at the end of production.”

Well, it shouldn’t be that way. Converting a site is always tough, but designing from the ground up with CSS sprites in mind actually adds no development time. Sure, extra time is devoted to managing the sprite map and figuring out coordinates, but time is also saved by avoiding the hassles associated with multiple image files. Editing is easier. Uploading is easier. Time is also saved on markup end, with less img tags to worry about in the document itself. I’ve found that, in the end, it evens out on time, but saves on hassle.

That’s like a win/win. Or a draw/win. Either way, don’t avoid CSS sprites just because they made one project take longer.