Designing for Feature-Rich Websites: Best Practices

For all websites, organizing content can be an issue. With poorly planned content placement, the visitor may not know where to look, or when. Disorganization can also look sloppy, and make a visitor leave quickly. For content heavy and feature-rich websites, this can be an even bigger issue.

This is true whether a website has a lot of content on it out of necessity, or whether there are plenty of additional features that can benefit the visitor or website, such as twitter feeds, RSS content, featured posts, and more, such as on a blog.

In this article, we’ll look into some techniques on how to keep designs simple and organized while dealing with a lot of additional features and content. By planning ahead, a web design can become much more user-friendly, and therefore accomplish the goals of the website much better, whether that means to increase subscribers, get more signups, or get more customers to an offline location.

What Needs to Stand Out?

Before one can begin designing intelligently for a content-heavy site, one must know what content and features should stand out above all others. In which order should the user notice content? What pieces reflect the main purpose of the website? The answers to these questions can differ greatly for each type of site, of course. The website for a pizza place may want to have the “Order Now” button a top priority, while the current specials are noticed directly afterward. In contrast, the company history, staff, terms of service, or otherwise, probably aren’t a main concern to most visitors upon entering the website, although the content is available if need. A blog, in contrast, would want the newest content noticed first, as well as any specified featured posts. Other social media or strong branding presences would then be second.

While the above two examples are rather obvious, some website planning can be a bit more difficult. To keep things simple, break the process into steps:

1. First, determine what content needs to be present at all. Plan separately for the homepage, internal pages, and any special pages.
2. Cut pieces out; alter; revise. Does everything included above need to be featured? Content-heavy websites can have a lot on each page, but make there there’s no truly unnecessary content. Make sure each feature has a definitive purpose.
3. Organize each piece of content in a list based on hierarchy. No need to determine where in a layout each will go, or how it will stand out — just put each feature in an ordered list, from what should grab the most attention, to the least noticeable.

After organizing content in this way, as simply as possible, it can be much easier to think about how to organize this content from a design perspective. In the next section, we’ll talk about taking this organized list and implementing it into a design that look neat, balanced, and well-constructed.

Getting the Content from the Client

This is almost a side note, but if dealing with a feature-rich web design for a client, this tip is necessary. It is absolutely essential to get the content before the wireframing and design process with any content heavy design. Much of the time when working with clients, content may be asked for up front, but there are still many content changes later on. For limited space in a design, a simple typo may be fixed easily, but it would most certainly be a lot more difficult if the content change was longer or shorter than previously planned if the design adhered that content to a particular space.

In order to get clients to dedicate a final copy of all content for the site right away, first explain why it is important to have it right away to the client, and explain why it affects the design. Then, place within a contract any additional fees and concerns for not only the added time it takes to make the content changes, but also the added time it takes to revise the design accordingly to fit any content changes. Most of the time, just a simple agreement and explanation are enough for a client to take the time to plan for final content right away.

Fitting it All In & Keeping it Organized

You have the finalized content, and you have been brainstorming and organizing the needed visual order of the content accordingly. Now the only problem is that you have to implement it into a web design. Wireframing is important for any design process, but this phase for a feature-rich website should take longer, and require more planning.

Hierarchy in Type and Layout

Many feature rich websites primarily organize content by keeping things simple, and using the power of visual hierarchy to lead the user’s eye where it is needed. There are many things that can influence hierarchy, including visual weight, but many content heavy websites with additional features choose to go the simple route: creating hierarchy with effective typography and the placement of content within the layout.

Larger sections are organized among smaller ones, and sections closer to the top left are given more attention than those towards the bottom right. Following the F Pattern for placement of visual hierarchy is always a good thing to keep in mind. Furthermore, or define content sections and organize those section in terms of importance, typography can be used. Larger font sizes, more unique fonts, text color, and more can all influence the visual importance of a feature on a website.

Just check out the AIGA/NY website blow:

There is a lot of content on each page of this website, but it is still easily navigable because of the intelligent use of how content is organized and how type is designed within the page. For content heavy websites, even if not a minimalistic design like this example, always consider hierarchy and typography the two leading influencing factors in creating organization.

