On my website, I have a bunch of articles. They have a little bit of meta information (currently only the date of writing, but perhaps also tags) and sometimes a abstract. I want to give the reader the chance to decide whether reading the article is not worth their time quickly. So it is especially not a teaser text.

Until now I have this right under the heading, like in the following screenshot:

enter image description here

I have added the sidebar to hold the local table of contents. Today I thought that it would also be a reasonable thing to put all this meta information into the sidebar as well. This is what I have tried out:

enter image description here

Just from looking at it, it looks nicer and more balanced. However I fear that a reader will not see the summary before diving into the article. On the other hand, the abstract gives things away, so it might not make much sense to read it if one reads the full article anyway.

On mobile, the sidebar will go below the article, therefore the abstract will be rather useless. With some CSS trickery I could probably get the sidebar to be above the article on mobile, then it would be useful again. However, these things would then be above the heading.

It is just a personal website, I don't see I would be able to to blind A/B testing or something like that. Also I fear that this question is rather opinion-based. Therefore a somewhat objective question could be: Will readers notice the abstract on the side or should it be kept directly above the article?

  • 2
    Non-scientific answer: the second one looks way better.
    – Alan
    Commented Aug 21, 2017 at 21:28
  • As long as the information is presented in a way that makes it fairly obvious what you're trying to do then I don't see a problem. To solve the responsive issue, rather than 'moving' the text to the sidebar, you could simply 'repeat' the text in the two places and then hide/show the correct one when necessary. Commented Aug 22, 2017 at 7:45
  • 1
    I think that the standard way that people expect to see is the first one, i.e. the abstract section above the text. It is also more suitable for you goal - you want the user to see it first before he is reading the whole article, and he won't look for such info in the sidebar.
    – Hagai
    Commented Aug 28, 2017 at 11:26
  • Using the abstraction above the article is also the way most (scientific) reports are written, to my knowledge. When I was scanning this page, and the images you posted. I didn't had a preference for either one, I did ignore the entire sidebar though. Commented Jan 3, 2018 at 9:59
  • 1
    The second option is much better for web-based content. The Summary section would be a good candidate for the HTML5 <aside> tag, see w3schools.com/html/html5_new_elements.asp for more details. Commented Jun 2, 2018 at 13:34

3 Answers 3


How about placing the "Abstract" title above the abstract text to make your first option look more balanced. For the date you could just remove the "Date" label and put in a more readable date format like "August 23 2017" or whichever format you prefer. Removing the "Date" label would also serve to simplify the UI. These are just some suggestions.



I think summaries should be right at the top of the main content.

This is the logical first place a user will start to read making it un-avoidable.

This method also follows the inverted triangle theory of providing the most useful content first.

This nielsen norman article shows you a good example and the argument about writing your content that way.

enter image description here


If you are going for the academic approach, the abstract should always be above the article. This enables readers to go straight for the content rather than look to the abstract in the sidebar where it should not be.


When used, an abstract always appears at the beginning of a manuscript or typescript, acting as the point-of-entry for any given academic paper or patent application.

Example #1 Academia.edu

enter image description here

Example #2 ncbi.nlm.nih.gov

enter image description here

Your Answer

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

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