From Google doc to Octopus to Webflow: How we re-built Beth Kume-Holland’s “My own kind of music” website. 

By  
Jonathan Holden
Webflow
Octopus
Google Docs
Case Study

From Google doc to Octopus to Webflow: How we re-built Beth Kume-Holland’s “My own kind of music” website. 

Beth had decided to re-build her website, so we started by getting together all the words she’d written about herself and her disability advocacy work. Her Google doc ended up with 4500 words and was a tangled mess, but editing down is always better than not having enough to say. 

Beth wanted a unique style for the site and was very proactive in creating the “look and feel”. She even made the individual decorative elements that bring that style to life. 

Once we’d decided what areas of work Beth wanted to highlight, we started planning a site map in Octopus.do. It’s a simple site map creator which then extends to make a complete site map, with all the words. 

One of the things I like most about Octopus is that the content boxes are quite small on screen, which reminds people to keep their content brief. 

Each section of every page can be shown as a wireframe type. This gives the Webflow developer an idea of how to build each section. 

Webflow is a great visual developer for building unique sites. It creates nice clean HTML which is really important for web accessibility. We needed a clear naming system for the CSS so we used Finsweet’s Client-First. Over the years we’ve tried different CSS systems, but this is the only one that really seems to work with Webflow and non-technical users. 

While we were building we used Markup.io for Beth to show where she wanted changes or things that were not working for her. It really helped us as developers to focus on what the specific problem was.

We also used a Google doc to list some of the issues that needed to be sorted before handing over the site to Beth. Now that you can add a tick list to Google Docs this makes it easier to see what has been done and what we’re still working on. 

As Beth is an accessibility specialist, she wanted the site to meet the Web Content Accessibility Standards at the highest level, AAA. Webflow is flexible enough to allow us to aim for that, though as web accessibility is a journey not a destination, it’s something we’ll continue working on.