Browsing articles tagged with " usability"

Using JavaScript to Hide Content: Advanced White Hat SEO?

Oct 18, 2011   //   by Darren Slatten   //   Contests, Copywriting, Google, SEO  //  28 Comments

If you provide some kind of SEO-related services, there will come a time when your client or boss looks you in the eye and says something like this:

“Yeah, so about those page edits you recommended…

We’re actually quite happy with the current design of our landing page, and our tests have shown that adding text to the page actually decreases conversions. So…um…is there any way you could optimize this page…like…without adding all those words to it?”

To most SEO’s, the idea of achieving top rankings in a competitive niche–without putting keyword-rich content on the page–is unrealistic if not downright ridiculous. But from a design perspective, we also have to acknowledge that text and keywords are not always what’s best for Users. Sometimes, the best User experience comes from a simple, minimalistic interface with no distractions.

The Google home page itself is a perfect example. Arguably one of the most valued resources on the Web, and certainly one of the most visited, currently displays a total of 25 words.

+You Web Images Videos Maps News Gmail More Sign in Google Search I'm Feeling Lucky Privacy Change background image About Google Advertising Programs Business Solutions

But what if Google was your client, and they wanted you to optimize their home page to rank for keyword phrases related to search engine

Would you recommend something like this instead?

Google home page with Wikipedia-style text

Hmm…no, that’s not going to work. So it’s kind of a Catch-22, isn’t it? On the one hand, you’re trying to satisfy your client and their Users by providing a slick, clutter-free interface…and on the other hand, you’re trying to be mindful of Google’s relentless addiction to plain text content. So what do you do?

Well, if you don’t know how to code basic JavaScript (or you’ve seen how bad Google sucks at reading JavaScript and thus avoid it entirely), then you probably pick content over User interface, pollute the page with stacks of keyword-dense garbage, and hope that the potential increase in search traffic eventually makes up for the immediate loss of conversions.

But what if you didn’t have to choose? What if you could fill your landing pages with SEO-friendly content…without it getting in the way of your Users?

Luckily, there’s a solution. It’s called hidden content.

* GASP! *

That’s right, folks…if you’re trying to improve your website’s User experience without hurting your search engine rankings, then you need to start hiding some content–ASAP. But you can’t just hide it anywhere–you need to hide it somewhere where search engines will see it for sure…but Users won’t.

Wait... isn't that SPAM?

That depends on a number of variables, but the short answer is:

No, it’s not spam. It’s not even gray hat SEO. Hiding content is perfectly acceptable, as long as you do it right.

Which brings us to the million-dollar question…

What is the right way to hide content?

Unfortunately, Google isn’t likely to provide a useful answer anytime soon. So you know what? I’m going to take a crack at it. Seriously. I’m going to make a genuine effort to lay down some technical guidelines for all the aspiring content-hiders out there, and I’m going to do so without pretending like “your intent” has anything to do with it.

So here we go. First I’m going to suggest the guidelines; then I’m going to provide a working example that incorporates all of these best practices.

Basic Implementation Techniques for Content Hiding

  • User Friendly – Hidden content implementations should improve the User experience and must not impair the User experience.
  • Dynamic – Hidden content elements must have a visible state–a set of conditions under which the hidden content is visible and readable by Users. The visible state must be capable of being activated by a browser event. The event should be automatic (e.g., document.onload) or it should be triggered by Users’ actions (e.g., element.onclick). In the case of Users’ actions, the trigger element should be conspicuous and intuitive.
  • Accessibility – Hidden content should not be implemented in such a way that it causes the content to be inaccessible to Users with disabilities or Users who rely on screen readers or similar devices.
  • Progressive Enhancement – Hidden content must default to a visible state when rendered in a browser that either doesn’t support JavaScript or doesn’t have JavaScript enabled. A document in which all hidden content elements are in the default visible state should provide a User interface that is functional, cohesive, and reasonably intuitive.

A Perfect Example of Hidden Content

If you don’t really understand the BITCH, don’t worry–I have an example for you. And this isn’t just any ol’ example; this is my attempt at creating a perfect example.

Let’s say you have a news blog with the 10 most recent stories showing on the home page. For whatever reason, you decide that the home page should include the full text of each post. The problem is…your Users are overwhelmed by all that text, and all they really want is an easy way to scan the latest headlines before they choose a story to read. The solution…hide some content!

This example has two versions: the original plain text version and the modified “hidden content” version. As you can see, the User experience is much better in the modified version, simply because it’s easier to navigate (especially on a mobile device that requires swipe scrolling). But the real magic is in the code, so take a few minutes to view the HTML and JavaScript source. Before you go check it out, I’ll leave you with some questions/concepts to think about:

  • Compare the HTML source between the two versions. What differences do you see?
  • What happens to the Hidden Content version when JavaScript is disabled?
  • What is the likelihood of Google flagging the Hidden Content page as suspicious or deceptive?

Plain Text Content

Plain text content example

Hidden Content

Hidden content example


Download the Hidden Content Example

The live examples linked to above are hosted on GitHub. This means you can easily download the source code files for your own personal or commercial use (files are released under a non-restrictive free software license). And for the truly advanced SEO’s out there: you can even fork it or suggest improvements via pull requests.

Download the Hidden Content example source code files!

Darren Slatten

