responsive
Design & Development, WordPress,
jQuery, CSS animation, Art Direction

Parallax-scrolling
responsive WordPress site

E.L. Tettensor approached me with a challenge: she wanted an old-fashioned, dark, and ornate WordPress site to promote her new book, and she liked parallax scrolling effects. Even though it was my first time, I was confident I could do it—and make it responsive to boot.

Art direction

After some searching, we decided on an illustrator we both liked and could work with. Once the illustration was nearly ready, I was able to start creating elements that would match—a logotype of sorts, a handful of icons, smoke textures, and various textures and backgrounds.

WordPress theme

I built a template that pulled each content page into a one-page design for the front page. I used Stellar.js to implement parallax effects on each panel, then overlaid effects for decoration’s sake. Each panel has a unique design, while remaining in line with the overall theme.

Making it responsive

Given performance and size constraints, I decided against the parallax effects on mobile devices. As a result, I simplified the design for smaller screens, removing the transitions between panels and allowing each panel to scroll. I tested extensively to ensure the site works as well as possible on all sorts of devices.

CSS Animations

As a final touch, I added introductory animations to the first panel. CSS animations are carefully timed so that the effect of a light turning on in the room is given, and then each element slowly fades in, with the smoke the final element.

The final result was an immersive, elegant, and usable site that my client was delighted with.

See more
This was a pretty tricky screenshot to take.
I had a few good proposals for my website, but Sarah was absolutely the right choice. Not only did she completely understand what I was going for, she was able to execute to perfection, pairing an artist’s eye with an engineer’s attention to detail. After helping me find just the right artist to do the background illustration, she meticulously sourced the fonts and images, culminating in an organic, immersive experience that perfectly captures the mood of the books. Small wonder the website has received so many compliments! I fully expect to work with Sarah again in the future.
Blog pages.