Best of the WebByGrace CarterDecember 9, 2018October 11, 2021
Web designers and bloggers alike all understand how difficult it is to entice potential site visitors to stick around for a while. We only have a few seconds to attract a visitors’ attention and the persistent awareness that it could be lost at any moment.
There are many factors that go into grabbing and holding a visitors’ interest. A lot of energy and thought have to go into creating valuable and relevant content, high design quality, eye-catching headlines, and engaging media.
With so many things to work on you can miss the small details that make an impact on the website if forgotten. In this article we’ll narrow in on a very specific part component of the website – the “Read More” or “Continue Reading” link. This link is usually found following a summary or a headline in an article.
Why Is The “Read More” Link So Important?
We’re glad you asked. According to Christina Goodwin at Stop, Drop, Scroll, “Read More” links are distracting, discourage her from continuing the article, and leave the site altogether.
She also says that she understands that these links allow for the publisher to present more than one article at once and perhaps give the readers the option to just read the summary or headline if they should choose. She theorizes that perhaps these links help to limit how much data is loaded on a page at once.
She makes some pretty good arguments. These arguments could be met and solved with better, intentional design and placement. She is right about her theory that “Read More” buttons and links do help “compress content on the home page,” according to Smashing Magazine.
And, yes, this compression does have the effect of allowing for more content to be placed in the same space allowing for visitors to scroll past headlines more quickly. The links do make it easier to track which articles are getting the most traffic. Putting entire articles on a homepage would make this tracking less certain and more difficult.
Of course, there is the monetization issue. The fact is that the more users click on links, the more likely they are to click on advertisements. This is vital information for websites that depend on traffic for monetization as “Read More” links double or triple the page views making the sites more attractive.
Designers need to keep both the needs of the user and the website owner when designing the “Read More” buttons or links. Here are the best examples of “Read More” buttons and link designs.
How We Chose Our Ratings
We’ve ranked these examples based on their incorporation of “Read More” links, design of the links or buttons, and visitor response to the links. We want to be sure that the examples are high-quality and we give you a clear idea on how to properly design your own “Read More” buttons or links for increased traffic and better tracking of the traffic.
The examples are ranked on a 5/5 scale and are real websites that you can view. Let’s jump in to the best examples of “Read More” link designs.
Top 7 Best Examples Of Read More Buttons
This list is has a mixture of examples of websites that use “Read More” icons, “Read More” links, and “Read More” buttons.
1. Tutorial9
The most popular presentation of the “Read More” link is the phrase written in simple text and underlined. It is usually in bold and presented in a flashy color. Sometimes its followed by a > sign for extra emphasis.
Overall Rating: 5 out of 5
This is the approach taken by Tutorial9 who present the link net to its comment link. The article excerpt itself is only a few sentences long and the article headline is displayed in a bold yellow. The effect is a simple clean presentation that presents the link in a clear, but laid-back way.
2. The White House
Next on our list is the White House blog. Many designers overlook the importance of making their “Read More” link distinguishable from the rest of the article for easy identification. This would be especially easy to overlook on a blog that has to be purposely conservative, subdued, and minimalistic.
Overall Rating: 4.8 out of 5
The White House website presents their “Read More” link stand out by inserting it a bit after the end of the article summary, making good use of negative space. They further enhance the link by underlying the link and presenting it in all caps. They maintain the restrained design of the website by making the link a slightly lighter blue then the headline and keeping the summary a traditional black with clean typography.
3. Huffington Post
Huffington Post is one of the most popular sites for liberal American political news and opinion in the world. One of the reasons for its popularity is the consistency of the website aesthetics. The team behind the site considers every detail of the website carefully, including the “Read More” link.
Overall Rating: 4.8 out of 5
Huffington Post places its link about a half inch after the article summary. The link is a traditional black color but is bolded and placed to the right of the lighter colored “Comment” link. It maintains its visibility without being obtrusive.
4. Design Reviver
Sometimes a simple link is not enough, especially if the design of your website is a bit flashier then the websites listed above. Icons work great with more interactive web designs or sites with darker backgrounds.
Overall Rating: 4.5 out of 5
This is the case for Design Reviver website which places “Read More” in white typography inside of a small black rectangle at the bottom of a large summary. The large summary which extends to cover the entire width of the home screen would make it difficult for a simply designed link to be seen.
5. The New Potato
A popular site for food, fashion, and lifestyle the New Potato which uses a very strong image-driven approach to its presentation. Each article on the site is highlighted with a large photo and a short, two-sentence description.
Overall Rating: 4.5 out of 5
A “Read More” link is scrolled in a small, italicized, black typography one centimeter below the description. This design choice maintains the chic design of the website. It would be a bit more effective if the link was bolded.
6. Nerd Fitness
A website with fitness as its focus and everything nerd as its motivation, Nerd Fitness has the aesthetic of a superhero comic. For this reason, a “Read More” link would not be too subtle to stand-out in this formidable design.
Overall Rating: 4 out of 5
To combat this and the generally large, unique typography on the site, the creators have placed a “Continue Reading” icon at the end of an extensive article excerpt on the lower right side. The color of the text is white and placed inside of a long and thin and very red rectangle.
The placement is very effective and the large excerpt addresses Godwin’s concern that placement of the icon in most articles are too high and discourage readers. The general design of the site, however, is a bit on the heavy side.
7. Real Mac Software
The independent, award-winning company known for its Mac application, Rapid Weaver, has a flashy design to its website. The website is effects and image heavy with lots to draw the user away from its own twist the “Read More” button.
Instead it has a big, bright blue “Learn More” button after the short description of what the company is known for, Rapid Weaver. Claiming “The Best Web Designer for Mac. No Code Required.” Yep, it definitely needed the big, blue button.
Overall Rating: 3.5 out of 5
While buttons will certainly stand out, it’s best to use them sparingly so you won’t overwhelm your audience. Overall, it seems that links are more effective and less jarring to the potential visitor as long as it is well placed and can be distinguished from the surrounding text and design.
If your design doesn’t allow for a simple design then your next step is to try icons. The icons themselves can be subdued in size yet can be a bright color that will stand-out easily against a more complex overall website design.
Keeping Up With The Times
Before beginning the design for your “Read More” link it’s good idea to do some research. Look at websites similar to the ones you are designing so you are aware of any trends that are currently happening. Some trends that are immediately apparent from the examples above are that users prefer links rather than icons and buttons.
Another trend is that blogs tend to use links and icons, while corporations and businesses use buttons more frequently. This may be because businesses feel that the flashier buttons are more effective in attracting visitors, but, as the numbers seem to show, this is not the case.
WebsiteDetailsRatings
Tutorial 9
- Simple text
- Underlined in a flashy color
The White House
- Purposely conservative
- Subdued and minimalistic
Huffington Post
- Traditional black color
- Light colored text
Design Reviver
- White typography
- Small black rectangle
The New Potato
- Scrolled in a small italicized text
- Black typography
Nerd Fitness
- Unique typography
- Text is white
- Placed inside of a long and thin and very red rectangle
Real Mac Software
- Bright blue button
- Flashy design
Buyer’s Guide – How To Choose Your “Read This” Design
Let’s look a little deeper at what the trends are when it comes to using “Read More” links. Ramona Sukraj from ImpactBND seems to agree with Goodwin that “Read More” links can be a turn off. Referring to them as high-friction verbs, or verbs that imply an obligation or work that a user just doesn’t want to do, these links can drive the visitor away from the site.
So how do we fix it? Sukraj offers some advice to make this CTA, or call-to-action, less abrasive to visitors. Before exploring your options, however, she suggests compiling a clear picture of your ideal visitor’s persona. We agree that this is sound advice.
Once this list is compiled, you can start looking at alternatives if you determine another version of the “Read More” link is best for your potential visitor.
She offers some alternate suggestions, such as:
- View More
- Get My Article
- See What Happens Next
These phrases promise to fulfill a curiosity rather then telling the reader to work or perform a task.
We’ve covered the viewpoint of the potential user and that of the web designer, explored the different effective examples of the traditional use of the “Read More” buttons, and looked at the alternatives should the traditional forms not work for your specific potential visitors.
Armed with this information you will be able to choose a design that works for your website and your visitors, increasing conversion rates and the tracking of those visitors. But at the end of it all, you are only limited by your creativity and ability to think up a design that works best for the website you are working on. If you like the design you think up then your “Read More” design will probably work for the website as well.
Consider these Available Items
Sale
JavaScript and JQuery: Interactive Front-End Web… Check Price on AmazonSale
The Pocket Universal Principles of Design: 150… Check Price on Amazon
100+ Free Tools to Create Content for Social Media… Check Price on Amazon
Last update on 2022-01-25 / Affiliate links / Images from Amazon Product Advertising API
Post Tags: #best examples of read more button#click on advertisements#creating valuable content#high quality design#read more buttons#user clicksGrace Carter
Similar Posts
Best of the Web | ResourcesByLuigiOctober 12, 2009February 2, 2014
Today we are showcasing “Best of the Web”. We have scoured the internet in search of other design driven blogs and websites to showcase what they have to offer for the week of October 4, 2009. There is plenty of great stuff out there such as tutorials, freebies, resources and lots of inspirational pieces. I…
Read More Best of the Web for the Week of October 4, 2009Continue
Best of the WebByDesignrfixJuly 27, 2016July 27, 2016
Whether you like the man or not, these logo redesigns of Trump For President 2016 are absolutely hilarious and quite frankly brilliant. With the release of his campaign logo of Trump Pence “Make America Great Again”, it made a lot of people giggle over the inappropriate interlocking of the T and P. As you can tell…
Read More Donald Trump Logo Redesign In Many Hilarious WaysContinue
Best of the WebByLuigiMay 1, 2010February 2, 2014
Today we are showcasing “Best of the Web”. We have scoured the internet in search of other design driven blogs and websites to showcase what they have to offer for the month of April, 2010. There is plenty of great stuff out there such as tutorials, freebies, resources and lots of inspirational pieces. I am…
Read More Best of the Web: April 2010Continue
Best of the WebByLuigiDecember 3, 2009February 2, 2014
Today we are showcasing “Best of the Web”. We have scoured the internet in search of other design driven blogs and websites to showcase what they have to offer for the month of November 2009. There is plenty of great stuff out there such as tutorials, freebies, resources and lots of inspirational pieces. I am…
Read More Best of the Web: November 2009Continue
Best of the WebByLuigiOctober 5, 2010February 2, 2014
Today we are showcasing “Best of the Web”. We have scoured the internet in search of other design driven blogs and websites to showcase what they have to offer for the month of September, 2010. There is plenty of great stuff out there such as tutorials, freebies, resources and lots of inspirational pieces. I am…
Read More Best of the Web: September 2010Continue
Best of the WebByDesignrfixJune 2, 2020December 11, 2021
Customers in Canada are stuck inside with little to do other than work from home and teach their children. Covid-19 has changed lives in recent history, and people are struggling with what to do with all their time. Real money casinos are plentiful in this growing market when looking for a Canadian online casino. All…
Read More How To Retain Customers During Covid-19Continue
This site uses Akismet to reduce spam. Learn how your comment data is processed.
