Kathy Sommer Case Study

I built an easy to use custom theme with specialized audio components for a talented musician.

“Working with Philip on my website was a great experience in every way. His superior computer and communication skills, along with his precision and attention to detail have made what seemed like an overwhelming process, possible.

“Ever patient with endless questions from a novice, and willing at every turn to not only come up with creative solutions for each problem along the way, but to educate and enlighten as well. I can’t imagine having a better experience or being more thrilled with the final outcome.”

— Kathy Sommer

The Problem

Kathy Sommer had a wonderful design for her website, but it called for customized audio players and a more complicated layout than her host Squarespace could handle out of the box. She brought me on board to build a custom theme with an audio player she could manage on her own after launch.

Squarespace has a system that is very easy to use for those who aren’t web professionals. It has expansive themes and simple content editing tools. However, its simplicity has its limitations. The design Kathy had commissioned would not work with any of the provided templates. Along with the overall layout design, the requirements for the content design were more than the basic Squarespace components could handle.

It was important to Kathy that we not compromise on the design and also that she be able to maintain the site independently, without needing to hire a professional for every minor update or new song inclusion.

The Solution: Customizing Squarespace’s Theme

Using Squarespace’s developer mode I created a custom theme that allowed me to fine-tune the markup and placement of content blocks to meet the needs of the design. This route also allowed me a better way to manage global assets like design images and stylesheets. It also kept complexity out of the front-end facing content management system.

The audio player was custom code created to meet the needs of the design as neither of Squarespace’s audio blocks (their native one or the Soundcloud embed) would serve. Using Squarespace’s custom code block, I carefully crafted an audio player that would be simple and intuitive for Kathy to use herself. In tandem with Dropbox for file management (something that Squarespace lacks), she will easily be able to add new songs to the site without waiting for or paying someone else to do it for her.

Because some of the pages have a couple dozen audio tracks, we needed to be sure we weren’t blocking loading of images and other assets while the audio was downloaded. However, we also knew users would not want to wait for their chosen track to load after clicking play. As a solution the audio files don’t preload until the page has told us that everything else is displayed and ready. Once that is done, they are downloaded so they play immediately when the user requests, giving them the best experience. As an added bonus, iOS devices don’t preload the files at all until explicitly requested by the user, saving bandwidth on devices with a high chance of being on a limited network.

Training for the Future

Once all the code was written and the site was done, I spent some time with walking Kathy walking the site, teaching her to update it and clarifying the Squarespace system. My goal is to always leave a client with more than just a website they’ve approved, but a plan to move forward and the confidence to execute it.

Reflections

One of the nice things about going with Squarespace’s developer configuration is the templates are managed through Git. This meant I had versioned controlled backups during the entire process. If anything glitched, or I needed to go back to a previous look, I wasn’t hoping I’d made manual backups at the right point.

Coming onto a project after a lot of the research and design process has already been completed is never easy, but with a lot of communication and a very understanding designer, we were all able to make things work smoothly. Overall, I’m very happy with the outcome of this project - a smooth experience that solves Kathy’s specific needs and is accessible across mobile devices. And, more importantly, Kathy is also happy with the result.