I don’t like Twitter threads. I don’t like putting my content on a commercial platform that way where I’m the customer. BUT…I wrote a thread today and it got a lot of engagement. So it turns out they work.
But I don’t want my content JUST sat on someone else’s servers. So I’m copying it here.
Here’s a thread designed to help non-web people understand how something that seems trivial on a website can lead to so many micro-decisions needing to be made.
I need to add social sharing buttons to a website…
First of all, I could use a plugin. But most of the plugins for social sharing are terrible. Many use third party services with tracking. They often can’t be styled to match the site. So I’m not going with that approach.
I could use standard buttons from the social media platforms themselves, but, though are nice to use and have good user interfaces, they are basically hidden tracking tags for the social networks. And they can’t be styled. So I’m not using them either.
So I think I’ll use the basic sharing links, which aren’t quite as nice to use, but no-one uses these things anyway (Do they? Why do we have these buttons at all? Are they even needed?). I can generate those at http://sharingbuttons.io/
Now I have to actually add the icons themselves. We don’t use standard fixed-resolution images (jpg or png files) these days. So we’ll use some kind of “vector” that will look nice on any screen. I could use inline icons with SVG or an icon font like FontAwesome.
But I don’t want to include the WHOLE of FontAwesome because it’s full of icons and code that I won’t use. (Unless I already am including it on this project for some reason. Am I? No, I’m not. OK.)
And, actually, my links have text in and I’m using a CSS text-hiding technique to not show it. So I can’t use inline icons. I’ll have to use a positioned CSS pseudo-class. That works best with FontAwesome and the like but I think I’ve ruled that out for bloat. So…
I think I’m back to using SVG. Probably positioned using CSS with the icon as a background image. So I need the icons as SVG’s. Sure I can find them somewhere. Ah! http://sharingbuttons.io/ includes them. Hurrah! But they’re inline and I don’t want inline.
So options are:
– put each SVG in a separate file
– use an SVG sprite
– insert it directly into my CSS styles somehow
Each of these has pros and cons.
SVGs in separate files are maybe fine if you’re running HTTP2 on the web server which needs HTTPS as well.
But I don’t really want lots of separate files.
SVG sprites (which have more than one image in a single image file and you only show the bit you need) can be done, but it’s ugly.
So including in my CSS seems like the favoured option.
(I’m sure this is what I normally do, but I seem to go through this process every time. This thread is partly me documenting the process for the next time I go through it. Thanks for bearing with me.)
Aside: My office mate is reading. We have agreed that front-end development is…a word that I won’t use. Oh how simple it was when you just inserted a image.
But all these “retina” and “3x” devices came along, which is what “vector” graphics are great for.
Needs must!
Right, so I’ve got the SVG code from http://sharingbuttons.io/. All I need to do is encode it in BASE64, and stick it into my CSS – probably (as I’m using SASS) as a handy variable or mixin.
Of course, the downside of this is that I won’t be able to re-style the icon as a different colour if I need to. But I THINK I’m only using them in white on this site. Hmm.
Oh well. Off to Dan’s Tools to encode the icons. https://www.cleancss.com/base64-encode/
So there we go. “Just” adding sharing buttons. Simple, huh?
Hopefully that’s given some insight into the mind of a web developer.
We have to think of future-proofing, performance, hi-res displays, privacy, accessibility, security, user experience & more!
Ta for reading!
Note: this was the end of the thread, but then…
Actually, I just found a better way. In this case I CAN inline the SVG in my HTML and then use CSS to absolutely position it thus avoiding the text-hiding. I could probably avoid the text-hiding with an icon font this way too. You learn/figure out every day on this job!
Also, it wasn’t my intention to share this when I started, but if this has been of interest & you want to know a bit more about how people like me have to think about what we’re making, I did a fun, fast-paced talk on User Experience a while back.
https://www.youtube.com/watch?v=XskEx1b9n9g