Blog

4 Design Tips for Content Heavy Pages

seo-clean-design

Recently, as I was reviewing a new site launch and redesign, I found myself nodding in agreement with each new, cool design feature that I saw. However, as I kept scrolling, I came across something in the site design that brought all of my excitement to an abrupt halt. What could possibly have been so visually repulsive, you ask? The Great Wall of Text. I'm not talking about a mere line or two of copy, but large paragraphs that disrupted the easy flow of the site's minimalistic design. The user and I were left with tons of content that would surely never be read.

However, as a marketer experienced in search engine optimization, I know that this text is a painful necessity in many instances. Without a decent amount of keyword-rich text (let’s say about 600-700 words) on a given page, it is not likely that the page will have much hope of ranking organically in search engines. However, there are always ways to achieve both your desire for a well-ranking, content heavy page, with your desire for a beautifully clear web site that will provide a seamless user experience. One of the best ways to manage a good balance is to include your text within your web page, but keep it out of sight unless pursued by the user. This way, your content will be present and able to be crawled by search engines, but can be kept out of sight for the majority of the time.

There are several site features that, when implemented, can help accomplish this goal. The following 4 site functions are especially helpful in meeting both of these desires. By applying any of the following elements, you can help craft web pages that are visually pleasing to your user, and SEO friendly for your brand.

1. Rollover States

Rollovers are a great way to couple eye-catching visual content with informative text. Rollover / hover states come in a variety of options and can allow you to include a small chunk of text that will display when your curser rolls over a particular image. When applied, images are usually turned translucent and text is layered on top. Emporium Pies uses this technique to provide details and calls to action for each of the products featured on their website. When you hover over an image of one of their pies, you will see new information including the name, ingredients, and an option to continue on to even more details about that individual pie. The company uses this opportunity to draw the potential customer in with an image of their product, and then continue them on to a new page with more engaging content such as how the pie is prepared, the ingredients, and even a suggestion of what beverage it would pair best with. The website provides a lot of information and content, and makes it user friendly by only having that information available when the user chooses to pursue it.

EMPORIUM-PIES-hover-states

While EmporiumPies.com uses this technique for product images, this method can also be helpful for social links, tags, and calls to action; it can easily be used to include a small paragraph of keyword-rich copy. In both scenarios, each image can provide an opportunity to include keyword rich text to help your page rank.

2. Revolving Carousels

Implementing a rotating carousel or image slider can open up a huge amount of real estate on your web page. An image carousel enables an area of your web page to be replaced with a sequence of alternate "slides" and messaging. The amount of copy that you can include with this site feature is only restricted by the number of slides that you choose to include.

EVOLUTION-CAPITAL-homepage

The carousel on the homepage of Evolution Capital Partners, a business investment company, accommodates small paragraphs of text that are displayed on each slide. They remain out of sight, until the user clicks and scrolls through each section of the carousel. This gives the company the chance to include four times the amount of content on their page without it overwhelming or distracting the visitor. Four for the space of one? Not a bad option.

3. Navigational Tabs

Another method for including additional copy on a cleanly designed page is to hide text within a navigational tab. Blue Fountain Media’s website, for example, includes case study pages that incorporate tabbed content that is only visible when that tab is selected.

BFM-Case-Studies
This allows us to showcase visual elements, like screenshots and comparisons of our work, but also leaves room for us to include some keyword rich text that relates to the services we provide. Rather than featuring all of our work on one page, we now have the option to space it evenly throughout a number of different tabs.

4. Click to Expand

Similar to navigational tabs, the click to expand function keeps content hidden until a user clicks a "more" or "details" call to action. Click to expand is a particularly useful feature because it allows marketers to keep content hidden, while drawing visitors in to read the remaining copy. This function allows you to tease readers with a small, initial snippet of information that alludes to the overall subject of the entire piece of copy. Combining an intriguing preview with a strong call to action can lead to a greater chance of your content being read. You can include all of the information you want, and give the reader the choice of whether or not they want to pursue it.

DUJOUR-homepage
Dujour's teaser text with button to expand.

Dujour.com, the monthly online magazine, incorporates the click to expand function well. The front page presents a number of individual stories, only showing a short little blurb to indicate the content of each one. Upon clicking the "read more" call to action, each full story fully opens up, expands its display, and allows you to read and scroll through several paragraphs. This compact design allows for a number of different articles to be presented to the readers at any given time, without taking up too much real estate on the web page. Dujour is able to display a decent amount of their content, while not taking away from the user experience.

DUJOUR-expanded-page
Dujour with expanded content.

Its important to be careful when implementing techniques that consolidate content and text on your website. While cloaking and any other shady SEO techniques will obviously lead to Google penalties, these tactics are safe and legitimate ways to include text in a more subtle manner. Do you have other methods for including large bodies of text in a discreet manner? Let us know in the comments below or tweet @BFMweb.

The Write Way to Do Business Online Whitepaper

Subscribe to
Our Newsletter

Comments

  1. David said:

    Navigational tabs – one of the most important aspects of a content heavy sites. A well-placed search form can also be of great help.

Leave a Comment on this post

*
*