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?

Dan Gayle
  • 303
  • 2
  • 12

4 Answers4

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

circuitry
  • 3,010
  • 1
  • 12
  • 11
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.

avi
  • 318
  • 1
  • 7
  • 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 07 '14 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 08 '14 at 08:31
  • @Salman please references or it didn't happen ;) – Davi Lima Aug 05 '15 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.

IAmJulianAcosta
  • 2,372
  • 1
  • 15
  • 23
  • 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 08 '14 at 02: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 08 '14 at 02: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 08 '14 at 06: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 (https://developers.google.com/webmasters/ajax-crawling/docs/specification). If the developer correctly implements caching most content (images/CSS) should load pretty quickly, and most mobile browsers cache content automatically. – circuitry Jan 08 '14 at 08: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 08 '14 at 08: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.

Salman Ehsan
  • 4,951
  • 20
  • 25
  • 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: http://slashdot.org, http://digg.com, http://reddit.com, http://nytimes.com/ – circuitry Jan 08 '14 at 09: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 08 '14 at 09:14
  • Also, small text links are not desirable in mobile UX if they can be avoided. Reference: https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/LayoutandAppearance.html#//apple_ref/doc/uid/TP40006556-CH54-SW1 "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 08 '14 at 09: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 08 '14 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 08 '14 at 18:04
  • @Paul,

    There are several reasons for not making Headings as hyperlinks leading to detailed article. 1) First, you read heading and move your eyes down further to get details. Linking headings to further details would mean user coming back to the point where it had started and this compromises natural reading flow. 2) Hyperlinks must be self-evident and seen as click-able. If headings are click-able having hyper-link style, they break constancy with other headings and if they don't appear click-able, you don't get a clue if they are click-able. 3) Headings never explicitly say "read-more".

     – Salman Ehsan Jan 10 '14 at 01:59
  • @Salman perhaps user behaviour differs in the case of article heading being clickable. During user testing I've performed, my test subjects wanted to click category titles under which clickable sub categories were sorted. For some it wasn't clear under what subcategorie the product they were tasked to find belonged. These titles didn't have any visual aspect that would make them look clickable, the subcategorie screamed clickable. This makes me believe people expect the title to be clickable despite your valid argument. – Paul van den Dool Jan 10 '14 at 07:27