The goal was a cleaner, simpler site that confirmed Tamara’s credibility in the industry and supported her continuing international growth. Included in this, she wanted a new logotype – something that reflected the firm’s personality. Most of all, she wanted things to be blue. And so, worried that we might be otherwise arrested (again, we know very little about the law), we obliged. We even included a little widget for her team and clients to see where she was at, who might need to get in touch from overseas, so they could be sure to call and not wake anyone up.

So, if you or someone you know is in need of forming an entity, investing in (or getting an investment!), selling, merging, or acquiring something, visit the new and improved tamarathompson.com site, and give Tamara a call!

Seriously, I’d love to eat crow about this, but despite the glimpse of web development utopia this moment may have conjured for many in the industry, (Ooooo delicious WebKit!) I’d be awestruck if Microsoft ever actually saw it through. Culturally, Microsoft just doesn’t seem to have it in them to fully embrace anything open source. Evidently, they are missing the chromosome which would otherwise help them acknowledge their actual challenges instead of attempting to ham handedly market their way out of their problems. Exhibit A, their recent, much ballyhooed, $300 million (not at all ostentatious) marketing campaign which lamely attempted to reposition Microsoft as “cool” as if that was the real problem with Vista and Windows Mobile and the failure of the Zune and so on.

If only the mucky mucks in Redmond, WA could ever admit that the success of the iPod/iPhone/iTunes juggernaut, and the increase in Apple’s computer market share year over year can’t possibly be due only to great marketing.

As it turns out, consumers have to actually be provided a satisfying experience that is then reinforced by skillful marketing. Anything else is simply lipstick on a pig. Chrysler, Ford and GM are currently suffering for essentially the same reason. When you’ve spent over the last 20 years ignoring energy efficiency and continuing to make cars that look and perform like ass in comparison to all of your competitors, it seems more than a bit presumptuous and entitled to then come begging for a bailout from taxpayers! That’s a whole other article/rant however, so for now I’ll wrap up by saying, c’mon Microsoft! Prove humble little ole front end web developin’ me wrong. Adopt WebKit as the rendering engine for IE.

I dare you!

Following the marketing kit, the website has proven to be even more fulfilling. From their dev team to senior officials, EM-Assist has heaped loads of praise upon us. One person said, “good job.” Another said, “thanks.” We would have been happy if the compliments stopped there, but they continued! “You’ve literally given me a reason to live,” said one employee who asked to remain anonymous. Several people sent flowers, and their CEO even proposed (via a Powerpoint presentation) to our Art Director Jodi. She has yet to give him an answer.

But what, specifically, is so great about the site? Let’s ask that question another way. What’s not great about the site? We extended the branding we developed for the parade-worthy marketing kit and applied it to the site. The result is a clean, engaging and focused site capable of turning the casual visitor into a client within seconds – resulting in potentially millions of dollars in revenue. Given that most EM-Assist clients are government organizations, it could actually be billions of dollars.

Expect to hear more about the new EM-Assist site from lonely doormen, passersby and major media outlets around the world. Seriously. It’s gonna be huge.

We hope you were sitting down for that.

What you see may look simple, but this piece of collateral is a sophisticated set of one-sheets, painstakingly handcrafted by Loud Dog using traditional methods—a laborious but ultimately satisfying process.

Using this kit’s intuitively designed hierarchy, potential customers and unsuspecting passersby can quickly reference EM-Assist’s philosophy, services and other information almost as quickly as the Internet would allow!

This kit was only a small portion of the collateral we produced for EM-Assist; as part of their rebranding we refined their logo and updated their corporate colors, designed business cards, letterhead and a new tradeshow booth.

We hoped they’d have need for some EM-Assist branded toiletries, but sadly the topic never came up. (Despite what you may hear, this is completely unrelated to the fact that through a complicated set of circumstances we recently found ourselves stuck with 60 cases of disposable razors.) Oh, what could have been.

Expect to see more from our team-up with EM-Assist when they relaunch their website later this year.

What are they?

Favicons are those little, teensy icons that show up in the address bar of your browser, like ours:

Why use them?

You should use them to give your website that extra bit of spit and polish. It’s also helpful to have something that visually stands out and reminds your visitors just how remarkable your website is when they add it to their bookmarks or favorites.

Designing your favicon.

