Web Design | Stephan Spencer

Web Design Archives - Stephan Spencer

Macaroni and Spam

By | Content, Search Engines, Usability, Web Design | 2 Comments

With two natural listings in the top 10 on the Google SERPs for “dating” it’s hard to argue with Match.com’s SEO tactics. It works well for them – a flashy front page with a novel of text below the fold. Since this has worked so well for Match.com and has been talked about on several popular blogs it seems that others are following suit and using this same format.

I came across Patagonia.com recently and low and behold I found a near replica of Match.com’s tactic – An image and a simple selection form. Scroll down a little, however, and we find keyword-stuffed gibberish text and lots of it. This is disturbing because it feels lazy. Is this the future marriage of usability and SEO? It works, it is easy to duplicate and one doesn’t even need to write good content to get decent results. The only thing this tactic requires is a bare-bones layout built on a foundation of spam.

keyword stuffing screenshot

My instinct tells me that this tactic will fall out of favor with Google in the near future as the spiders advance and learn how to detect it. Until then, however, I expect this trend to continue to grow as more and more snake-oil SEO’s fall in line with what Match.com has made popular.

Web 2.0 Isn’t Friendly to the Search Engines

By | Usability, Web Design | No Comments

Two of the most popular Web 2.0 interactive elements, Asynchronous JavaScript and XML (AJAX) and Flash, might be great for customers and a fresh experience on many sites, but they are inherently unfriendly to the major search engine spiders. In my article on Search Engine Land entitled, “The Search Engine Unfriendliness Of Web 2.0” I cover AJAX and Flash in detail, to show you how to prevent these new technologies from harming your ability to get the most out of Web 2.0.

Here are a few quotes from the article that might help those of you who employ AJAX and Flash into your blogs or websites. This next quote covers a great tip about Flash:

Google isn’t likely to make big improvements on how it crawls, indexes and ranks Flash files anytime soon. So, it’s in your hands to either replace those Flash elements with a more accessible alternative like CSS/DHTML or to employ a Web design approach known as “progressive enhancement,” whereby designs are layered in a concatenated manner to provide an alternative experience for non-Flash users. This way, all users, including search engine spiders, will be able to access your content and functionality.

In this quote, I talk about progressive enhancement’s alternative to work with AJAX:

Here, progressive enhancement renders a non-JavaScript version of the AJAX application for spiders and JavaScript-incapable browsers. A low-tech alternative to progressive enhancement is to place an HTML version of your AJAX application within noscript tags (see TheCleanerMovie.com for an example).

For more tips about how you can incorporate progressive enhancement, feel free to visit my article.

Web Developer Extension Works for SEO

By | Web Design | No Comments

By using a few toolbars, widgets, or other add-ons, you can enhance your understanding of a website’s SEO health. The Web Developer Extension from Chris Pederick is a great tool that can help Web developers, designers, and SEO enthusiasts.

In my article entitled, “A don’t-leave-home-without SEO tool,” I talk about some of the ways this tool can enhance your understanding of a site’s SEO health, and how useful it is beyond SEO. At a quick glance, the tool allows you to check your JavaScript, view Alt text, meta descriptions, and link information, linearize the page to re-order content in the order the search engines read it, and much, much more! From screen captures to an in-depth explanation, I hope you’ll try out this useful tool.

Printer-Friendly vs. Search Engine-Friendly

By | Usability, Web Design | One Comment

We’ve all experienced frustration trying to print out an important web page or form. Some web designers have felt our pain, creating duplicate pages that are “print-friendly.” Unfortunately, these duplicates aren’t great for SEO, as the search engines get confused trying to determine which version of your content to serve up to searchers in their results. There are other negative effects as well, depending upon the size of your site and how you’ve structured it. For example, in my article at CNET I highlight this scenario:

For example, let’s say that you have a Web site that has 1,000 pages, a small to moderate-size site, depending on your perspective. Now, because you’ve taken advantage of your CMS’ ability to automatically create a “print this” link on each page to a printer-friendly version, for all practical purposes, your site just doubled to 2,000 pages. But what if your PageRank isn’t high enough to warrant very rapid spidering? It could take a lot longer for all your pages to get indexed.

For more about this unique situation, and solutions on how to avoid potential duplicate content issues, read my blog post on CNet: Searchlight.

Get Closer to the Search Engine Spiders

By | Web Analytics, Web Design | No Comments

One of the things I covered in my CNet: Searchlight blog, was the tools for how website owners, webmasters/mistresses, and other professionals can get a little closer to the search engine spiders.

Along with providing more detailed information and answering more and more questions publicly, the greatest advancement they (the Search Engines) have made has been in creating tools to actually give site owners (who have validated their sites) more information about their sites than they’ve ever experienced before.

Whether you use Google Webmaster Central or Yahoo!’s Site Explorer, this article goes into the pros and cons of each tool and how it relates to SEO.

How Funny 404 Error Pages Work for You

By | Content, Web Design | No Comments

I’m sure we’ve all experienced coming across a “404 error page” while surfing on the web. Have you run into one that was pretty unusual? Take a peek at the Homestar 404 Error Page for example, from a website that features a character called “Homestar Runner.”

In this article, which you can read on my CNet: Searchlight blog, I talk about how creative 404 error pages can be a good thing for your site, and good potentially go viral. Not only do they show that you have a sense of humor, but they help your customers and visitors get a chuckle, and click away from your site with a smile on their face.

Good Progressive Enhancement is Great for SEO

By | Usability, Web Design | No Comments

