website design - How to handle lots of legal text (40k words) on a webpage (also mobile)

I want to redesign the guideline (rulebook) page of my sport association. The problem is that its a legal document which contains a lot of text (around 41.000 words) with a lot of (sub)headlines and chapters, currently just plain html. Not very neat.

Its based on a PDF and because its a legal document I cannot rearrange the chapters or separate it.

Im now looking for a solution to make it a little bit more usable / readable. I understand that I will not get an AWESOME user experience with so much text...

Does anyone of you have tips how to handle a lot of text on a page or can show me examples where its handles very well?

First approach:

Today I noticed a bootstrap site does this really nice on this page: http://getbootstrap.com/getting-started/

I like their sidebar solution, the problem is just, when switching to a mobile screen resolution, the design just adds the sidebar to the bottom, which makes its completely useless.

Answer

I would consider creating a set of FAQ questions that link to the specific legal section. This will make the mass of legal information accessible, as the FAQ can use common language to describe a situation and act as a 'translator' for locating the legal jargon equivalent.

You may need create a semantic link between the common language and specific legal jargon - eg. 'What if a ball is passed backwards?' -> 'See section 3.2.5 Traversing of ball in opposing direction of play' Where the link is the section heading.

Technical Considerations

• Split the doc by at least top level sections into separate html pages. For mobile this will decrease the download and formatting time required to show the page


• Consider the frequency of updates. If this is something that can be set and forget then a manual method of formatting can work. You may consider a model to produce both the PDF and web pages from a single source if updating is frequent

One trend of late has been to try and iconify or otherwise provide a brief, simply phrased version of a vast legal tomb. Again it is in the interest of engagement and providing a lower barrier to entry. Have a look at: http://tosdr.org/ and https://about.pinterest.com/en/terms-service as examples.