A favicon is tiny, only 16x16 pixels square, so depending upon the design and complexity of your logo, you may need to recreate, crop, abstract or pixel push your existing artwork to make sure it’s legible.

Remember while you’re designing that your goal is to convey your website’s brand. There are many different paths — I’ve seen organizations use their entire logo, an abstracted part of their logo, or just a design element from the website.

For our website, the Dog mark was the obvious choice, though it needed a little help to fit within 16 pixels and still be legible.

As another example, let’s take a look at the EM-Assist website. We started with their logo:

Their entire logo is far to wide to fit into the 16x16 pixel area and retain any sense of legibility, so we had to come up with a different solution. We explored two basic paths: a two-color “flag” based on their website design, and a modified version of their logotype. The flag was just not very satisfying, but by removing “Assist” and extending the M all the way down, we developed a nice solution. Additionally, we explored different heights (here’s a tall version, zoomed in 1600%):

But ended up going with a more traditional, proportional icon:

Creating your favicon.

As with most things web-related, you need to jump through multiple hoops to make your favicon display correctly on all browsers and platforms, and the first hoop is making the icon itself. Microsoft first developed the idea of a favicon, and naturally used their existing ICO file format, a raster format used for all Windows icons. When the standards community took over the idea, they specified that it should use PNG format, which works across all browsers and platforms. Though most browsers and platforms now support the ICO format, our recommendation is to make both.

There are a variety of ways to make an ICO file, and if you’re familiar with Photoshop or Paint Shop Pro here’s one of the easiest methods.

One. Create your icon as a PNG.

Two. Download and install the free ICO (Windows Icon) Format plug-in for Photoshop.

Three. Open Photoshop and create a new document with the following settings (I’m using a preset named “Favicon” I’ve saved in Photoshop):

Width: 16px
Height: 16px
Resolution: 72dpi
Color Mode: RGB 8bit
Background Contents: Transparent
Color Profile: Adobe RGB (1998) or equivalent
Pixel Aspect Ratio: Square

Four. Import your icon.

Five. Change to indexed color (see the screenshot): Image > Mode > Indexed Color:

Six. Save As… ICO (Windows Icon). Name the file either favicon.ico for a generic site wide favicon, or a custom name, like myawesomeicon.ico if you’d like to have discrete favicons for different sections or pages of your site.

Transparency

It can also be hip to use transparent favicons rather than the plain ole, vanilla, white matte favicons of yore. Here’s how to do it in Photoshop with the ICO plug in:

Follow the steps above
Export your icon using the Gif89a plu-in or Photoshop’s “Save for Web” and make the background color your “knockout”, or transparent color
Save the file as a GIF
Re-open the file in Photoshop and simply “Save As” an ICO and, that’s it. Your favicon is now transparent. Abracapocus!

Installing your favicon.

Now that you have two icons — a PNG version and an ICO version — it’s time to install them on your website.

One. Use whatever FTP client or web wizard you prefer to upload the favicons to the root level of your website, the main directory in which your site’s index page (homepage) resides.

Two. Include the icon in your webpages.

As usual, we need multiple versions to cover IE and other browsers. IE uses the following code:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

This code won’t work on standards-compliant browsers (two words in the rel attribute are a no-no). Instead, use:

<link rel="icon" type="image/png" href="/path/image.png">

or, if you’re only using an ICO file:

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

If your favicon has a custom name, it helps to include the full path to your domain:

<link rel="icon" href="http://www.my-domain.com/myawesomeicon.ico" type="image/x-icon" />

Still More Favicon Info

There are other methods for creating favicons ranging from web based wizards to professional icon development tools like IconBuilder. You may also decide it necessary to create a favicon package which bundles the standard 16x16 icon with 8, 16 and 32 bit versions of itself and/or 8, 16 and 32 bit 32x32pixel versions. The advantage of making these packages with the larger sized icons is that your favicon will render with more detail if your users decide to drag it to their desktop to use as a shortcut. Of course, this increases the file size to upwards of 9.9kb a package which will add a few more seconds of download time for dial-up users and negligible fractions of a second for broadband users.

That’s it! Happy fun-time favicons for everyone!

Don’t be surprised. In an informal study, we recently found that over 70% of business-to-business websites printed poorly because they didn’t have a print style sheet. Though they looked nice on the screen, they looked horrible coming off the printer.

