Share Your Work

Jsum
Key Advisor

"Read Mode" Button

SOLVE

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
ndwilliams3
Solution
Key Advisor

"Read Mode" Button

SOLVE

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

EricSalvi
Solution
HubSpot Employee
HubSpot Employee

"Read Mode" Button

SOLVE

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
mpenn
Participant

"Read Mode" Button

SOLVE

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
Jsum
Key Advisor

"Read Mode" Button

SOLVE

@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
mpenn
Participant

"Read Mode" Button

SOLVE

@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
Jsum
Key Advisor

"Read Mode" Button

SOLVE
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
mpenn
Participant

"Read Mode" Button

SOLVE

@Jsum thanks for the help!

0 Upvotes
EricSalvi
Solution
HubSpot Employee
HubSpot Employee

"Read Mode" Button

SOLVE

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.

0 Upvotes
Jsum
Key Advisor

"Read Mode" Button

SOLVE

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

ndwilliams3
Solution
Key Advisor

"Read Mode" Button

SOLVE

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
Key Advisor

"Read Mode" Button

SOLVE

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