August 13, 2014 | Sarah Danks
We all know social media’s “where it’s at” today. Straight from the horse’s mouth: even if you don’t think it’s an important part of online marketing, content marketing, or whatever-type-of-marketing you do, it is.
(So best get on the bandwagon and start having a social media presence. Because, like it or not, it’s here to stay.)
But, there’s a fine line between suggesting people share your online content and, well, blatantly screaming at them SHARE THIS LIKE THIS TWEET THIS DO IT DO IT NOW!
Case in point: I was interested in reading a blog post that would tell me how to pump out half a year’s worth of blog ideas in less than half an hour. Sweet! I clicked on the link from my Twitter feed and started reading…
…only to realize I wasn’t going to be able to read this article very easily, since there was this, THING, in the way of the text (not to mention a glaring grammatical error):
What the heck?
Sure, it’s a scrolling social media share bar. No biggie. Except it’s floating directly over the left-hand side of the article, blocking text as it goes. See?
Oh, and detrimental to the blog, as far as I’m concerned, since I didn’t bother to attempt reading the article — sorry, I shouldn’t have to hunt around for the ideal location of where the share bar is in relation to the text I’m trying to read.
Nope. I’m too lazy for all that.
But wait. Back up the horse — you’re rolling your eyes right now, aren’t you? You’re thinking, “you dumb blonde, all you hafta do is increase the size of your browser and the share button will move farther to the left. duh.”
*Sigh* FINE. I’ll widen my browser — which, by the way, is taking up half of my 27″ iMac — just to humor you.
Okay, okay, fine, you win.
Or, do you? Sure, I’m working on a computer with a hefty screen. I should have my browser at full scale all the time, right? Wrong. I’m busy. I’m doing this and that and the other thing. I’ve got two separate browsers open, each taking up half the 27″ screen (Chrome on the left, Firefox — don’t judge me — on the right).
But, just because I HAVE all this screen real estate, does it matter?
More importantly: why’s this STILL an issue? As in, why aren’t people testing their sites — and all features within it — on different “sizes” of browsers? Oh, and let’s not forget to mention other devices…for instance, check out this same blog post on my iPhone:
SERIOUSLY? This is a horrible user experience. The odds of me attempting to read this article — much less share it on any of the social venues listed on this annoying share bar — are slim to zero. Regardless of device.
Again, I ask you: why, in the year 2014, are we still running across websites/blogs that don’t offer visitors of all devices a good user experience? Not only should everyone be creating websites with responsive web design; they also need to be testing them across all sizes/types of browsers and devices to ensure optimum usability.
The question they should be asking themselves is simple: “Does everything on the site work all the time?”
Sure, on my iMac I can just increase the size of my browser for optimum readability (again, keep in mind my browser takes up HALF of my 27″ screen)…but what about my co-worker who works on a laptop? Well, here’s HER view — as expanded as she can get on her small 15″ screen:
She said she sees this type of thing all the time (i.e., annoyingly floating social share bars), and rather than try to work around the blocked text, she simply hits the “back” button. It’s just not worth her time to hunt around for the ideal scroll placement so she can see the content.
I’m not trying to kick this one blog — I have nothing against them (minus the annoying nature of their floating social share button). Instead, it’s my hope that blogs/websites realize their layouts have to look good — and offer up a good user experience — no matter the size of the browser or which device is being used to access the content.
And you can definitely include social share buttons on your site — that’s not my issue. The problem is when said share buttons aren’t taken into account when the design changes to accommodate different resolution/screen/device sizes.
News flash: just because the share buttons are way off to the side of the blog when your designer has the browser open across his/her massive screen doesn’t mean they’re going to stay there for someone viewing the same article on their laptop. Or their smartphone.
Social Media Share Buttons: You’re Doing It Wrong
Do Not Pass Go, Do Not Collect $200
Let’s take a look at some other websites that don’t quite get it (yet).
Not too big of a deal, but I noticed on the ShareThis support sub-domain they have a floating social share bar:
No biggie (again, this browser is taking up half of my 27″ screen). Share This (please). And then I minimized my screen…
Cue Cleveland falling.
Here on the Danny Brown blog, he starts off with very unobtrusive social share buttons:
But, we start to have issues once the screen is minimized down to what it’d look like on a laptop:
This is a blog I really respect…
…but their design doesn’t “readjust” when the browser/screen size is diminished; it merely shrinks overall (read: not responsive).
While the floating social share button doesn’t cover up the copy, the entire page becomes very hard to read on a mobile device — especially a smartphone:
Okay, okay, so that’s not what we’re discussing here. Oh, but when I enlarge the post to be able to read the itty-bitty print, that pesky social share bar (using fixed or absolute positioning) is now completely in my way.
GAH! Another one.
Obviously the Wordstream website is built to cater only to desktop devices. I’d like it if they’d consider responsive design.
Here’s an interesting article on findandconvert.com about improving website performance:
Looks good — I especially like the pops of color (that’s right, I said “pops”). But, then I minimized my browser size…
…and found myself here yet again. I love how that oh-so-annoying social floater covers up the headline talking about a good user experience.
Yeah, yeah, it worked “just fine” on half my screen, but then I went ahead and CHEATED by shrinking my browser to FORCE this issue! How dare I.
And yet — and yet the experience on a mobile device suffers just as much:
Think that’s the last thing you’d expect to see on a blog post talking about user experience?
Try THIS on for size: here’s a Shareaholic blog post specifically about — wonder of wonders — how to customize floating share button positions!
Of course, on a blog post that’s telling us how to work with social share buttons, I’d expect no less than that they’re perfectly placed. But, I still had to minimize my screen just to be sure.
And then, and THEN things got ironic:
Yikes. Notice how this screenshot is from the iPad — on my desktop I saw how that pesky social share bar covered up the left-hand side of the content when I scaled back my browser, but I wanted to view this particular content on a smaller device just to be sure.
So yeah. I love Shareaholic but I’m somewhat disinclined to heed their advice on how to correctly position floated share buttons after seeing this.
And, I mean. C’mon. How can I NOT razz them for this?!
Social Media Share Button Wins
Bank Error in Your Favor, Collect $200
Now, what about some of the floating social media share button users who’re doing it correctly?
Here’s an article from the ConversionXL blog. Notice the floating share button off to the left (this browser view is, per usual, half of my 27″ screen)?:
Nice! It’s off to the side, doesn’t cover any content, and isn’t obnoxious. But, what happens when I minimize my screen? <nervously biting fingernails>
BAZINGA! Lookit that magic. </nervously biting fingernails>
What a concept — knowing that as their visitors’ browsers/devices get smaller the left-hand floating social share bar would become an issue, the folks over at ConversionXL said, “let’s make sure this experience stays positive for everyone, regardless of device” and moved the entire bar to the top of the article.
I love it.
You get a gold star for the day, ConversionXL!
Here’s another blog — this one’s Woorank — that does it right (original was a left-hand floating button; when minimized it changes entirely).
And Camera 2:
Well done! Thanks for not annoying me.
Let’s take a look at another, shall we?
Recently Search Engine Land got a makeover — they went responsive!!! — and apparently added social share options:
And in the process they made sure their social media bar wasn’t obtrusive:
This is just all kinds of awesome sauce.
Here’s Crazy Egg’s blog:
They take a different approach for smaller devices/minimized browsers — they eliminate the social share bar altogether:
While not maybe ideal for the sharing aspect, I’d rather a site eliminate the social share options than risk having the buttons cover up content I’m trying to read.
And, in honor of Left Handers’ Day — and to demonstrate it’s not just marketing websites that can get it right — the pièce de résistance…
BOOM. Now that’s how you handle social media share buttons (and yes, it works on mobile devices, too. Damn, those lefties are in their right minds!)
So, yes, social media is important — and getting people to share your content upon those venues is hard. I get it.
It seems there are lots of social share button plug-ins for all the various platforms out there. Or you could have your developer work their own code, I’m sure.
Either way, if you’re adding floating/scrolling share buttons, please, PLEASE ensure they’re not creating awful user experiences for your multi-device users. And/or those of us who have big-a$$ screens but prefer to have lots of stuff open at once…
…and for those of you mentioned here: you don’t learn anything the SECOND time the horse kicks you in the rear!