Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

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.

You may want to take a look at the following related posts:

Best Practices Link

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.





Smashing Apps9


CSS Tricks11


David Airey13


Freelance Switch15


Lost and Taken17


Veerle’s Blog19


Rob Goodlatte21


Douglas Menezes






Dino Latoga

Elliot Jay Stocks27





Design Moves Me31


The White House33


Yahoo News35


Huffington Post37



Red Nose Day40




Carrot Blog44


Take the Walk46




Concentric Studio50


Well Medicated52


2. Use Icons Link

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 Potato56


Sam Rayner58


Design Reviver60


The World Wide Blogger Bake Off

An Idea62


Blog Full Bliss64





3. Use Buttons Link

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 Software68


Philadelphia Eagles70


Dawg House Design Studio72


Naldz Graphics74


Spoon Graphics76




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 Link

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.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79

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

  1. 1

    Very nice article! I love to read the articles!!!

    • 2

      This article annoys me as it totally ignores accessibility guidelines.

      Read more links are NOT accessible and offer no context to users of screen readers.

  2. 3

    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 —

  3. 4

    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

  4. 5

    Niels Matthijs

    July 29, 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:
    (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.

  5. 6

    John Faulds

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

  6. 7

    Jens Grochtdreis

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

  7. 8

    It should be pointed out that “Read more” and alike are not SEO friendly, and should be substituted with something more Google-readable phrases.


  8. 9

    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?

  9. 10

    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.

  10. 11

    Harri Paavola

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

  11. 12

    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.

  12. 13

    Dominik Porada

    July 29, 2009 1:07 am

    And this is what I like about HTML5 “Read more” links semantic solution →

  13. 14

    Gerd Wippich

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

  14. 15

    Leon Paternoster

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

  15. 16

    John Goodwin

    July 29, 2009 1:34 am

    Sorry, double post.

  16. 17

    John Goodwin

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

  17. 18

    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.

  18. 19

    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.

  19. 20

    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.

  20. 21

    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.


↑ Back to top