Just like “normal” style sheets define how a website looks on the screen, you can use print style sheets to define how your website looks when it’s printed, and make sure it looks good.

Why isn’t my site printing right?

Generally speaking, without a print style sheet, web pages won’t print correctly:

• No background images. Almost all browsers don’t print background images (most non-content specific images) as the default setting and few users know about the setting or how to change it. (If you’re using Internet Explorer, you can turn adjust this setting in the Advanced Preferences pane, while Firefox users need to use Page Setup.)
• Narrow pages. Printers print at about 650px wide (630px for A4 paper), far narrower than most modern websites. The browser will either compact things to fit (IE7 does this), or print a wide website on multiple pages, giving you a bunch of extra pages with no real content.

How should my site look when it’s printed?

Many people think that their site should look exactly the same printed as it does on the screen. But printed material is different than a website, and people use and read it differently.

Instead, we optimize the page for display on paper, not on a screen:

• Remove interactive elements that don’t make sense in a non-interactive medium. Navigation, calls-to-action, etc., aren’t useful when they can’t be clicked and there’s nowhere to go.
• Remove design elements that aren’t related to content, take up space, don’t look good when printed in black and white, and waste ink and toner.
• Optimize the width of the page for printing (about 650px wide).
• Replace sans-serif fonts (easier to read online) with serif fonts (easier to read on paper).

Problems

Print style sheets aren’t without problems, however.

The main problem is that most users expect to pages to print out exactly as they look within the browser, and when they don’t, it’s confusing. Unfortunately, there’s no real solution to this beyond instructing users how to turn on printed background images, an obscure setting that varies by browser, or educating them as to why to expect printed pages to look different (paper is a fundamentally different medium than the web, and there’s no reason for interactive elements and calls-to-action, beautiful web designs are often lost when printed out in black and white and end up wasting ink and toner).

A secondary problem is that a site’s branding is often lost. We take care of this by being sure to include the logo on the printed page, as well as other branding elements optimized for printing.

Do it!

Given how few marketing websites use a print style sheet, you’d think it would be hard to do. It’s not!

1. After the site is designed and built, create a new style sheet using the same syntax as your normal style sheet. Although this will be the print style sheet, it’s much easier to do this in the browser, so comment out your “real” style sheet and associate it in the same way.
2. At this point, your page will appear completely unstyled. Generally speaking, I only want to print out the logo, the main content (whatever the page is about) and the copyright information at the bottom of the page. I specify every other element and give it a “display: none” attribute. Usually this includes the primary and secondary navigation, subnav, any call-to-action elements, side columns, what not. Of course, this is easy if your page’s code is designed well. If it’s a mess, well, it may not be easy.
3. I usually copy over the styles for my main body content from the web style sheet, and adjust them for print. This enables me to preserve some source formatting. It may be better, however, to just use a standard set of styles for printing. Although sans-serif fonts are easier to read than serif fonts online, for example, it’s the opposite in print. Switch ‘em.
4. Often, there are little issues that need to ironed out after the first pass. Sometimes, you’ll want to float images or tables.
5. If your page gets mysteriously cut off after the first page, you may have floated the main content div. Don’t do this.

Some tips and notes

• I like to include a high-res logo, either the main one, reduced in size, or if that’s a background image, a different one normally not displayed.
• It’s a good idea to include the URL in the footer. Although most browsers will print this by default, not all do.
• Another option is to include a note at the bottom of the page, in the footer, explaining what the story with the different formatting is, and offering a link for more info.
• There are a number of ways you can take your printed web pages to the next level if you have interest and budget. Before engaging in these, I’d recommend conducting research to see how people interact with your site. If you find that many users are printing it out, it may make sense to engage in a more advanced project, paying closer attention to the design of each page. For at least one client, we’ve designed fairly robust printed webpages, including a cover sheet, page footers, specified page breaks and print-specific formatting throughout the document.

Additional reading

As usual, Smashing Magazine has an excellent survey of articles on the subject.

Phase one of the site redesign is basically just a reskinning, adapting the look to reflect a more professional and established image, including a new homepage animation.

BEFORE

AFTER

Take a look at Tora’s new site.

In phase two we will reconsider and redevelop the site architecture and, if all goes well, convince Tora to include this awesome video of a tiger we found on YouTube:

Rawr!

