In the tech world the first of April is traditionally the day that companies announce ridiculous products, like Microsoft's MS-DOS for Mobile, Playstation Flow, and Google's free email service, Gmail. Wait, that last one was real. Whatever. So what can a small company like ourselves do for a laugh on April Fools? The first thing that came to mind was something like Geo for Bootstrap, a nostalgic, Geocities-style theme for Bootstrap. Not a bad start, but how about rebranding the whole Yadda website? We've got an hour and a half. Let's do it!
We knew that however we were going to go about this, due to having limited time to work on it and the fact that it was only up for a day, we probably wouldn't be using the best practices that we usually follow. So the first thing we tried was to just dump the Geo theme on top of our existing code. It was a long shot and unsurprisingly it didn't really work. While our normal site is based on Bootstrap, we've customised it so much that the Geo styles didn't really show through. It looked plain bad, not good bad.
The next thing I tried was to import the Bootstrap variables file from the Geo theme into our Bootstrap SCSS. It was at this point that I realised the Geo theme was built for Bootstrap 2, whilst our own site was using Bootstrap 3. Not only that but Geo was built in LESS and ours in SCSS, so this was going to quickly become tedious. Even after doing some quick alterations (Atom’s multi-line editing feature is great) the variable names themselves didn’t match up either. This was never going to work. There had to be another way.
So it was time to roll up our sleeves and get our code dirty. The first step was to change our main variables and get some nice primary colours in there. The nice thing about doing this is the values are simple - no need to open a colour-picker. It reminded me of coding plain HTML sites back in 1999. I'm using the Pigments package for Atom, so I get a preview of the colours as I'm writing them. This is really helpful. It even looks up variables from other files and they're usually the right ones, too. Super helpful but not entirely reliable.
Ahh, the beauty of 4-bit colour. The next step was to swap out or update some of the SVG files to update our signature wave patterns from their subtle white-on-grey to a beautifully garish yellow-on-blue. Yeah! This is more like it. I can almost hear the modem sounds just by looking at it. Now, seeing as the blink tag has been deprecated, our only option was to implement it ourselves using a CSS keyframe animation.
Now that we had "fixed" the colours and the typography, the images stood out as being too...well...good. We didn't want to update the actual image files as that would take time to process and would be a pain to undo. So a quick solution - use CSS filters! First increase the saturation, add a little blur, ramp up the contrast significantly (600%!) and rotate the hue just a tiny amount. And there we have it - the look of a badly set up analog TV playing a dodgy VHS tape.
Hmmm, if we’re really going for that VHS look we’re missing an essential ingredient – noise. Well that’s easily fixed. Add in an animated gif (haven’t used one of those in a while) as a CSS mask (it is 2016 after all) and there we have it. Beautiful! At this point our designer Chris is looking over my shoulder and getting far too enthusiastic, saying things like “we should keep it”. He decides to make a new logo.
Pretty much the only things that left untouched were the black and white images on the “About” page. The last thing to do was to put it live and put out some messages to Facebook, Twitter and Instagram. The feedback was mostly positive. Some people got the joke…
“How wrong would it be if I said I kind of like it…?”
-An otherwise respected designer
Others politely praised our bold new approach
“New website is crazy fun. It makes me think of Timmy Mallet in a Wacaday stylee and I kinda like that. I commend you on your daring to be different-ness!”
-Someone who’s probably pretty embarrassed right now
All in all a good bit of fun. Here are some screenshots for posterity.