Progressive enhancement, a “sister” to graceful degradation, is often talked about in web design circles right along with other technical topics like JavaScript, Flash, Ajax, and basic applications of CSS. While it may not be easy to understand what these technical functions are, not using them results in poor visibility. Blank pages, that both search engines and visitors come across on your site, often create poor experiences. In my post on CNet I wrote:

Graceful degradation was a step to overcome this, where sites were designed for the latest browsers and technology, but were also made to degrade gracefully, hopefully delivering most of the content to the visitor, or at least informing the visitor that he or she may not be “getting” everything.

For more about progressive enhancement, graceful degradation, and how they related to SEO, visit my CNET: Searchlight blog for more on this topic.

What to do about copyright infringement of your website?

By | Content, Legal, Web Design | 2 Comments

They say that “Imitation is the sincerest form of flattery.” But not if you’re a site owner! I’ve seen designs copied, content copied, even entire sites copied. It’s so easy for someone to “view source” and take whatever they like, without regard to copyright.

You can locate copyright infringers pretty easily with Copyscape if they’ve lifted some of your page copy. It’s much more difficult if they’ve limited their sticky fingers to just your design.

So far I’ve discovered by tip-off or by chance that our Netconcepts.com site design has been “pinched” at least 3 times. One of them was a fairly big company. More than a year and they finally stopped using our design, but the evidence of their misbehavior is permanently archived in the Wayback Machine (hint: pick a date in 2004 and compare with my company’s site). In fact, the Wayback Machine is quite useful in that it can serve as indisputable proof of who is the source and who is the copy: whichever site shows the design in use before the other is the source.

The way I see it, you have five options for dealing with an infringer:

  • Do nothing,
  • file a DMCA infringement notification with Google, to get them yanked out of Google,
  • contact the infringing company’s CEO,
  • “out” them on your blog :-)
  • have your lawyer send them a nastygram.

I have to admit that we’ve often done nothing, just because we’re so busy. Eventually they’ll redesign (maybe pinching another design from somewhere else?). Of course that’s not a great option if you’re serious about protecting your IP (intellectual property) rights.

With our most recent infringer, we’ve taken a more active role. We spoke to their CEO. He asked for 2 months to redesign, which we’ve granted them.

So, what would you do? What’s the most legally correct response? The most pragmatic response?

Taking full advantage of CSS

By | Search Engines, Usability, Web Design | One Comment

CSS (Cascading Style Sheets) offers many more benefits beyond that of streamlined web pages with table-less layouts and precise positioning (no more transparent 1-pixel spacer GIFs!), mentioned in my previous post. Indeed, that’s just scratching the surface of CSS.

Here are some more clever things you can do with CSS to get your website really humming:

  • Reorder your content to sit above your top and left navigation in the HTML. That will boost the keyword prominence on your pages, which is good for SEO. Then use CSS to get the page to still display as you want. CSS Zen Garden is a great example of this in action… for example, notice how the HTML doesn’t change between this layout with left-side nav and this one with right-side nav; it’s only the CSS that’s changing.
  • If you must use graphical navigation or headings instead of text-based, then use the CSS “image replacement” technique to substitute in a text link or heading tag, respectively, when the CSS is not loaded (as is the case when the search engine spiders come to visit). For example, northland.edu uses this technique well. Currently, this is much more effective for SEO than ALT tags. Note though that in time, search engines will look at CSS files and disregard text that is off-screen.
  • Learn to code in “CSS shorthand.” With shorthand, hex codes for colors, margins, box dimensions and borders can all be abbreviated, for instance. More about this here. The efficiency of CSS shorthand translates into not only a speedier download for your customers, but also compact and tidy code that’s easier to maintain.
  • Make code that “degrades gracefully.” Creating a separate “low-bandwidth version” or “printer friendly version” or “mobile version” of your site will sound ludicrous in years to come (heck, I think it sounds ludicrous NOW!), because CSS makes such a thing unnecessary. Check out how gracefully gotomedia.com degrades on a cell phone or PDA, for instance.
  • Correct for browser incompatibility snafus with browser-specific CSS. Does something look awry in your page layout when loading your site with the Safari browser, for instance? Internet Explorer doesn’t always play nice with the other browsers. Until the days where all the browsers follow all the same standards to the letter, browser-specific stylesheets are a useful crutch.
  • Separate the presentation layer from the content layer as much as possible and move it into an external stylesheet (in other words, a separate .CSS file). That way it gets cached by the web browser and doesn’t have to reload with each new page.
  • Plan for site-wide changes. Things change — colors, sidebars, ads, copyright dates, etc. Utilize CSS files and/or server-side includes to make future site-wide updates as painless as possible.
  • Make use of the cascading nature of CSS. Most of the styles you define will be used site-wide. Some will only be for one particular page. Then there will be occasions where you’ll want to “cascade” styles, and have certain sections of your site adopt a particular look/layout/theme that overrides or branches off from the site-wide styles. Clever use of cascading styles can lead to very efficient and elegant code.

    Warning! Geek speek ahead:

  • Just be careful of overriding previously declared statements. And also be aware that specificity is important in the cascade. Declare all your tag styles first then declare your id and class selectors down the doc. That way the cascade works and can be overwritten with new selectors. (Thanks to our CSS guru Darren for this last bit of advice.)

CSS coders: the Web Developer Firefox extension is an awesome tool for coding, debugging, and tweaking style sheets. You can display the stylesheet and the rendered page simultaneously side-by-side and then interactively edit the CSS, immediately viewing the effect of the change on the rendered page. And it makes identifying errors (be they validation, CSS, or JavaScript) a piece-of-cake. Did I mention the plugin is free? :-)