I was commissioned by the Bisexual Resource Center to create a mini site for their “Am I Bi Enough?” domain. The scope was intentionally small – to create a simple landing page that says “yes!” and links to the main BRC website. The bisexual community is often plagued with feelings (and accusations) of not being “queer enough” so the site is intended to be straightforward and reassuring.
I’ve had some exposure to modern CSS techniques through my Firefly Art Grants work and wanted to hone those skills more. I guessed making a one-page site with pretty animation would be a great way to do that.
The concept I developed would be simple but pleasing: the background would be an animated version of the bi flag, with shifting bands of bi-themed colors drifting up and down and overlapping with each other. After a short delay the pretty “yes!” text would appear in the center. After another short delay, the BRC logo would appear so users would have somewhere to click through to.
Arbitrary Technical Choice
The animation was working fine in Chrome and Firefox, but Safari had a lot of issues rendering my SVG images with 3d transforms. It seems to get confused about z ordering and will draw two objects half on top and underneath each other. I sprinkled as much z-index and transformZ as needed to get rid of those problems.
Mobile Firefox: Bad Text Shadow Render Performance
I had used a text-shadow with animation on the opacity of the shadow color to imitate a neon flickering effect. This worked fine on all platforms except Mobile Firefox, which became very jerky when this effect was turned on. I could have probably added a firefox-specific CSS rule to fix this, but the flickering didn’t add a whole lot to the experience so I removed it completely.
CSS is still CSS
I have a faily good mental model of how CSS works, but working with a web page as if it were a plain rectangular render buffer is still a challenge. Moving an object “off-screen” with perfect accuracy on any screen size is still not trivial.
IE is still IE
The site looks great, was well-received, and clocks in at 72K. Users who went to biresource.org from amibienough.com bounced at a 6% lower rate than usual, which probably means that the site is bringing in new users. Social media reaction was positive with lots of heart emojis, so all in all it was a success. Not bad for a weekend of twiddling with CSS!