As I was reminded by Frank Rich’s most recent article in the New York Times, a lot can also be divined from the design of the presidential candidate’s websites. Check it out. Open up a modern browser (Firefox, Safari, IE7) and open up a tab each for these links:

McCain, Clinton, Obama.

Kind of shocking isn’t it?

Politics aside, it’s pretty clear that “brand Obama” has got it all over the competition. Interesting no?

Of course there are any number of ways to answer these questions, but for now I’m just going to focus on the first one in the simplest way possible. Pretty pictures!

At the moment, we’re in the midst of a redesign for an existing client. Here is the code that currently renders just the navigation of the homepage:

Click for larger image

Notice how, well… messy it is?

Now here is the code for the redesigned homepage navigation:

Click for larger image

Ahhhh… much better. Every line of markup has semantic meaning and serves it’s purpose cleanly and clearly. Unlike the existing site, we’re using CSS instead of javascript for our navigation rollovers and all of our style or presentation (how things look) is discretely separate from the structure (the layout) and content (text and images/graphics) of the page. Instead of a whole bunch of nested tables, complicated javascript and images, there’s a simple “unordered list” which facilitates the site’s menu. As a result, the page and the site as a whole will:

1. Be far easier to maintain
2. Be more search engine friendly
3. Be accessible via screen readers for disabled users

Perhaps the best part is that the page weight and download time is cut in less than half. Not counting images/graphics, the current page weighs in at a whopping 16k while the redesigned page is only a miserly 4k. Even on a modest sized website these file sizes can add up to significant download times. Lastly, the less a server has to work to serve up code, and the less the client (receiving) machine must work to download code, the less energy is used in both directions, so proper coding also has the benefit of being “green” and sustainable!

So, good coding is better for SEO, and therefore better for your business. It saves you money and it’s good for the environment to boot. It’s just plain crazy not to do it!

HTML templates.

As part of the design process, we identify unique pages and common modules and use this knowledge to design templates that can be extended to create every possible page on a site. Our design and engineering teams then work closely together to produce these templates in standards-compliant HTML and CSS, which we test on our local staging server. Once the templates have undergone thorough cross-browser testing, we deliver them as a package to our client and their team for completion and build-out.

Our deliverables package includes all client-side code required for the templates (HTML, CSS, JavaScript and images) and may also include documentation describing what server-side functionality the design calls for, a copydeck, and Flash animations and widgets if the design calls for them.

Built-out static site.

In many cases, a CMS is not required and is an unnecessary expense. For sites that change infrequently or have many highly-designed pages (most marketing sites), we recommend creating the entire site in static HTML. Although this does increase the cost of changes and reduces some search capabilities, it allows for much greater flexibility for individual page design and may be more cost-effective than a CMS-driven site. Once we’ve built out a static site, we can either deliver it to your engineering team for hosting, or host it on our servers.

Built-out CMS-driven site.

We often provide end-to-end services, including selection of an appropriate CMS and engineering of any server-side applications. We are responsible for the entire process, and provide a single point of contact for your website and online needs.

Advantages and Disadvantages

There are several reasons why a client would want to use an HTML template approach. Our clients get the benefits of our advanced client-side engineering expertise, while using more cost effective internal engineering resources for the build-out or integration. Some clients have an existing CMS platform and engineers experienced with managing it or their website is tightly tied to sensitive internal applications that their team is already responsible for.

The main disadvantage of an HTML template approach is that the client is responsible for approving and accepting our technical deliverables and managing the build out of the site. If they don’t have this expertise available, this can be a daunting task. Additionally, once the site is up and running, most maintenance and small changes will be the responsibility of their in-house team. Although we can assist in some cases, this is rarely cost-effective.

We occasionally are asked to provide design files only, for production by the client team. We recommend against this, as our design and client-side programming processes are tightly (and rightly) integrated, and combine to create better results.

Follow these step by step instructions to achieve some iPhone webclip awesomeness.

Step one: Open your favorite image editor (Photoshop, Fireworks, etc.) and create a 72 dpi document at 200x200px (for a little breathing room).

Step two: Create your background - draw a 158x158px square, give it the color or gradient you’d like and center it in the document.

Step three: Import your company logo, preferably in vector format of some kind (.eps, .png, etc.), scale it to the size you want and place it over your background square.

Step four: Export a 158x158px slice named apple-touch-icon.png and place it at the root directory of your website.

