Three Ways to Display a lot of Content on a Webpage

by Lars Miller | Nov 17, 2020

As web designers, we are often approached with the challenge to make a lot of content available at once in a way that’s most consumable for our particular end-user. This happens most often when you have a list of things that you want to show, but don’t want to overwhelm the user (and don’t want it to take up an entire page). Maybe you have 5 testimonials to show, or you have 7 features that you want to list out, but you want to do it in a way that is easy for your end-user.

When the content is repeated, or formulaic in way, there are a few options we can use.

The Accordion

Accordions are great if you have a paragraph or so of content per title. Stack them up, make the title clickable to show the corresponding content, and you’ve just created a Table of Contents with the nested content right there.

The Modal Window

The Modal Window is a great tool to initially hide content, then have it revealed upon an event (usually clicking a button). These work great for company pages. You can grid image cards of employees and on click of that image, show their bio in a Modal Window.

The Carousel

Often referred to as a slideshow or simply a slider, the idea is the same. You have a large block of content or an image. Clicking on some sort of pagination (arrows/dots), you can advance to a different block of content or image. We often use these for rotating through testimonials or to list out features of a product or service.

Get Creative

These three ways to display a lot of content on a webpage are just the backbones of fun, creative ideas. Take this recent example from ViewFi. We wanted to show 7 features, all with a block of content and a screenshot mocked up on a laptop. That would be overwhelming to see all at once! So, our designer, Lauren, got creative with how we displayed the pagination.

On mobile, we used arrows to toggle between the laptop icons used for pagination. On desktop, she wanted them all lined up, with the active one solid. To clue the user into clicking on one of these icons to see additional features, I added a rolling opacity change animation to the pagination until a user clicks into a slide. What a fun, creative spin on a Carousel!

If you have a lot of content, and you don’t want to overwhelm your end-user, you have options. Find the one that works best for your audience. And let us know if you need any help!