Google Analytics opt out

▼Blog

Return to Google search says ‘I’m somebody!’ again

Steve Martin in The Jerk A delisting from Google equals death, or at least the loss of a limb or two for major sites that depend on search-driven Web traffic. For NickGehring.com, it meant an inconvenience and a bit of embarrassment. It was like the 1970s version of me disappeared from the phone book.

I can’t say what I did or didn’t do that caused my site to disappear from Google search, but it has been fixed.

Most other sites I’ve created hit Google’s search within days. Me.com, however, took eight months. I finally remedied this oversight when I took it off my project backburner late last month. Before finding the solution, I made a few half-hearted attempts to find out why I wasn’t being listed.

I first tried adding my site to Google’s Webmaster Tools. Webmaster Tools show users what Googlebot is encountering as it scans their Web sites and provides other useful information. I figured giving Google permission to collect all it wanted about my online affairs would help. It did not. However, after performing a keyword scan on my site, Google spit out a strange list of keywords that were definitely not mine.

I then skimmed my site for hidden bits of code or those weird words from the list, perhaps from an sql injection attack. WordPress blogs are particularly susceptible to these and other security problems. Because of this, I did a few things to harden my install but found nothing wrong.

Back to Google. Sitemaps Generator, a WordPress plugin, is an easy way to submit your sitemap to the three major search engines. After you create a new post, the plugin generates a new sitemap and notifies Google, Live and Yahoo about the changes via ping. Does it help your site achieve a higher ranking? The plugin’s maker says it doesn’t know but “it can help Google to index and crawl your page better which may result in a more complete index of your page.” Even with the extra effort, no luck.

Meanwhile, Yahoo and Live both indexed my site, but no Google. Searches for help, including a couple of SEO companies’ forums, didn’t help either.

Finally, a random search yielded a great suggestion: Submit my site to Google for reconsideration. The Official Google Webmaster blog outlines how to do it. A couple weeks after submitting my site, it appeared.

You can only imagine my excitement. Much like Navin Johnson (aka Steve Martin in “The Jerk”), I knew I was “somebody” again. I am somebody!

Navin R. Johnson: The new phone book’s here! The new phone book’s here!
Harry Hartounian: Boy, I wish I could get that excited about nothing.
Navin R. Johnson: Nothing? Are you kidding? Page 73 – Johnson, Navin R.! I’m somebody now! Millions of people look at this book everyday! This is the kind of spontaneous publicity – your name in print – that makes people. I’m in print! Things are going to start happening to me now.

Lack of planning, organization will unravel your project

I’ve never really created something with a plan in hand.

I am the kind of builder who puts together a house by eyeing it. Blueprints? A schedule? Who needs ‘em! I can guess on how much wood, shingles and plaster I need. Be glad I’m not a builder.

And while this strategy has served me well over the past 27 years, I’m beginning to learn that for large projects, having a blueprint is not a bad idea.

As I write more and more of my own code and decipher the old writings of previous designers, the more and more I realize the value of a plan and organization.

One of the best bits of advice I can give any Web site creator is to be organized and think what another might encounter if he or she opened your coding and had to perform maintenance on it.

Don’t name your styles in a style sheet by the attributes that they describe. In other words, no classes called “orangetext” for text that’s supposed to be orange. What if you want to make that text blue? The best style classes and ids match their function, such as “.middle p,” which might be a way of styling the text of a middle paragraph. It really depends on the project and your needs.

MySpace, incidentally, is one of the most high-profile offenders for its CSS. Among the classes: .blacktext12, orangetext15, .btext and .redbtext.

Also, be sure to leave commented out text in your style sheets and coding so sections of code can be easily searched for or identified.

I’ve long looked at the CSS on my blog and thought I should clean it up. While organizing and trimming code will make my pages leaner and easier to maintain, I am afraid that erasing one class or attribute that I made many months ago will cause my design to unravel.

This is the problem with large Web sites that have been around longer than this blog. Multiple users have multiple ways of doing things. Rather than carefully scoping out the coding of another, these users go in and lay down their own conventions. This create redundancies and also bloats the size of the coding. Good luck going in and trying to fix something. I think that’s why you’ll find so many !important‘s in large site style sheets.

This much advice I can offer. As for planning, I need to stop making it up as I go and actually outline the names, styles and organization I’ll need before I write something up. This will help me cut down on bloated coding, debugging and maintenance time.

