Image may be NSFW.
Clik here to view.
I’ve been meaning to learn more about Greasemonkey for years. The ability to customize your experience by executing JavaScript for specific URLs seems to hold out possibilities that I haven’t yet imagined. But I never had a pressing reason to dig into it, until TechRepublic’s recent site upgrade.
I write for TechRepublic on a weekly schedule, and I’m considered the “host” of the IT Consultant blog. So I spend a lot of time on the site, mostly reading and responding to comments from readers. I also read the works of some of the other writers and join in on their discussions. My usability goals therefore include minimizing page reloads and vertical scrolling.
TechRepublic’s redesign helped me in one way: they now offer an “Expanded” mode for discussions, so I can see all responses at once without loading a new page to read each one. I can respond in situ as well, so I don’t lose my place in the discussion. Kudos.
But the vertical space issues pretty much cancel out those benefits. TR made all the fonts bigger, especially headings. As a result, even after collapsing one of the upper sections, real content gets less than half of the screen on my 17″ notebook display without scrolling. They also added a lot of white space between sections, and all sorts of bells and whistles like “featured comments” that I have to scroll over to get to the threaded discussion. Finally, the content area has a fixed width, thus wasting a lot of horizontal space — which naturally pushes more content in a vertical direction.
Time to get up close and personal with the Slippery Simian.
The Greasemonkey script that you can download at the links below applies to all pages on www.techrepublic.com, and accomplishes the following:
- Reduces font sizes, especially for the headers.
- Reduces padding and margins in the discussion.
- Makes three sections invisible: the header, the “featured comments”, and the huge section that only contains a link to the previous and next articles.
- Sizes the left and right sections based on the browser width. Since TechRepublic sends me checks, it would be imprudent for me to suggest that you could modify this to hide the right section completely. I gave it 25% of the width, and allocated 70% to the content (the extra 5% is needed for padding slop so it doesn’t wrap). On really wide screens, that 25% is too much for the ads, but 70% is probably still good for the content.
Naturally, you can adjust all of the above to your own preferences. Some people like the bigger fonts. I don’t.
As you can see in the script, the only Greasemonkey feature I used is GM_addStyle, so all my changes reflect mere CSS adjustments. I could have gone crazy with the DOM, but the result gives me just about everything I want.
Image may be NSFW.
Clik here to view.
