Smashing Magazine - we smash you with the information that will make your life easier. really.
Designing “Read More” And “Continue Reading” Links
Most bloggers and website designers understand how difficult it can be to attract visitors to a website. In fact, most websites have just moments to attract potential readers. Several factors contribute to how well a website attracts its readers. These factors include well-written headlines, interesting content and design quality. While all of these aspects are important, today we will focus on a very specific and sometimes overlooked element in a website’s design: the “Read more” or “Continue reading” link that follows a headline or summary of an article.
Every website has its own way of asking readers to click on an article link. Some websites have very prominent links, others are a bit subtler. Either way, website and user interface designers have thought up some very creative and innovative ways of inviting readers to read on. In this showcase, we will present 45 websites that have excellent “Read more” and “Continue reading” links in their design. Hopefully, these websites will serve as inspiration for your future projects or at least remind you not to ignore this important design element.
[Offtopic: by the way, did you already get your copy of the brand new Smashing Book?]
Best Practices
Before we present the showcase, let’s understand why “Read more” links are so important. They are important for several reasons, most importantly because they allow designers to compress content on the home page. By compressing content, you fit more content in less space. This means that readers can scan headlines more quickly and that you can fit more information above the fold.
Also, “Read more” links allow website administrators to more easily track the most popular content. Designers who put entire articles on the home page may make it difficult for website administrators to track the most popular articles and understand what users want to see.
The third and probably most practical reason for having “Read more” links on a website is money. Websites that monetize traffic understand that the more their readers click on links, the more likely they will look at and click on advertisements. “Read more” links can double or even triple the number of page views a website receives, making it more attractive to advertisers.
Now that we understand why “Read more” links are so important, let’s investigate some best practices for implementation.
1. Make Text Links Stand Out
By far the most popular method of presenting “Read more” links is with simple text. This is usually done with a link that is underlined, bolded, brightly colored and sometimes marked with a > sign. Making text links on your website easily distinguishable from generic links is important and sometimes overlooked by designers.
2. Use Icons
When text alone won’t do, consider adding an icon to your design. Icons are great tools in user interface design and can really help draw attention to a particular part of the layout.
The World Wide Blogger Bake Off
3. Use Buttons
If you really want your “Read more” link to stand out, use a button. Some websites have images or CSS-styled text. Just keep in mind that too many buttons can overwhelm the audience, so use them in moderation.
Trends
Seeing what everyone else is doing before you start designing a website is always important. You may want to know in order to conform to the current trend, or you may just want to buck the trend. Either way, putting your finger in the air from time to time to see which way the wind is blowing is valuable.
While researching material for this article, we discovered several interesting trends*:
- Text-only links were used more than any other type of “Read More” link by a ratio of almost 2 to 1.
- Most websites used the wording “Read More” or some variation of it.
- Text-only links or text combined with an icon were used mostly on blogs, while buttons were used primarily on commercial websites.
* These observations are not scientific and reflect only the websites showcased in this article, not the Internet in general.
Conclusion
Hopefully, this article has given you some insight into how best to display your “Read more” text. Clearly, you can entice readers to click on links in several ways, and some methods work better than others. In observing other websites, we found that many of them prefer to keep their links simple. Some websites have brightly colored links or bolded text, others have icons or even buttons to make their links stand out. Either way, designers prefer to keep their “Read more” text brief, with only one-third of them using some variation of the word “Continue.” There could be several reasons for this, the most likely being that the words “Continue reading” just have too many characters.
We also found that blogs were more likely to use text links, while commercial websites were more likely to use buttons. The reason for this isn’t exactly clear, but owners of commercial websites may feel buttons attract users more to their products, while publishers of text-heavy blogs prefer to keep things simple, so as not to overwhelm readers.
In the end, you are limited only by your creativity and imagination. Do whatever works best for the website you are working on, and the design will likely work because of it.
(al)
Grant Friedman is a design enthusiast, author and blogger. Grant's website Colorburned is a popular graphic design website that contains a huge library of design resources, tutorials and information. In addition, Grant is also an interactive and graphic designer with 10 years of experience. Follow Grant on Twitter.
(3 votes, average: 3.67 out of 5)
Loading ...- 60 Comments
- 1
- 2
July 29th, 2009 12:03 amVery nice article! I love to read the articles!!!
- 3July 29th, 2009 12:07 am
And if you are blind and let your screenreader summarize and read the links of the page, you will hear “Click to continue” , “Click to continue”, “Click to continue”, “Click to continue”. Very helpfull, indeed. No, those links are not very helpfull. And if I have a heading and a huge image it is not very likley I will need a “click here”-link.
- 4July 29th, 2009 12:12 am
It should be pointed out that “Read more” and alike are not SEO friendly, and should be substituted with something more Google-readable phrases.
Carlo
- 5July 29th, 2009 12:16 am
One important tip is also to customize the Read More with the type of content you are promoting and to adapt the call to action. (”Watch the video”, “Read more about x”)
Easily doable with wordpress using — more Your custom call to action –
- 6July 29th, 2009 12:16 am
Nice round up! I know I need to work on my blog’s “read more” since it seems some of my readers occasionally don’t realize there’s more to read!
@Jens I understand how irritating the repetition of “click to continue” might be to someone using a screen reader. I’m curious what alternatives there are to signal to someone who is sight-impaired that a story continues beyond the initial summary?
- 7July 29th, 2009 12:38 am
Hmm, good round-up, however as a designer I would say that the persuasive composition of the page should lend to the ‘continue reading’ link; as it’s not a standalone element, it should be a final focal point.
- 8July 29th, 2009 12:39 am
In many cases there really isn’t any need for the link, since the whole article should be visible on the first page. Publishers just want more page views to sell more ads and require users to click through pages multiple. Take for example Lifehacker, Engadget and TechCrunch and compare those to Boing Boing.
- 9July 29th, 2009 12:45 am
This was something that I definitely at this when designing my blog Inspect Element. I went with a big, simple button with the excerpt text fading away just to make things clear.
- 10July 29th, 2009 12:58 am
For SEO purposes, add rel=”nofollow” to ‘Read more’ link and be sure the title has a link to the page, a bit obvious but sometimes there is not a link in title what means a big error as you don’t want to rank for ‘read more’ at search engines, you want to rank for the nice keyworks in title-link
- 11July 29th, 2009 1:07 am
And this is what I like about HTML5 “Read more” links semantic solution → http://html5doctor.com/block-level-links-in-html-5/
- 12July 29th, 2009 1:25 am
Jens, Carlo and Ani are pointing at it: for SEO purposes, a pure text-link should always include a bit of information about the linked-to content.
Otherwise another great article, thank you, Grant. - 13July 29th, 2009 1:27 am
As stated above, the copy you use here is surely more important than the styling? I’m guilty of using ‘Continue reading’ on my site (will change ASAP).
Something like Continue reading Designing read more and continue links perhaps has more impact as well.
- 14July 29th, 2009 1:34 am
Sorry, double post.
- 15July 29th, 2009 1:36 am
@Faryl –
@Jens I understand how irritating the repetition of “click to continue” might be to someone using a screen reader. I’m curious what alternatives there are to signal to someone who is sight-impaired that a story continues beyond the initial summary?
- A simple way to do this would be to include the article title within the linked text, as Viget do in the example above – ‘Continue reading “Unfuddle User Feedback”‘. This method differentiates between links, and gives a user with assistive technology an indication of where the link leads.
- 16July 29th, 2009 1:43 am
One solution can be to do something like “Read more [span]on article title[/span]” and then style out the fully qualified part (in this example in ’span’ tag). I try to ensure that I use the title attribute too on the link and put the full article title in there.
- 17July 29th, 2009 1:56 am
I prefer → over », and hate when designers use >>
«» are rather for quotes, not arrows.Though if header links to full article, sometimes better not to place «read more» link at all.
- 18July 29th, 2009 2:13 am
One of the best looking “read more” derivative links I have seen, is a “learn more” text link on the following website.
excellent how it looks like an actual button.
- 19July 29th, 2009 2:14 am
The choice of words also matters quite a bit. I think just “Read more” sounds better
and simpler than “continue reading” or “read the rest of this story” or “click to continue”.I like the way Macalicious has done it.
- 20July 29th, 2009 2:53 am
Nice post.
I changed the link text on my site from “read more…” to “Continue reading [post name]” for accessibility reasons. You can’t have a bunch of links on the page with the same link text all going to different targets. But as well as the added accessibility I just think it looks better and makes a lot more sense.
- 21July 29th, 2009 3:17 am
What you can do about “read more” or “continue reading” links SEO wise is add the article title as some suggested above, but hide them by wrapping them in a span. That way they still make sense for screen reader users, but aren’t overly present for sighted users or designs that have little space for displaying these links.
And example of this method is found on my blog:
http://www.onderhond.com/blog/work/
(check the “continue reading” links with firebug or disable css)It’s a simple solution, quite elegant and easy to implement if you have power over the backend of your blog.
- 22July 29th, 2009 4:46 am
Could be interesting to add a poll, asking which copy is preferred for leading into a post/article. Read more, continue reading, full post, continued, Click for more ect…
Smashing?
- 23July 29th, 2009 4:50 am
really nice collection, specially I like the icon way to put read more option in webs.
- 24July 29th, 2009 5:23 am
I try to ensure that I use the title attribute too on the link and put the full article title in there.
If you’re putting the full article title in the link itself and removing part of it with an offset span and putting the same title in the title attribute too, then you may be forcing screenreader users to hear the same piece of content twice. Better to just use the hidden span method without the title attribute.
«» are rather for quotes, not arrows.
Maybe where you’re from, but where I’m from one, no-one uses «» for quote marks.
- 25
- 26July 29th, 2009 5:51 am
Great Collection!!!…
But I will go with, “Viget” style as it is more accessible than other styles…Cheers!
Jags - 27July 29th, 2009 5:51 am
The reason (at least in Europe): Most of them do not know anything about the quality of links in respect to searchers and search engines! The right text is essential…
- 28July 29th, 2009 6:08 am
This was great
- 29July 29th, 2009 6:10 am
@ asn187
Indeed, but a messy looking site though.
- 30July 29th, 2009 6:29 am
I don’t really like “Read More” links. I prefer clickable headlines with a short (i.e. a sentence or two) below. This format makes the content easier to scan and the link easier to click.
- 31July 29th, 2009 6:52 am
The link styling should depend on the focus you want to draw to it. On a blog, it might be more important to draw focus to the “comments” link, as on Autoblog, but a website that has a different aim / focus might highlight something else. I just depends!
- 32July 29th, 2009 8:07 am
Hi Grant, thanks very much for featuring my site amongst your choices. I’ve gone ahead and changed it as a result, and now use the post title instead of un-descriptive text. Much better (but sorry to deem your screengrab out-of-date so soon).
- 33July 29th, 2009 8:40 am
agree with others, ‘read more’ could be substituted for something more descriptive, for SEO, plus seeing ‘Read More’ ten times on a page can be very dull. If link style is clearly defined in a site there should be no need to continually be instructing people to ‘click here’, they will aready visually know what a link looks like.
- 34July 29th, 2009 9:21 am
Viget was the only site that did their links in a way that was both accessible and SEO friendly. The rest of this article really missed the boat by showcasing a linking technique that isn’t suggested.
- 35July 29th, 2009 9:49 am
The rest of this article really missed the boat by showcasing a linking technique that isn’t suggested.
I’m not sure I agree – what the article was succesful in doing was opening a discussion in to best practises when using ‘read more’ links. The fact that accessibility and SEO techniques is being discussed surely makes the article a success…?
- 36July 29th, 2009 10:24 am
As a few other people has mentioned earlier, the Read more links are not SEO-friendly nor are they good from an accessibility standpoint. A much better way to do it would be marking it up as following and hiding the span with CSS:
Read more <span>about 'Article Name Here'</span>
Maybe where you’re from, but where I’m from one, no-one uses «» for quote marks.
Go to start > run… and type in charmap.
Look for those characters in the list. If you do, you’ll notice in the description that says “Left-Pointing Double Angle Quotation Mark” and “Right-Pointing Double Angle Quotation Mark” respectively. - 37July 29th, 2009 10:40 am
Agree on SEO and accessibility points. This is basic, and essential. SmashingMagazine should know better! Good design ideas, though. Andy, great input, thanks!
- 38July 29th, 2009 10:57 am
I agree with Bryan. Telling your users to “click” on anything is an outdated web practice. People understand what a link is. If there is truly a need for you to tell people where to click, then you didn’t design your link/button in a clear manner. Think of it this way – when you’re reading a book, it doesn’t say “turn page here”. People are familiar with these concepts by now.
The SEO advocates bring up a good point with using better words (keywords) for links rather than “more” or “continue”, but if the rest of your site has quality content I don’t think this matters much.
- 39July 29th, 2009 10:57 am
Vidget has the best example for SEO and screen readers. They include the article title name in with the “Click to read…” link
- 40July 29th, 2009 12:34 pm
I think I saw a study a couple of years ago that showed that adding a word to an anchor text that commands the user to do something gets a higher click-through rate.
For example: “Click to read everything about the latest iPod visible to only loyal customers”. This is an old truth in banner advertising.
Bonus: Our dear usability guru Jacob Nielsen says that longer link texts are better than shorter becouse a lot of people only reads the headlines and the links.
- 41July 29th, 2009 12:52 pm
Nice simple post. Click here should never be used. From an SEO perspective, they all track back to Adobe Reader.
- 42July 29th, 2009 2:13 pm
I don’t see any reason for make it longer than “continue reading”. It is simple and straightforward. “Click to continue”, “Read the rest of this post…” or “Continue reading Designing read more and continue links” contain unnecessary and confusing text that is hard to scan. Why changing the obvious?
Only I would agree with Andy (#35) on adding a hidden span with more details.Great article!
- 43July 29th, 2009 3:07 pm
Very nice post, but I think many people has different preferences.
Anyone can have a look at my site and give me some ideas about what should I do.Should I keep it as it is or should there be highlighted?
- 44July 29th, 2009 3:28 pm
monkey effect in all its glory
- 45July 29th, 2009 4:26 pm
Not sure that Jillian is right in thinking that this is like reading a book: ‘when you’re reading a book, it doesn’t say “turn page here”.’ This situation is more what you would come across reading a magazine, where an article is often continued on a page towards the back of the publication and there will be a jump line giving some variant of ‘continued on page __’.
And, books typeset before the latter half of the 19th century would often place the first few words of the following verso in the bottom right margin of the recto to help the reader follow the sense while turning the page.
- 46July 29th, 2009 5:14 pm
Haha… I like how the Lost and Taken site stole digg.com’s little digg guy for their author icon. Looks like all they did was make his arms a few pixels longer.
- 47July 29th, 2009 5:47 pm
Look for those characters in the list. If you do, you’ll notice in the description that says “Left-Pointing Double Angle Quotation Mark” and “Right-Pointing Double Angle Quotation Mark” respectively.
Still, double-angle quotation marks aren’t commonly used in English-speaking countries, which is the original point that had been brought up.
Our dear usability guru Jacob Nielsen says that longer link texts are better than shorter becouse a lot of people only reads the headlines and the links.
I agree. :)
- 48July 29th, 2009 7:07 pm
how to design “read more”on wordpress??
- 49July 29th, 2009 8:33 pm
Dull and weak examples.
- 50July 29th, 2009 9:32 pm
It never got in my head that “Read More” links are so important.
I’ll definitely add this to my blog - 51July 29th, 2009 10:35 pm
I’m sorry, but what’s new? It’s always been like that: a standing-out text link, or an icon, or a button.
Nice article, but I would expect some deeper analysis, such as when and how and where to place the links, what’s wrong and what’s right etc. instead of just a bunch of screenshots.
- 52July 29th, 2009 10:53 pm
“Read more…” seems to have manifested itself as a kind of convention, but as more of you have pointed could work better with SEO and screen-readers. Well in our company we have found that a pattern taking the “Read” and combining it with something significant works well. E.g. “Read more about xxxx”, “Read about xxxx” and thus, only using the good old simple “Read more…”, when we really do not have space for more. Might be an idea for others?
- 53July 29th, 2009 11:38 pm
Another chance missed to promote accessibility in an area where so many sites fall down (Read more, Continue etc.). Taking Joachim’s point above, you can have “read more about XXX” but have the “about XXX” in a span hidden off-screen with CSS (though *not* using display:none or visibility:hidden). That way screen readers will still announce the contextual part of the link, but sighted users don’t see it on-screen. Andy has the code (comment #36).
@Pheonixhart – are you new to Smashing Magazine? You won’t get ‘deeper analysis’ here.
- 54July 29th, 2009 11:39 pm
Well, thanks for the examples, but the article doesn’t say anything other than “look here’s a bunch with text” and “look here’s a bunch with an image”.
It would’ve been more interesting if you’d talked about what text to use (and why), if it’s really needed, etc
- 55July 30th, 2009 2:32 am
A good idea would be to put the ‘read more’ link in the bottom right instead of in the bottom left corner. This, I think, would make it easier for the user to find it.
- 56July 30th, 2009 7:31 am
Shame to see an article from a supposedly professional designer that didn’t even acknowledge either the accessibility or symantic aspects of this technique.
- 57July 30th, 2009 10:10 am
@Lindsey Thomas Martin – Your magazine article analogy is a poor one. Obviously a magazine would tell you where the story continues if its not on the following page. Otherwise you’d have to just flip through and guess. With a link, its not like they won’t know what to do with it if it doesn’t specifically say “click me”. Providing users with obvious instructions just creates textual noise. Give Steve Krug’s “Don’t Make Me Think” a read.
- 58July 30th, 2009 5:00 pm
Please Smashing Magazine do your due diligence – you’re an important source of information for web designers of all levels of expertise and that means you have a responsibility to get that information right.
There is a serious accessibility issue with this technique. Plain “Read more” links are a violation of the W3C accessibility standards:
Priority 2 – 13.1:
Link text should be meaningful enough to make sense when read out of context — either on its own or as part of a sequence of links. Link text should also be terse.
For example, in HTML, write “Information about version 4.3″ instead of “click here”. In addition to clear link text, content developers may further clarify the target of a link with an informative link title (e.g., in HTML, the “title” attribute).It’s ok to use “Read more” if we also include additional information about the link – just including a title attribute is not enough; I recommend the below method where you use CSS to hide the rest of a “Read more” link from sighted viewers, but show it for users using screen-readers. That way everyone wins and it’s only a tiny bit more effort on the designers part.
Simple, accessible “more” links
http://www.maxdesign.com.au/presentation/more-links/ - 59July 31st, 2009 6:21 pm
Very good article, also I am appreciative of the 404 error page you offered, as a good friend of mine mistyped a shortened link, but instead of seeing such a bland and basic screen instead I was educated in how best to present 404 error pages so thank you for that. Also I will have to look more at this on my own site, as it makes sense and indeed it is better to have many articles in one place then to many everywhere else. I do wonder though how it could be setup up on wordpress domain besides using a theme that provides it. Look forward to hearing more from you and this site in the not to distant future.
- 60August 8th, 2009 11:43 pm
wow.. this is very good article…. :)
- 00
There are no trackbacks at this time. If you are interested in leaving a trackback, please use this URL.
Leave a Comment
Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!
Interact
Popular
- 100 Wordpress Themes
- Photoshop Tutorials
- Fantastic Wallpapers
- 40+ Excellent Freefonts
- Dual-Screen Wallpapers
- Wordpress Themes for 2009
- Illustrator Tutorials
- Incredible Free Icon Sets
- High-Quality Free Fonts
- 30 Scripts For Galleries
- Photoshop Text Effects
- Useful Icon Sets
- Web Design Trends
- iPhone Wallpapers
- Before Launching a Website
- CSS Layouts And Templates
- Photoshop Actions
- Stunning Pictures and Photos
- Fantastic HDR Pictures
- Logo Design Tutorials
- Free Design Templates
- 10 Mistakes In Logo Design
- Photoshop Custom Shapes
- 40 Creative Design Layouts
- 8 Layout Solutions
- 53 CSS Techniques
- Photography Techniques
- Black & White Photography
- Styling Design Elements
- CSS-Based Forms
- 50 jQuery Techniques
- 50 Portfolio Websites
- 50 CSS Techniques
- Creative Logo Designs
- Desktop Wallpapers
- 25 Open Source Mac Apps
- 50 Free Icon Sets
- @jchristopher it's our pleasure, Jonathan.
- HTML5 vs. Flash - http://remysharp.com/2010/02/08/html5-vs-flash/
- Learn Something Every Day: a nice little blog updated every day - http://bit.ly/rmcES
- We’re Ready for CSS3, but are we Ready for CSS3? - http://bit.ly/cKN7Bz
- lovely-css: a grid-based CSS framework - http://bit.ly/ayA0wb
- How The CSS Selector nth-child Works - http://bit.ly/cgPMqe
- 33 New High Quality Adobe Illustrator Tutorials - http://bit.ly/bTgFbu
Take a look over here. What do you think about that “more-link”? :)