I could never write one, but I know many of my high school teachers loved when we outlined what we were going to write in an essay before we wrote it. Again, this felt very unnatural to me. I write as I go along! An outline seems to destroy writing as a creative, exploratory process.

But, an outline saves a ton of time, and when project deadlines are tight, going into it with a plan might not hurt, even if it’s not that much fun.

Tips on getting your HTML e-mails to look right

If you hate Internet Explorer, you’ll loathe Outlook. Better yet, Outlook 2007 will make you love IE 6. Really. Outlook 2007 is evil

Designing HTML e-mails is a challenging art and far worse than any struggles you’ll have trying to make a page look pretty in IE or Firefox.

Remember Web standards? Toss them. You’ll have much more luck coding at random — and I wish I were kidding. Designing engaging HTML e-mails is a great challenge.

Blocked images

Not only do different e-mail clients support various Web standards, many also block images by default. Users can choose to download or view the images, if they even notice their absence. Some clients show broken image icons; others do not. Not all show the images’ alt tags, either.

So don’t expect your pictures to be seen. You must design as if no one will see the e-mails’ supporting graphics. While you, Mr. Web Designer, may understand this reality, you will have to explain this extra carefully to the copywriters and graphic artists who are working on your e-mail project. The e-mail’s words are the verbal glue that keeps the message together.

How an upgrade can be a downgrade

Believe it or not, Outlook 2004 supports CSS better than 2007. Campaign Monitor, a Web e-mail marketing software company, outlines 11 e-mail clients’ handling of CSS. The 2007 edition even drops floats for block-level elements. Why?

Amazingly — unbelievably — 2007 switched from Internet Explorer HTML rendering to Word(!).

2004 features that 2007 drops

Background-image and -repeat
Display
List-style-image, -position and -type
Position
Width
Word-spacing

These words come to mind when I describe Outlook 2007. Microsoft took a huge step back with this edition.

Coding advice

So you want to create an HTML e-mail. My best advice:

Put everything in tables if you want it to layout right
Don’t use an external style sheet or style sheet in the head. Make everything in-line.
Double up on your styles, and use old, deprecated HTML style tags to step in just in case your in-line CSS isn’t working. Learn to love font tags — they’re back!
Test! Start in Outlook, then send test e-mails to Google, Yahoo, AOL, Hotmail and any other e-mail client your users are likely using.
Markup your code in HTML comments so you know where your tables and sections start and end.
Study Mail Chimp and Campaign Monitor‘s free e-mail templates.
Support the E-Mail Standards project and look at its list of e-mail clients and their support of various Web standards.
Despite the restrictions, e-mails can look pretty, assuming your images make it through.

One of these colors is not like the other

Annoying display of colors in two different browsers

How can two Web browsers display the same graphic in different colors? They can’t — at least not until recently.

Color management, a term familiar to photographer and print graphic designers, is a forgotten art for many Web designers. Primitive low-resolution monitors limited early Web artists to a palette of 216 colors. Now, aside mobile devices, most users have high resolution monitors capable of handling millions of colors. A limited palette should no longer be an issue, but another issue emerges: The color profile you used to so lovingly turn out that graphic or photo won’t be recognized by most browsers.

Getting your perfectly tweaked photo to appear the same way on your Web site is challenging. I didn’t think about this until I began mocking a Web site for a friend’s wedding. A background image kept appearing a different shade in Safari versus Firefox and Internet Explorer. Imagine — a Web design problem not linked to IE.

Safari, as it turns out, has included color management since version 2.0. Firefox has it now, but you have to go through some trickery to get it to work right or download a plugin. A proposed future version of CSS will include the ability to specify color profiles.

Even with a profile specified for your graphic or photo, good luck matching it with the browser’s default implementation of CSS colors.

How did I solve my problem? I re-exported my graphics file from Photoshop with the ICC profile option unchecked. This turned my colors just the way I wanted to match the surrounding CSS colors — or at least I hope so. Even with the Web being able to display millions of colors, it still has a long way to go to display them right.

Three pseudo classes beyond LOVE/HATE

I thought I knew all I needed to know about CSS, at least as far as modern browsers allow me, after reading a string of books about it over the past two years. (CSS Zen Garden is the best.) Somewhere along my studying, I blocked out certain rules, in most cases because Internet Explorer 6 doesn’t support them.