Grid-like Design

Using and adhering content to a grid is also a great technique for keeping a large amount of content organized. Not only can it help to organize better hierarchy like mentioned above, but it can also help to keep areas of content separated, both physically and visually.

Either use a grid framework, or at least set rulers when designing a content-heavy page. Organize where the information will go, and then keep marginal and padding rules consistent across the grid, no exceptions.

Page and Directory Structure

For content heavy websites, always create a detailed sitemap first. Within the sitemap, determine how pages will be connected or how they will need to interact with each other. Also determine which content should go on a single page, and which content should be separated.

Directory structure can go hand in hand with page structure as well. If using a blogging platform or other CMS to organize content, directory structure may not be your biggest issue as it will all be automated. But if setting up a custom website structure, planning for the directory structure is just as much a part of the design phase than anything else. Consider this when designing, or work with the developer of said website to come up with a reasonable directory and page structure plan that you, the designer, can effectively design around.

Techniques

While planning for a feature-rich website is essential, as is designing for good organization, there are also plenty of techniques that are used across the web that allow web designers and developers to fit in more content, without distracting from the design. Below are just a few of these techniques for inspiration, although new methods and ideas are arising all the time as well.

Only Show on Hover or Click

There are a lot more websites doing this these days: only showing content or features on click or on hover. One example are both the Twitter and Facebook feed update forms. Both just show a simple input field, and when clicked and activated, the “Send” buttons and other options then pop up.

The applications for this technique can get creative, and above is just one example. Below are  a few tutorials for more inspirational uses, plus an introduction to how this technique can be implemented, either exactly like the tutorials, or for another use.

In the above tutorial, the content featured within the panel is a login form. However, all types of sliding content can be added to a content heavy site, and only viewed when the visitor needs it. Detailed navigation or an about blurb are more examples.

This is another example with a login, but it also includes a quick registration process and additional content for a better example of how versatile this technique can be.

Tabbed Content

Tabbed content is another easy way to show or hide content upon the visitors request. This is usually used in side widgets and contains related content among the tabs for better navigation. However, some entire websites are tabbed, or tabs are used to create a “flow of information” from left to right tab. Tabs are a great way to separate content into steps or sections for the visitor to easily navigate.

Of course, tabs can be used for different reasons like to highlight content, and in different orientations and layout, like with the example and tutorial below.

There are a lot of creative ways tabs can be used, so don’t limit their used to what’s most common, or what’s most “reasonable.” Tabs are a great interface technique that serves a very practical purpose of cleaning up a feature-rich website, while still maintaining all the needed or wanted information on the webpage or website.

Showcase Sliders

A most wanted feature in content heavy websites is showcasing featured, recent, popular, or grouped content. It’s a great way to get visitors searching throughout the content on the site, and a great way to get them involved. Having more than the essential content on a single webpage, though, can also be a recipe for design-disaster.

Enter the age of featured content sliders. Much like tabs, a lot of content can be fit into a single area, and visitors can pick and choose as wanted. Sliders can offer more interactivity however, including animation that grabs attention, and automatic scrolling.

Sliders or featured content pickers can have content like above, great for something like blog posts, or be used more for imagery like in a portfolio.

Like with many of the other methods, the example above takes a not-so-common approach to layout. Just because we may be re-using some of the most common techniques across the web, doesn’t mean we need to stick to the same design principles for them.

Drop Down Menus and Content

Of course, drop down menus are nothing new to the web, but now were are finding a lot more drop down content, or detailed navigation menus. The White House navigation bar is simple at first glance, but covers nearly all the content of the site in an organized way via drop downs.

Creating detailed dropdowns is really just a matter of using proper and intelligent markup, and styling where necessary. Below is a great tutorial for a Mega Drop Down:

Of course, event content and imagery can be used in dropdowns as well, making them even more useful:

Removable & Collapsible Boxes

Areas of content that do not need to stay, such as alerts or new feature suggestions can be exited out up on the visitors request. Model boxes, alerts, or just content areas that can be closed or minimized are great examples of this.

