You could divide your traffic sources into four broad categories:
When planning your information architecture and design, you must figure out how to deal with these special groups.
I have assembled a few recent real-world scenarios to find clarity on the issue.
When you want to hide lengthy content behind an animated scroller, or rotate through products or testimonials in sequence, or present categorized page-level content cleanly, you could use accordions, carousels or any other imaginative solution.
Like many screen readers, Google’s crawler tends to ignore content wrapped in an element set to
display: none, while it does crawl any content set to
So your task as a designer is to plan the space and layout around your dynamic features, and also to prepare for instances when “dynamic” is not an option.
An accordion is a structure that usually consists of a pattern of pairs of heading and content. Blocks of content would expand one at a time, in response to an event triggered in the heading.
I recently helped one client overcome the problem of having very long pages. This client had an online catalog of training courses and stipulated that all of the information for a particular program must be available up front: no page skipping or pop-ups for core course descriptions or program definitions.
All program information had to be available to the visitor on the same page, without having to navigate back and forth in the course catalog.
The right solution here was an accordion, collapsing course descriptions beneath headings for each area of study (math or history, for example). A poor implementation would have been to set the visibility of those collapsed course descriptions before the HTML was rendered on the screen.
If the content was hidden pre-rendering, then some visitors and search engines would miss much of the important content.
Using jQuery, I targeted the content for collapsing and set the accordion to trigger after the page had loaded and the document was ready. For this client, making the content available to all audiences was extremely important. Some of the content could run very long, and so a design that could accommodate extreme vertical expansion was needed.
You’ll see carousels fairly often in portfolios and product spotlights.
Typically in carousels, content will scroll in response to a time-out interval or some user interaction (see “Your Recent History” on Amazon). I like carousels for their flexibility and because they allow you to fix at least one dimension of the container.
Another client recently inquired about the “News and Highlights” area of their home page. Like many other content blocks of this type, this one featured the eight most recent additions to their news pages (though that number could vary).
The teasers in this block contained a summary of the article and an image. The images could be large and the content long, so a carousel that rotated between teasers was the right solution here.
We had alternatives, though. Considering the four categories of users we identified at the beginning of this article, the priority for this content was accessibility, with search engine ranking a close second. We could have satisfied these two groups by leaving all of the teasers visible but fixing the dimensions of the container DIV and setting
Any of these options would have preserved the layout’s dimensions. And screen readers and search engines would have picked up on the content, too, because the content would not be hidden with the
The Content Swapper
This technique is similar to the carousel in that content in a block is rotated using some animation.
Yet another client came to me with the task of showing an indefinite number of testimonials on their website. We opted for a content swapper in this case because we had no need for the pagination typically found in carousels (the user wouldn’t need to scroll back one testimonial or skip to the end).
none would not be detrimental.
The decision afforded me a little more freedom in planning the right-hand column of the website, where the testimonials were to appear.
Take one last client of mine as an example, who had a set of standard procedures that all employees had to follow.
Each procedure consisted of any number of tasks. An administrator could add or remove tasks and could change the order of tasks.
This was a textbook example of sorting, an implementation of drag-and-drop reordering.
The evolution of the web will continue, and visitors to our websites should be able to continue enjoying dynamic flair.
Jason Corns is a freelance web developer and full-time GUI developer for Systems Alliance, Inc., specializing in usability for all audiences.