Step five: There is no step five. The iPhone/iTouch software will take care of the rounded corners, drop shadow and “glassy” effect whenever someone decides to add your site to their iPhone home screen. Sweet!

Frustrated that your favorite interwebs destination hasn’t made their own webclip or don’t like the one they have? Here’s how to set up a Touch icon for any site. Fresh!

The style check was quite a trial in and of itself. It usually took several iterations of submissions just to get the code’s style in order. On top of that, a submission could only be made once in six hours, and a failed style check gave no specific errors. Pass or fail. This prevented us from simply guess-and-checking our way over this hurdle and made us really look at our code.

Every student came out of that class with pristine code “handwriting.” To this day, if I see a pile of sloppy code, my fingers land squarely on the tab and arrow keys. It is amazing how much easier consistently and clearly formatted code is on the eyes.

The advantage to clean code style is readability. The structure of nested and correctly tabbed HTML elements is visually apparent. Variable capitalization strategies help segregate variable types on the page. Standard code organization lets you know exactly where the code is that you are looking for.

The specifics of the rules used in a style guide are not as important as consistency. If you follow a style rule everywhere, the rule can be figured out. If you are not consistent with your rule, there is no rule. It is best to come up with a set of in-house rules everyone follows and can get used to. Write them down and them stick to them.

Variable Names

• Variables should be camelcase, with a lowercase first letter — examples: articleDate, userDetails, spoon
• The name should refect the semantics of the element, rather than the style — examples: tinyFont (bad), imageCaption (good)

CSS Rules

