7 Interesting Ways to Display Content Excerpts
Article excerpts can play an important role in your site’s user experience. They provide readers with a taste of what’s inside – encouraging them to click through to your full post. Many content management systems, such as WordPress, have the ability to create custom excerpts (or display the first x number of words from an article) built right into the core software.
But when it comes to style and functionality, the excerpt is often overlooked. That’s why we’ve put together a collection of some unique ways to make excerpts more than just a simple bit of text on your home page. The snippets below improve the way excerpts look and some even add utility to the mix. Let’s dive in:
Excerpt Tabs
When space is limited, this tabbed navigation example could be of great use. Think of it as a way to showcase posts from specific categories. The way it’s currently set up, you’ll get just one post per tab. But with a little creative coding you could make each tab home to, say, the top 5 posts from each category.
Scroll to Full Article
One trend we’re seeing is using excerpts on an article’s page itself. Here we have a snippet that displays the excerpt upon the page’s loading. Then, scrolling reveals the entire article below. In this particular case, the user’s viewport is detected via JavaScript and is used to display the article at a specific point during the scroll. This enables the use of some fancy special effects.
It’s All in the Card
Content cards have turned into a very popular way to display a list of articles. Design-wise, they can be very organized and compact. Plus, they also provide a nice visual separation between posts – making for easier reading. What’s interesting about this example is that, instead of linking to a full post on a separate page, this card allows you to read the entire article right within the same container. The use of the scrollbar makes this extra handy. This one’s probably best for shorter content.
CSS Reveal
The right image can certainly serve as a useful way to provide readers with a hint as to the contents of an article. If your site has a focus on using featured images, this example might be right up your alley. It uses pure CSS to reveal a text excerpt as the user hovers over an image/headline card. This won’t work for every site, but adds a nice bit of interactivity when paired with great imagery.
A Revealing Perspective
A different take on the hover reveal can be found on this example. Rather than the multicolumn card layout, this resembles more of a traditional blog. The advantage here is that it allows for larger headlines and can handle excerpts of various lengths.
Full Screen Intro
This example targets an article’s page and provides a full screen to show off a title, excerpt and featured image. Scrolling down then reveals the full article. This could add a nice touch to long-form content.
Stand in the Spotlight
At first glance, the excerpts below look nice enough. But hovering over an article is where the real magic happens. The chosen article’s container expands, while a dark background mutes the others in the listing. What a great technique for making content stand out.
More Than Words
The examples above are proof that excerpts don’t have to be boring. In fact, they can become an asset in both UX and your overall design. With a bit of creative thinking, we can add some extra layers of interactivity and tempt users to keep on clicking.
The post 7 Interesting Ways to Display Content Excerpts appeared first on Speckyboy Web Design Magazine.