With Internet Explorer 7 more than two years old, used more than IE 6 and IE 8 coming soon, it’s time for designers to adopt more advanced CSS features. (IE seems to be losing market share as well.) The Microsoft developers’ site outlines IE’s support of CSS. Today we’ll look at pseudo classes.

LoVe/HAte is a handy way of remembering which way to order your link styling in CSS by :link, :visited, :hover and :active. (Not following this order will screw up things. Really. Trust me.) These familiar pseudo classes specify the look of your hyperlinks.

But wait — there’s more — and they don’t even have to be used for links!

:focus is a way to add focus to an element, like a form, and works now in Firefox and will supposedly work in IE 8. This is fantastically useful and a great way to make your site’s forms user friendly. Example.

:lang, again, not in Internet Explorer until version 8, but allows you to specify language of an element, like a quote box, and supply custom quotation marks. You can also use it in combination with XHTML to declare the language attributes of text in a document.

:first-child, now a part of IE 7, matches a style to the first child element of any element. For example, this selector could specify that the first paragraph of a document turn blue, but the rest of the paragraphs remain the default paragraph color.

Nofollow? Yes, fix! Bring some link love to your commenters

WordPress may be blocking your thoughts from the world.

The blogging software automatically inserts a rel=”nofollow” after hyperlinks in the comment section of its blogs. Google, Yahoo and other search engines do not follow links tagged this way. But what if you are legitimately including URLs in comments on WP blogs? Don’t your brilliant comments/links that contribute to the value of the Web deserve a little link love from search engines?

You can’t do much for the comments you submit on other sites, but you can help out your fellow bloggers by:

Manually editing the “nofollow” out of your blog’s WordPress source code, or
Using a plugin.

Which option should you use?

Manual edit

You are a control freak, aren’t you? Hacking your WP source code isn’t hard, but it can be tedious, especially as updates become available. This means keeping track of your changes and making sure they aren’t erased when you copy over the upgrade files.

I don’t do this to the WordPress sites I manage because it’s too much of a bother to keep track of the edits. Laziness certainly plays a role, too.

Online marketing guru Douglass Karr said he had troubles with the Do Follow plugin and developed his own hands-on solution. In his blog, he gives some tips on how to manually pluck the nofollows out of your comment section.

Plugins

Perishable Press provides a comprehensive list of dofollow plugins. I picked the DoFollow plugin due to its very simple options. Others allow you to specify how many comments a commenter must make, or what length of time must pass, before his or her nofollow is removed.

No spam

I already use WP-reCAPTCHA to prevent comment spam and have Akismet, which comes with WordPress, turned on. Between the two, and moderating my own comments, spam *knock on my wood desk* isn’t much of a problem. Because I “trust” the comments I approve on my own blog, I’m not worried about blog spam, either.

Why nofollow?

Philosophically, the automatic inclusion of nofollow in WP comments makes some sense, especially for bloggers who lack tech savvy or install a blog and forget about it. But moderating your comments and installing basic anti-spam plugins is all a blogger really needs to fight evil spam. Having nofollows around blog comments hurts legitimate efforts to illuminate discourse and drive link love to useful sites.

Discussions about nofollow continue. Here SEOmoz talks with Google’s Matt Cutts, who helped develop the tag in 2005.

Resetting CSS style sheets

While I digest what’s left of the turkey and stuffing I ate over the weekend, I want to remind myself (and other Web developers) of something to be grateful for: CSS reset frameworks. These wonderful style sheets override built-in browser preferences to start you off with a fresh palette to textually paint your new Web site. All browser-specified margins, padding, sizes, indents, etc. are gone.

The sheets come in a variety flavors, many inspired by CSS master Eric Meyer. Yahoo provides developers a sheet to link directly to. (You can also steal the source to build your own.)

Your preferences may vary. But to start building pixel-perfect layouts — even in Internet Explorer — these frameworks are a great start. You will be surprised by how many styles are affected, and how you let browsers dictate how your site’s tags look. I use a very basic version of this on NickGehring.com, just setting all margins and padding to 0 with an asterisk.

* {
margin: 0;
padding: 0;
}

Yahoo and other frameworks get much more sophisticated with their approaches. It all depends on your needs.