The Most Fun You’ll Have at a Cage Fight

August 12, 2014

A website I built to promote a book I wrote, The Most Fun You'll Have at a Cagefight. Check out the site for yourself

Layer 1

Full disclosure: I take every opportunity to brag that I wrote a book and that it was published. It’s about amateur MMA; it’s funny. Now, on to the web-design part.

What I was going for here was a mix of high- and lowbrow web design that was both funny and compelling. So we have stick figure drawings straight from MS Paint, but we have some moderately advanced keyframe animations putting them into action. We have a super-simple two-column layout, but we have responsive design to arrange those columns appropriately on all devices. We have some large not-subtle text, but all the fonts are arranged according to a strict modular scale.

Technical Details

I like to think of this website as The Most Fun You’ll Have with Keyframes. All of the animations here are done with CSS keyframe animations, and I really don’t know how people did CSS animations before preprocessors. Some of these animations are fairly basic, but some — like the rolling ball button — take quite a bit of math. Being able to do programming-style things like variables and math right there in the CSS makes it way easier to build these and then to adjust them later. If I want the ball to roll faster, for example, I don’t have to redo any math — I just have to change the speed variable in my Sass file.