"Read Mode" Button

SOLVE
Highlighted
Esteemed Advisor | Partner

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.

2 Accepted solutions

Accepted Solutions
Highlighted
Solution
Regular Advisor

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.

View solution in original post

Highlighted
Solution
HubSpot Employee

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.

View solution in original post

0 Upvotes
9 Replies 9
Highlighted
Solution
Regular Advisor

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.

View solution in original post

Highlighted
Esteemed Advisor | Partner

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.

0 Upvotes
Highlighted
Solution
HubSpot Employee

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.

View solution in original post

0 Upvotes
Highlighted
Esteemed Advisor | Partner

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

Highlighted
Occasional Contributor

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?

0 Upvotes
Highlighted
Esteemed Advisor | Partner

@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. 

0 Upvotes
Highlighted
Occasional Contributor

@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

0 Upvotes
Highlighted
Esteemed Advisor | Partner
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.
0 Upvotes
Highlighted
Occasional Contributor

@Jsum thanks for the help!

0 Upvotes