Buffer’s Button Height and matchHeight.js
Unless you’ve been living under a rock, in a cave, on an island (on Mars) for the past few years, you know about Buffer and how awesome it is. But at risk that you’re someone who has been too distracted by cat videos to pay attention to the world wide web around you, I’ll tell you what exactly Buffer is and does, in eloquent bullet-list form:
- Buffer is awesome!
- Buffer lets you schedule content sharing across numerous social networks. This of course includes the big players like Twitter, Facebook, Google+ and LinkedIn.
- Most, if not all, of the limitations you might find with Buffer can be answered with their very affordable Awesome Plan, which includes additional social profiles and more.
- Buffer is well known for their transparency, including revenue and employee salaries.
- Buffer has one of the greatest content creation strategies of all time, only it might not be a strategy at all. Basically, they provide valuable content that may or may not have anything to do with their product. (Marketing expert and CMO of Zula, Hillel Fuld, talks about it here.)
- Buffer offers a simple tool that you can install in any browser. It will place a “Buffer” button in your social network’s interface, such as next to your “Tweet” button on Twitter’s web interface.
Like all companies, Buffer will run into issues with it’s product and service here and there. They have an exceptional support team to lead their users and customers through these instances, but that doesn’t mean certain things won’t fall between the cracks.
In a fit of “Designer OCD”, I noticed an issue with their button height. In both Safari and Chrome (I’m more of a Chrome user, but open Safari on occasion, saving FireFox and IE for testing purposes only), I noticed their button height didn’t quiet make it. You’ll see in both screenshots below that the button height is so close, yet not close enough.
My first move was to start playing with the CSS classes in the browsers’ dev tools. My goal was to find the perfect height (or some combo on min-height, max-height and height), but after a few minutes I realized it was a bigger deal than I thought. Makes sense, I’m sure the guys over at Buffer have thought of this before.
matchHeight, in theory, would look for a different element on the page – in our case the “Tweet” button – calculate it’s height and then assign the same height to our Buffer button. Now, I don’t know if matchHeight is really the answer or now (and part of me doubts that it is), but I do think this idea can help set this button height dilemma on the correct path.