Allowing the visitor to show, hide, or completely exit out of content is very user-friendly too. The user doesn’t want to try the new beta version of the website now? Then exit out. Are they uninterested in certain content? Then get rid of it. By allowing visitors to remove certain sections of content that are not essential to the site, it can allow them to more easily focus on the things they are interested in, likely leading to more action and interactivity.

Showcase

Content heavy websites are everywhere, some limited to only basic content, while others feature various elements like interactive Twitter feeds, sliders, and more for effective ways to share a lot of content on a single page while keeping the design organized and clean. Below is a showcase of feature-rich websites, and a look at how they are able to pull it off.

Good Afternoon

The simple grid-like design towards the bottom let’s this website feature several of the latest blog posts for skimming, with title, blurb, and post image included. Since three can span across the horizontal width, it’s easy to feature a lot of content in a small amount of space. There isn’t a lot for interactive features here, but there are still plenty pieces of content available through the use of good organization and related navigation right on the front page.

Simplified Safety

This front page contains a slider that can feature four pieces of content in one single area, and add interactivity and a great visual experience at the same time. Towards the bottom, we see more areas of content via thumbnails with a title, and on hover, they show a short blurb for the content.

Agentia Kairos

For many of the tabbed items on this web site, they are actually different pages. Some websites choose to go this route, while others choose to place all the content on one page and show or hide it depending on the user’s options. Either way, though, is a great solution for a website that has, or wants, a lot to show in a single view. In addition to the tabbed content, there are also JavaScript sliders that show various content in the many tabs, allowing more content with limited space.

Change.org

The “feed” look and layout has become popular since the rise of many popular social networking websites such as Facebook and Twitter. Now, even blogs are adopting this space-saving layout scheme to feature blog posts. On the Change.org website, there are three “feeds” of petitions: featured, most popular, and most recent. These three feeds are dynamically loaded between three tabs towards the top. We can also see easy navigation on the right, other pieces of featured content designed in a clean and organized way, and a new “beta” tab feature for feedback, that the user can remove if wanted.

CSR360

The CSR360 Website has a lot of complex navigation which, of course, tends to go along with content heavy websites much of the time. In order to organize all this navigation, different sections are separated between the header, to the right and left, to tabs, and to sub-navigation under the tabs. Also, more links and calls to action are below within the content to also help visitors navigate. Other notable features to this design is the interactive slider, clean lists, and imagery used to create hierarchy around the otherwise complex and heavy content.

Livestream

All of the primary content on Livestream is separated into tabs across the tops into manageable sections. Within each section, more content is organized into further tabs, or otherwise a grid-like fashion that allows similar content to be placed on one page without becoming disorganized.

Pure Grips

Again, we see the similar pattern of tabs across the top, and primary and secondary navigation separated. This design does a great job of organizing content within a grid, and to the right, within a list form with icons to grab attention. There is very little for interactive features, or “tricks” to show, hide, or let the user choose content. This is a great example of a content and feature heavy site, though, with all content out in the open.

Blik

What’s unique about the Blik website is that while it’s feature heavy like many other websites in this showcase, there is a lot of imagery needed. Imagery should usually be kept to a minimum, while simplistic design is a must for content-heavy websites, but Blik makes it work with all the imagery, plus some. With added imagery and complexity, in order to keep the design in tact, other areas of content were sacrificed visually. We have simple typography, navigation, grid, and side content.

Zendesk

Zendesk uses primary navigation up top, but separates the tour navigation by including it within the design page below. With the use of easy-to-navigate tabs, the visitor can be shown all the content desired, but without having to view too much on each page. Within each page, we have a simple grid to organize the content, and while some of the content may be much, it never becomes overwhelming because it follows a consistent pattern on each page.

Conclusion

Designing for feature rich websites does not have to be difficult. It’s just as easy as working with any other type of design, as long as it’s planned for. The one thing many designers find difficult is finding a place for everything that still adheres to correct hierarchy and design principles. However, content can always easily be hidden or shown temporarily, and the content that is shown all the time can be easily organized in a grid-like fashion.

In this post we’ve mentioned a few ticks and tips for dealing with feature-rich websites, including implementing sliders, tabs, hiding detailed content until hover, drop downs and more. Feel free to include any more examples or ideas for fitting in excess features on websites that can help to keep a design in tact.