4

I'm currently in the middle of a re-design for a mid-market newspaper's website, and for each article there's a "Continue reading story >>" link after the lede paragraph on topic pages and the home page.

Our design is going to be fully responsive, for desktop and mobile, and by accommodating these "read more" links, we're adding a lot of extra scrolling for mobile readers. I also dislike the repetition of the same unit of content 50+ times on the same page.

So I ask, should I have "read more" links in my responsive design, and what other alternatives exist?

Improve this question
4
  • Is there a reason you couldn't just hide the text for mobile users?
    – cimmanon
    Jan 7, 2014 at 18:46
  • No. In the absence of other answers, that's likely what I'm going to do.
    – Dan Gayle
    Jan 7, 2014 at 20:16
  • FYI, using the same 'Continue reading story' text for every link is also not very accessible.
    – DA01
    Jan 8, 2014 at 2:30
  • DA01: I agree, it doesn't add any unique information. But I also don't want to repeat the title text everywhere either.
    – Dan Gayle
    Jan 8, 2014 at 18:05

4 Answers 4

Reset to default
7

Perhaps in this situation a CSS text-overflow ellipsis may suffice. There are several additional possibilities for indicating the article summary is clickable. Check out the right hand side of https://svbtle.com/ . I am a big fan of making the entire summary clickable to expose the rest of the content, not just the title. For desktop designs you can change the color of the title to indicate action on hover. For mobile devices where hover events cannot be detected, you could implement a title color change on whichever article is closest to the middle of the screen.

Article summary highlight

Improve this answer
1
  • 1
    I like this option a lot
    – Dan Gayle
    Jan 8, 2014 at 18:02
2

As long as your titles and images link to the full version of the article, it might not be the biggest deal to leave off a "Read More" link.

That being said, it might be nice to have a visual separator between articles while scrolling vertically. I imagine the mobile experience would display:

  • Title
  • Image
  • Intro Text
  • Title
  • Image
  • Intro Text

So if you had a "read more" icon of sorts between the articles, if would be functional on two levels.

Improve this answer
3
  • That's a good point. Currently I have a hairline in between stories, but with this I might be able to kill two birds with one stone
    – Dan Gayle
    Jan 7, 2014 at 22:37
  • 1
    As per usability practices, it not advised to link titles to lead the user to full text. That is why need of having a "Read More" was felt and adopted.
    – Salman Ehsan
    Jan 8, 2014 at 8:31
  • @Salman please references or it didn't happen ;)
    – Davi Lima
    Aug 5, 2015 at 17:49
0

In mobile environments, the bandwidth and screen estate are two key items. I think that you are facing two problems:

  1. Using "read more" links will make the browser do another request, loading again the entire page with the new content.
  2. Not using "read more" links will make the browser loads a ton of useless content.

In order to overcome those problems, you could use a "read more" button that will load asynchronously the content in the same page, displaying it below the excerpt of the article.

Improve this answer
5
  • Either way an HTTP request is needed to load additional content. If the stylesheets are cached you shouldn't see that much of a bandwidth difference whether or not you load the content via ajax. If you do load the content with ajax you run into additional problems. The SEO hit is that it's a lot more complicated to get google to index the content. The usability hit is that loading the content with ajax will break your back button.
    – circuitry
    Jan 8, 2014 at 2:28
  • If you do decide to load content via ajax, you can use a library such as sammy.js to deal with browser history and indexing which will kill two birds with one stone. But implementation is more complicated. If you're really looking for a speed boost you could preload the content as you scroll/read summaries and use sammy.js for indexing/browser history.
    – circuitry
    Jan 8, 2014 at 2:29
  • I think that is worst to load and render again all the page that just render some portion. I don't see a problem with the back button, because the user won't be changing all the content, but expanding it.
    – IAmJulianAcosta
    Jan 8, 2014 at 6:04
  • I guess it depends on the average size of the articles. If the articles are just small snippets I suppose you could display the articles inline. But since this is a news website I'm assuming each article will have its own page, if only for sharing purposes. You can do this with ajax though it's a bit more complicated (developers.google.com/webmasters/ajax-crawling/docs/…). If the developer correctly implements caching most content (images/CSS) should load pretty quickly, and most mobile browsers cache content automatically.
    – circuitry
    Jan 8, 2014 at 8:04
  • Also, the biggest bottleneck in page load speed is the number of concurrent HTTP requests. If care is taken (as it should be) to use cached CSS sprites/data URIs and minimized/combined javascript (requireJS) page load time should be quick.
    – circuitry
    Jan 8, 2014 at 8:07
0

Okay this is a new approach and I am not sure how it would be taken generally but as far as UX is concerned, it doesn't compromise basics.

enter image description here

Idea is simple, don't make Titles of the news items clickable as it is a bad UX practice. As you don't want to use "Read More" or "Continue" links, may be you can make the last word of the news item a hyperlink but with ellipses so it is perceived as a sign that there is more to follow after that.

However I have another concern which is about SEO. Hyperlinks are important SEO elements and Google tries to learn about your content through them. Having last elements of post as hyperlink would mean unimportant and random words getting the hyperlink and thus you will end up producing SEO noise. On the other hand, standard words like "Read More" and "Continue" are used everywhere and google would ignore their higher density and focus on other hyperlinks but in this new approach Google wouldn't ignore such hyperlinked words.

Improve this answer
7
  • 3
    "don't make Titles of the news items clickable as it is a bad UX practice" Why is making titles of news items clickable bad UX practice? Every single news website I know about utilizes this practice. See: slashdot.org, digg.com, reddit.com, nytimes.com
    – circuitry
    Jan 8, 2014 at 9:11
  • 1
    SEO is complicated and multifaceted. I think probably URL structure, page title, backlinks and content play a much bigger role than link words. However since all aspects of potential SEO benefits should be considered you could add alt tags to the links to tell google what's important about the link.
    – circuitry
    Jan 8, 2014 at 9:14
  • Also, small text links are not desirable in mobile UX if they can be avoided. Reference: developer.apple.com/library/ios/documentation/userexperience/… "Give tappable controls a hit target of about 44 x 44 points." IMHO, it's better to click either the entire summary to move to a detailed view, or at least the title since the tap point is larger than a small link.
    – circuitry
    Jan 8, 2014 at 9:18
  • 4
    How is it a bad UX practice? I believe common convention (nowadays) is to make images and titles link to the full story or a more detailed page. As @circuitry said, many big news sites make use of it and during usability testing I see a big trend where people click on images and titles. In mobile design I can see the value of making the entire area clickable so there is less chance for error. Therefor, restricting further navigation to only the 'read more' buttons seems like bad UX to me.
    – Paul van den Dool
    Jan 8, 2014 at 10:09
  • 1
    Funny, one of the reasons I don't like "read more" links is because I used to be an SEO guy, and that was one of the deadly sins. I do like this approach that you suggested here though.
    – Dan Gayle
    Jan 8, 2014 at 18:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.