I got an email in my inbox a few weeks ago that caught my eye. It was just a year-in-review newsletter from Codeschool, not much different from other examples of email marketing that fill my inbox. As a rule, these are the sort of emails that, if they’re lucky, get only a cursory glance before they’re deleted. This email, however, caught me in that brief moment with a bright yellow hot-air balloon scooting cheerfully across the screen. I enjoyed the effect, so I took a moment and scrolled through the rest of the email (which was nicely designed: simple, straightforward).
Did this little touch of whimsy cause every recipient to click through to the Codeschool website and convert into a paying customer? Well, while I have no way of knowing their statistics, I do know that this simple detail made me pause. And then investigate. I soon found myself picking my way through the email’s HTML source code searching for the balloon’s origin. Did Codeschool whip up a CSS3 animation? Hmmm…HTML emails are notoriously poor at supporting CSS styling…oh, it’s just an animated gif. I could do that. Why haven’t I thought of that before?
As a developer, this is not an uncommon experience. I frequently come across examples of interesting web functionality that whet my curiosity and encouraged me to dive into the code. Sometimes it’s as simple as discovering an animated gif where I expected a static image, but other times a bit more digging is necessary. For instance, check out this fun example of one company’s team page where the employees seem to watch your mouse move around:
Who, what, how?
Clever presentations like this inspire me. Luckily, most of the content that’s online has its code sitting just a click away, inviting people like me (or you!) to have a look. Applications such as Chrome Developer Tools and Firebug can help prise the lid off of the web and uncover the inner workings of interesting sites and features. A simple right-click (or a press of the F12 key) will show you the HTML code that makes the website happen, the website’s cogs if you will.
Take your favourite website for a spin
I love getting into the code to understand how another developer approached problems and sought creative solutions. Why not give it a go yourself? Take a peek at what makes your own website tick. And if all the code looks like gibberish to you why not take a spin on Codecademy’s fun and free HTML & CSS introduction course?
If nothing else, knowing a bit about what’s going on will add to your appreciation of the internet.