"Read Mode" Button

[Jsum]

I am in the middle of getting my own website launched and I had an idea I am hoping to get some feed back on. I placed a "Read Mode" button in my blog tool bar. You can see it here. At the moment, when you click it it will hide the sidebar and center the content. I will be doing a lot of really long tutorials, if you've read my posts here you know I like to type, so I thought it was a good idea to make things easier to read. 

I am wondering:

1. Is this a completely rediculous feature

2. does it do enough as far as improving readability

Your feedback would be appreciated.

[ndwilliams3 · Accepted solution]

I think it could be useful for long tutorial content. I'd also suggest widening the content block so there's less scrolling and flipping the background and font color, so it's black text on white background.

[mpenn]

Hi! I am looking to implement a similar feature on a landing page that I am working on. Do you mind giving me some insight as to how you did yours? Did you use Hubl?

[Jsum]

@mpenn,

It's actually the same type of javascript that causes a mobile menu to open when the menu icon is clicked. 

You give your content area a base class and style it to be how you want it to be normally, then add a button anywhere on your page that would trigger read mode. Write the javscript to add a "read-mode" class to the content area, and write your css for this class to be how you would like the content area to look in read mode. 

[mpenn]

@Jsum no worries! I did it with the Bootstrap collapse functionality. I was hoping that there was a way to use a boolean with Hubl that could be toggled in a button but I have not been able to figure out how to do that yet

[Jsum]

You wouldnt be able to toggle a boolean because the only way to refresh hubl on a page is to reload the page and there is nothing to keep a variable value across page loads. The best you could do is have it add a query to your url and use that query to trigger the read mode. You can find http variables in the hubl docs.

[mpenn]

@Jsum thanks for the help!

[EricSalvi · Accepted solution]

This is really cool @Jsum.
I like @ndwilliams3 suggestion about widening the reading view. 
I think it would be helpful to keep the Read Mode button fixed when scrolling so someone can easily turn it off without scrolling back to the top and also maybe make the background really dark so the focus is on the text. Like an overlay.

[Jsum]

Thanks @EricSalvi. I especially like the idea of making the button sticky.

[ndwilliams3 · Accepted solution]

I think it could be useful for long tutorial content. I'd also suggest widening the content block so there's less scrolling and flipping the background and font color, so it's black text on white background.

[Jsum]

Thanks @ndwilliams3, I will play around with your suggestions. I worry about breaking the rules of line length readibility  when making the content area wider. Other options would be a table of contents navigaition function, or pagination but these seam like a bit much. Your's is probably the better option. Thanks for the feedback.