Darren Slatten is one smart mofo. Some say he's the World's Greatest SEO. When Darren isn't studying SEO or web programming, he's usually busy developing online marketing strategies and web hosting solutions for local small businesses. Darren also likes to use keyword-rich anchor text in his guest blog bio links, but only when it makes local SEO for small business sense to do so.

More Posts - Website

How I Doubled a Site’s Speed in Under 10 Minutes

Aug 16, 2011   //   by Ty Banfield   //   internet marketing, SEO Blog  //  9 Comments

Slow Turtle

Recently, a friend asked me to take a quick look at his site. My friend wanted to know if there was any way he could speed up his site.

Before logging into his WordPress Dashboard to browse around, I used to look up what company is hosting his site. Although I discovered it’s a hosting company with a reputation for being slow, I knew he didn’t want to deal with moving to a new host.

I used WebSitePulse to run an initial speed test. After verifying his site’s response time was on the slower end of the spectrum, I logged into his WP Dashboard.

I decided to see how many plugins he was running. I was shocked to discover he had over 40 active plugins!

At first, I couldn’t even imagine how he had taken the time to install and activate this many plugins. However, a quick email to him revealed that his website had been built by a “professional WP development company.”

In reality, this company justified jacking up its price by doing a mass installation and activation of a bunch of unnecessary plugins.

Since I was helping my friend as a quick favor, it didn’t make sense for me to manually review each and every plugin. Instead, I decided to go for the low hanging fruit.

How to Use Firebug to Identify Slow WordPress Plugins

To identify the main culprits, I fired up Firebug in Firefox. I proceeded to:

  • Click the Net tab
  • Load his website
  • Because no data showed up, I reloaded his website

Reloading the website gave me a visual breakdown of how long each element of his site took to load.

As I expected, there were several elements that took a significant amount of time to load. Specifically, I was able to match each of the three slowest elements to a plugin.

After deactivating those plugins, I ran a second speed test. The result? My friend’s site loaded twice as fast.

If you’re wondering which plugins were responsible, they were:

  • Zemanta
  • ShareThis
  • Sphere

If you think one or more plugins are bogging down your site, you can use this method to test and resolve your issue in less than ten minutes.

Ty Banfield

Ty Banfield is a freelance writer. Over the past five years, he's written on almost every topic under the sun. While variety is the spice of writing life, marketing and fitness are the two topics he never grows tired of exploring. He also provides business website development, marketing and conversion consulting that helps businesses attract more customers.

More Posts - Website

11 Guidelines for Improved Website Usability

Jul 29, 2010   //   by Patsy Rivera   //   blogging, SEO Blog  //  10 Comments

What good is a website if visitors have trouble using it? An unusable website can kill your online presence and cost you customers. Here are 11 tips for improving the usability of your site.

  1. Use easy-to-understand navigation—I have a simple rule when it comes to web design: Don’t make site visitors think. Your navigation should clearly describe the pages so visitors can find what they’re looking for easily.
  2. Place navigation along the top or left— Web users are creatures of habit. They’ve come to expect to use the internet in a certain way. One of the things they’ve come to expect is that your site navigation will be placed either along the top of the page or down the left-hand side. Don’t change this up, as you’ll confuse them and cause them to abandon your site.
  3. Have a benefit-driven headline on each page—The headline is usually the first thing a new visitor sees when landing on your website. Each page needs to have a benefit-driven headline that hooks the reader and forces him to keep reading. It needs to let the reader know what’s in it for him, and it should also encapsulate the main message of the page.
  4. Ditch the huge banners—There’s a new trend in web design where websites have these huge banners along the top of the page. The banner takes up almost all of the space above the fold, making visitors scroll to get to the content. Banners are fine, but make sure they’re sized appropriately.
  5. Put the most important information above the fold—Web users spend about 80% of their time looking at information above the fold of the page…information they don’t have to scroll down to see. This means it’s important that you feature your most important information above the fold of your website so you can be sure your visitors see it.
  6. Get rid of the distractions—There’s something to be said for, “less is more.” Having too much on a page can overwhelm visitors, making it difficult for their eyes to focus on your main message. Take a step back and look at your website. Is there anything that can be eliminated?
  7. Limit or eliminate the use of Flash—Not only is Flash bad for SEO, but it also slows loading time and creates viewing issues for some users. If you insist on using Flash, do so sparingly. Don’t build your entire site in Flash.
  8. Optimize your website for the right keywords—Traffic isn’t your goal. Quality traffic is your goal. And to attract quality traffic, you have to make sure you’re targeting the right keywords that bring in buyers. Never guess what you think the right search phrases are. Do your research by using a good keyword suggestion tool.
  9. Use images that enhance the message—Another trend in web design is to use stock photos. We’ve all seen them: the smiling family, the businessmen shaking hands, etc. The problem with stock photos is they rarely enhance the message, and they mostly just take up space. Images should add to your message. They should be more than placeholders.
  10. Make sure your website loads quickly—Loading speed is important because web users are more impatient than ever before. If your site isn’t accessible as soon as they click your link, they’ll back out immediately.
  11. Format content so it’s easy to scan—Online users don’t actually read content word-for-word. Instead, they scan over it quickly, looking to get the gist of the page. To make your content easier to scan, you should format it with short paragraphs, subheads, bullet points, and bolded phrases throughout.

Does your website meet all 11 points on this list?

Patsy Rivera

Patsy works for, a Kuwait web design company that provides web design solutions in Qatar, Sharjah and Middle East.

More Posts