What do I do to take advantage of Reader Mode in browsers to present a simplified, cleaner version of a web page?
I've used Google looking for information on how a page is coded or otherwise set up for reader mode and I have not found anything. Is there a document or web page somewhere that explains reader mode and how to set up a page which can take advantage of it?
There are no standards for how reading mode works, and it works quite different from browser to browser. You can help ensure reading mode works well with your sites by sticking to conventions for your document title, and providing certain metadata elements. I’ve documented this in detail here.
In theory: Do nothing.
Site authors generally don't like Reader mode - it hides their adverts, and throws away the design. It is designed to work in spite of sites and not require specific effort on their parts.
That said, it is more likely to work well when given high quality, well-structured markup.
Write valid HTML. Make use of semantic elements such as <main>, <nav>, <header>, <footer>, <h1-6> and so on.
I think the essential thing is not only to use valid HTML, but to use HTML5 with everything it provides to structure a text semantically: <section> to have clearly seperated parts, <article> if you have thematically independent parts (like different blog posts / articles), <header> to clearly mark the header section, <h1> to <h6> for hierarchically different headers (where you should always be careful to never omit a level, i.e. for example not have an h4 directly in an h2 section, always use nav for navigation menus etc., paragraphs, lists, footers and so on...
BTW: <div>s don't have any semantic meaning, so you can use these (together with class attributes) to do whatever to tweak the result visually for "not-read-mode".
Have you read this? https://mathiasbynens.be/notes/safari-reader Here are the conclusion notes taken straight from the website
Conclusion
This definitely needs more investigating, but so far, these appear to be the most important factors for Safari’s Reader functionality to kick in:
Use the right markup, i.e. make sure the most important content is wrapped inside a container element. Whether you use article, div or even span doesn’t seem to matter — as long as it’s not p. The content needs to be long enough. Use enough words, use enough paragraphs, use enough punctuation. Every paragraph should have at least 100 characters.
Reader doesn’t work for local documents.
