I recently had some free time on my hands to address some issues with the theme of this site, and one issue I had been meaning to address for a while now was the lack of share buttons for social media.
Now, I don't think the site's lack of share buttons is a barrier for readers to share my posts and I doubt they will get much use, if any, but I had two reasons for adding them. Firstly, I originally created this site so that I could play around with designs and ideas I had. Secondly, without adding the buttons I don't have any metrics to evaluate their usefulness. Just speculation.
So with only limited time I thought the easiest option would be to just add a 3rd party service such as AddThis or ShareThis and be done with it. Right? Well not quite, they do have their disadvantages:
- Script execution and multiple network calls by plugins can have a huge effect on performance and page load times.
- By including any third party resources on your site, you are exposing you users to the potential of being tracked across sites and some of the sharing plugins can be the worst tracking offenders.
- Add blockers such as Ghostery and Ad Block Plus are gaining in popularity, especially with tech users. Both can easily block the common sharing services.
- I didn't want to display the sharing buttons on mobile devices.
- They're ugly, enough said.
Fortunately, all the most common social networks provide API calls that can be invoked as simple HTML links. No performance hit, no tracking and usually not blocked.
Designing share buttons
My instincts for the design was to use the white space to the left of the page body. The existing layout already used this space to display the publish date and I thought I could continue the circle theme by placing circular buttons below.
The design was simple enough so I quickly mocked it up straight into the existing template with some basic HTML and CSS.
Immediately I could see that the bold colours of the icons were too predominate against the, fairly minimalist, design. It didn't work. Even by reducing the size of the buttons to 50px they were still too distracting.
However, I did like the position of the buttons so I wanted to see if I could reduce the impact and align them with the overall theme a bit more. Changing the background colour still made the buttons too distracting from the content body but hollowing them out reduced the impact significantly. By adding the brand colours back I had come up with some skinny buttons that fitted in nicely with the existing design.
The skinny buttons were a good fit for the site theme but by removing the bold brand colours I had made it more difficult for users to recognise their functionality. Coloured sharing buttons are ubiquitous on the web. Familiarity makes it easier for the user to achieve what they want. Granted, this probably wouldn't be such an issue with my target audience but it was a compromise I didn't like. I felt the buttons had lost their brand identity.
I was back to where I began. I wanted the functionality of the buttons to be instantly recognisable but I wasn't prepared to sacrifice the simplicity of the site theme or dedicate a relatively big part of the site to another site's branding.
This exercise was to only test out some ideas and I didn't believe the buttons would get enough clicks to justify the design so I considered leaving the buttons off the page altogether.
As I had some time left, I wanted to try one last idea before I finished.
Inspired by Google's Material Design Speed Dial buttons, I included a primary 'share' button and modified the original buttons to be hidden. Adding a CSS hover to reveal the sharing buttons (more about that later).
I was satisfied this was a good compromise. I had managed to add the original buttons with strong associated branding while maintaining the integrity the site's design.
Mobile and touch screens
As mentioned before, I had no intention of displaying the sharing buttons on mobile devices, so I wrapped the whole thing in a CSS media query so that it was only displayed on devices wider than 1192 pixels. That is the width at which point there is enough white space on the left to display the buttons.
But what about touch devices? The hover functionality wouldn't work on touch only devices with a high screen resolution so I added a simple jQuery script to show/hide the dials on click/tap.
Overall I was happy with this design but there was still one thing that was bugging me.
"Share this, trust me it's awesome!"
By positioning the share button at the top of the post's body I was asking the reader to share my content before they had even read it. The reader would have no idea whether my content was something that they would want to share with their friends. That's a big ask. If I was going to persuade anyone to share my post then I would have more of a chance after they had at least read it.
And that is part of the reason I originally liked the positioning. The white space down the left hand side provided an ideal column to make the share button "sticky".
By adding a simple waypoint, I was able to fix the position of the share button when browser is scrolled down and another to automatically open the dials when the bottom of the post is reached.
This makes the share button constantly accessible at all times while reading the content. The user is then subtly reminded to share the content by the animated opening of the social links when the bottom of the post is reached.
Now I've just got to wait for the statistics to see whether the share button is worth keeping. Until then, let me know what you think in the comments, any constructive feedback is always appreciated.
For those that are interested, the source code and demo for implementing a Material Design Floating Action Button Speed Dial are on GitHub.