Designing “Read More” And “Continue Reading” Links

Advertisement

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.

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.

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.

Tutorial91

2

PSDTuts3

4

Smashing Apps5

6

CSS Tricks7

8

David Airey9

10

Freelance Switch11

12

Lost and Taken13

14

Veerle’s Blog15

16

Rob Goodlatte17

18

Douglas Menezes19

20

slashdot21

22

UsabilityPost23

24

Kupferwerk25

26

Dino Latoga27

28

Elliot Jay Stocks29

30

SixRevisions31

32

Viget33

34

Design Moves Me35

36

The White House37

38

Yahoo News39

40

Huffington Post41

42

F-I43

Red Nose Day44

45

UGSMAG46

47

Carrot Blog48

49

Take the Walk50

51

Fantesca52

53

Concentric Studio54

55

Well Medicated56

57

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.

GoMediaZine58

59

Macalicious60

61

The Potato62

63

Sam Rayner64

65

Design Reviver66

67

The World Wide Blogger Bake Off68

69

An Idea70

71

Blog Full Bliss72

73

Koodoz74

75

Spoongraphics76

77

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.

Real Mac Software78

79

Philadelphia Eagles80

81

Dawg House Design Studio82

83

Naldz Graphics84

85

Spoon Graphics86

87

Healogix88

89

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*:

  1. Text-only links were used more than any other type of “Read More” link by a ratio of almost 2 to 1.
  2. Most websites used the wording “Read More” or some variation of it.
  3. 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)

Footnotes

  1. 1 http://www.tutorial9.net/
  2. 2 http://www.tutorial9.net/
  3. 3 http://psd.tutsplus.com/
  4. 4 http://psd.tutsplus.com/
  5. 5 http://www.smashingapps.com/
  6. 6 http://www.smashingapps.com/
  7. 7 http://css-tricks.com/
  8. 8 http://css-tricks.com/
  9. 9 http://www.davidairey.com/
  10. 10 http://www.davidairey.com/
  11. 11 http://www.freelanceswitch.com/
  12. 12 http://www.freelanceswitch.com/
  13. 13 http://lostandtaken.com/
  14. 14 http://lostandtaken.com/
  15. 15 http://veerle.duoh.com/
  16. 16 http://veerle.duoh.com/
  17. 17 http://robgoodlatte.com/
  18. 18 http://robgoodlatte.com/
  19. 19 http://douglasmenezes.com/wp/blog/
  20. 20 http://douglasmenezes.com/wp/blog/
  21. 21 http://www.slashdot.org
  22. 22 http://www.slashdot.org
  23. 23 http://www.usabilitypost.com/
  24. 24 http://www.usabilitypost.com/
  25. 25 http://blog.kupferwerk.net/
  26. 26 http://blog.kupferwerk.net/
  27. 27 http://dinolatoga.com/blog/
  28. 28 http://dinolatoga.com/blog/
  29. 29 http://elliotjaystocks.com/blog/
  30. 30 http://elliotjaystocks.com/blog/
  31. 31 http://www.sixrevisions.com
  32. 32 http://www.sixrevisions.com
  33. 33 http://www.viget.com/extend
  34. 34 http://www.viget.com/extend
  35. 35 http://designmovesme.com/
  36. 36 http://designmovesme.com/
  37. 37 http://www.whitehouse.gov/
  38. 38 http://www.whitehouse.gov/
  39. 39 http://news.yahoo.com/
  40. 40 http://news.yahoo.com/
  41. 41 http://www.huffingtonpost.com/
  42. 42 http://www.huffingtonpost.com/
  43. 43 http://www.f-i.com/
  44. 44 http://www.rednoseday.com/
  45. 45 http://www.rednoseday.com/
  46. 46 http://ugsmag.com/
  47. 47 http://ugsmag.com/
  48. 48 http://carrotblog.com/
  49. 49 http://carrotblog.com/
  50. 50 http://www.takethewalk.net/
  51. 51 http://www.takethewalk.net/
  52. 52 http://www.fantesca.com/
  53. 53 http://www.fantesca.com/
  54. 54 http://concentric-studio.com/
  55. 55 http://concentric-studio.com/
  56. 56 http://wellmedicated.com/
  57. 57 http://wellmedicated.com/
  58. 58 http://www.gomediazine.com/
  59. 59 http://www.gomediazine.com/
  60. 60 http://www.macalicious.com/
  61. 61 http://www.macalicious.com/
  62. 62 http://www.slabovia.tv/
  63. 63 http://www.slabovia.tv/
  64. 64 http://samrayner.com/
  65. 65 http://samrayner.com/
  66. 66 http://designreviver.com/
  67. 67 http://designreviver.com/
  68. 68 http://www.bloggerbakeoff.com/
  69. 69 http://www.bloggerbakeoff.com/
  70. 70 http://anidea.com/
  71. 71 http://anidea.com/
  72. 72 http://www.blogfullbliss.com/
  73. 73 http://www.blogfullbliss.com/
  74. 74 http://www.koodoz.com.au/klog/
  75. 75 http://www.koodoz.com.au/klog/
  76. 76 http://www.blog.spoongraphics.co.uk/
  77. 77 http://www.blog.spoongraphics.co.uk/
  78. 78 http://www.realmacsoftware.com/
  79. 79 http://www.realmacsoftware.com/
  80. 80 http://www.philadelphiaeagles.com/
  81. 81 http://www.philadelphiaeagles.com/
  82. 82 http://www.dawghousedesignstudio.com/
  83. 83 http://www.dawghousedesignstudio.com/
  84. 84 http://naldzgraphics.net/
  85. 85 http://naldzgraphics.net/
  86. 86 http://www.blog.spoongraphics.co.uk/
  87. 87 http://www.blog.spoongraphics.co.uk/
  88. 88 http://healogix.com/
  89. 89 http://healogix.com/

↑ Back to top Tweet itShare on Facebook

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.

Advertisement
  1. 1

    It never got in my head that “Read More” links are so important.
    I’ll definitely add this to my blog

    0
  2. 52

    Joachim Norgaard

    July 29, 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?

    0
  3. 103

    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.

    0
  4. 154

    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

    0
  5. 205

    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.

    Design To Sell: 8 usefull Tips To Help Your Website Convert

    0
  6. 256

    Shame to see an article from a supposedly professional designer that didn’t even acknowledge either the accessibility or symantic aspects of this technique.

    0
  7. 307

    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/

    2
  8. 358

    @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.

    1
  9. 409

    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.

    0
  10. 460

    wow.. this is very good article…. :)

    0
  11. 511

    Love this :) The coding looks great

    0
  12. 562

    Thank you so much for your help. I’m currently re-designing this website: Reading Heating Engineers
    and am looking in to how to customize all parts of the posts. I love the examples which includes icons, I’m sure to go with this for my website. It shouldn’t take me too long to have the new website up and running.

    0
  13. 613

    That’s very interesting but do you have a tutorial on how to add a button and style the more tag for WordPress users?

    1

↑ Back to top