• Selectors ( form input { … )
  • One selector per line
  • The opening brace resides on the end of the last selector’s line
  • Use of element tag name with class
    • Only specify the element name if done for semantic reasons. You are effectively saying you want the rule only applied to elements of a certain type. Otherwise you are needlessly restricting the markup.
  • Style link pseudo classes in this order: link, visited, hover, active. Some browsers get mad it you do otherwise.
• Attributes ( … font-size: 12px; …)
  • Each attribute has its own line
  • Each attribute line is indented one level (use a tab not spaces)
  • The closing brace resides on its own new line after all the attributes
  • Attributes should be sorted in a standard order
    • positioning, sizes
    • margins, padding, borders
    • text
    • the rest
  • Use short-hand notation whenever possible
    • margin/padding/border-width: top right bottom left
    • border: style width color
    • font: style size family
    • don’t use short-hand when you only mean to affect one attribute (e.g.: margin: 0 0 5px 0; is bad)
  • Don’t use quotes for filenames
    • eg: background-image: ("/images/dude.jpg"); (bad)
    • It’s unnecessary
    • It makes IE on OSX mad (although I’m not really friends with IE on OSX)

Organization

As CSS files get larger it is important to have a standard high-level structure in place. This guides users where to put new rules and allows them to become accustomed to finding a particular type of rule they are looking for. Here is my proposed structure.

• reset
  • Use a variation (if not exact) of Eric Meyer’s CSS Reset
• site defaults
  • This is where you redefine all the basic tags for your site. You’ll handle the body, links, headers and such here.
• generic styles
  • This is where you create generic utility classes that you can use as a “toolkit” within your site. For example, clearing elements or generic form input styles. In the past, I’ve create table.dataList to use for debugging purposes.
• shell
  • This is where the layout is styled for the shell of the site. The shell is the outer layer of the site that exists on every page. The shell will have the site container, the header and the footer. Frequently, an important job of the shell is to set the width of the website.
• layout
  • Your website will probably break down into several templates. This is where you style the wireframes for those templates layouts. This section usually has a lot to do with columns.
• modulars
  • You may have small portions of your website that are styled the same, but across many pages and in many locations. Here you can make those modular boxes for reuse.
• section/page specific
  • Once you’ve got everything else covered, you’re only left to style elements individually. This may mean stying a box that appears in several pages in a section or a unique element on the site.
• subsections
  • once your sections get large enough, be sure to divide them into logical subsections

Comments

I’ve got two uses for comments. One use helps with organization. The other is to explain an unusual or complicated use of css. Remember, comments start with /* and end with */. You cannot comment out a line to its ending using //.

Obviously, one would use comments to create section dividers. I don’t have a strict rule for format because my dividers tend to grow in size proportionately with the file. When I start a file, I will estimate it’s final size when I create the first comment, but I might update the style as I go along.

Initially, my section dividers look something like this:

/* Header --------------*/

but could grow to as big as

/*####################################
#  Header                            #
#####################################*/

As I get larger dividers (and each section gets more rules), I’ll add sub-dividers. Usually these are in the style of the previously used header. Regardless, I make the dividers nice and long so they stick out farther than attributes. This makes spotting them easy when furiously scrolling. As my dividers grow bigger I begin to use more “bold” filler characters. In this case I moved from dashes to pound signs.

The other comment use is for explanation. If the comment is about a single attribute, put the comment on the end of the attribute’s line. If it is about a rule, put it on the line(s) about the rule. If it is about a section, put it below the section comment with an empty line after it (to show that the comment is not referring to the first rule). If the section comment is big enough, go ahead and put the explanation in there.

Future Topics and Conclusions

In the future I will get into CSS best practices with functional implications.

For now, I hope this helps you (or those programming with you) towards clean CSS code style. As I mentioned before, this is not the right answer, but an answer. It doesn’t matter what you do as long as you do something and stick to it. In fact, being adaptive is a skill. Getting good at good style is better than getting good at a specific good style.

My point there is that you will never convince the whole world to code your way, so you’ll always run into different styles. Being good and picking up and continuing encountered styles will prevent “dual-style.” I can’t decide which is worse: no-style, or dual-style.

Anyway, the worst case scenario is a haphazardly authored file. No one wants to look at that.

So, I was surprised and delighted to read last night that the Internet Explorer team have announced a shift in plans. IE8 will now render in standards mode by default and if legacy code must be accommodated, developers can add meta tags to enable either IE7, or IE6 rendering modes. This is fantastic news because it means that not only will standards compliance and the interoperability and innovation that it allows truly flourish on the web, but it will eventually make my job easier. And I’m all for that!

Happily, you can address this. We recommend four levels of increasing helpfulness and expense.

Create a custom 404 error page.

Nothing is worse than some standard, Apache or IIS-generated error page telling your customer that “this resource object was not found” or some similar technical gobbely-gook.

Create a custom page that looks like it belongs on your site. You can include your navigation, etc., and maybe try some humor.

Include your site map in your custom 404 page.

As long as you’re creating a custom 404 page, you might as well include your site map (you do have a site map, right?)

This way your visitor can try to find what they were looking for. We did this on agitar.com.

Another method that I’ve seen on some sites is to redirect visitors to the homepage. We don’t recommend doing this: it’s confusing to visitors because they aren’t told what’s happened, and it frustrates their attempt to reach a goal.

Create a content mapping table.

A content mapping table maps old content to where it lives in the new site and automatically redirects visitors to the new page.

There are two levels of redirect: global pattern redirect, and specific page redirects.

A global pattern redirect will correct standard changes that are applied to pages sitewide. For example, when we relaunched louddog.com recently, we made three changes to all old articles. First, we made them end with .php instead of .html. Second, they all live in the “bloggity” folder, instead of “entries” or “articles.” Third, we replaced underscores in the URLs with dashes, which is better for search engines. We wrote a few rules that covered all these, and now most old links are redirected to their new pages.

A redesign effort will often make more changes than simple renaming. Entire pages may disappear, be moved into different sections and the entire site structure may change. These changes require specific page redirects that match individual pages to their new location. Sometimes this effort is more difficult than others. If there are massive changes occurring, we recommend identifying the most popular (or most important) pages and limiting your remap to those.

A properly created redirect will be seamless to your visitors, and will also help Google by instructing it to update its index.

Use the sitemap as a backup and log missing URLs.

If a missing URL isn’t included in the table, be sure to still direct visitors to the sitemap to give them another opportunity. At the same, log the missing URL so that you can add to the redirect table.

Give visitors smart options using integrated search.

After you’ve done everything else in this guide, a few broken links will probably remain (unless your site is quite small). By offering search results on your 404 error page, you can cover missed links and make your error page future-proof.

If a visitor is trying to reach a missing page, parse the URL and perform a search based on that. For example, if someone is linking to “http://www.louddog.com/entries/search-engine-optimization”, we could parse out “search engine optimization” and return those results to the 404 error page.

Integrated search is more appropriate for websites with thousands of pages, and less so for a smaller site with a couple hundred pages, for which a mapping table should be sufficient.