I have a question that I would like your help with. I am creating a responsive website with readable content that has an 'In this page' section and 'Related content' section. Is there a best practice or a pattern to show these two sections in mobile? Thanks in advance for any advice give.

enter image description here

enter image description here

  • 1
    Would the reader want to access “In this page” before or after reading the main content?
    – Izquierdo
    Commented Jun 2, 2021 at 3:23

2 Answers 2


Assuming, that the «in this page» section contains a short description of the content of this actual page (maybe even with anchor links) this section should definitivly be in the beginning of the page. Reason: This gives the user a short introduction and makes it easier to decide for the user if she is on the right page. Having this section at the end would nod provide any benefit since the user already scrolled through the whole content.

Releated content on the other side is something that can be accessed via other means like navigation or overview pages etc. So (again assuming) the related content section is not a navigational element but meant to provide further content that has to do with the actual content the user is already interested in. Related content should therefore be at the end of the content. This way the user has the possibility to access this content without having to go back to navigation.

What you could do (if the «in this page» section is anchor links) is to have a linkt that goes directly to the «related topics» section.


After the main content. Always.

You can't relate things to nothing, things are related to a main object, so the main object should be the first thing your users see. This question is very easy to test: just visit any blog or e-commerce site and you will see that the related content is in the only logical place, which is AFTER the content it refers to.

If you mean only those 2 sections in the sidebar, the answer is the same, but the explanation is different: one of the elements explicitly says "in this page", which means that the content in that section is related to the page the user is reading.

The other section is an extension of the information for people who need or want to know more about the topic and/or related topics, but it is NOT the topic itself, just an addition.

Finally, from a structural point of view, it's usually the stacking order for most pages in desktop, and in your example it certainly is, so you shouldn't do anything special, it will follow the natural stacking order without any problems

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.