Women&&Tech was launched in 2012 to challenge the idea of tech as a male-dominated field. The website features interviews with different women working in the tech industry. I became familiar with them when I was invited to be one of the interviewees! A few years later, I joined the team and helped with the relaunch of the site.
When I joined, it was important for me to volunteer with an organization that aligned with my values. Often, when the conversation around diversity in tech defaults to gender diversity, without specifically addressing other intersections such as race, ethnicity and class, we inadvertently hear the same stories from the same women. To me, this does not reflect true diversity and only serves to push the needle forward for the few that are closer to the status quo.
The purpose of the redesign was to give the site a design refresh and improve the publishing process. But they also wanted to make a deliberate effort to share more stories from different women. This resonated with me. Plus, I had been doing a lot of teaching at that time and wanted to actually write some code!
The previous site was built on WordPress but wasn’t able to leverage the content management templating system. Each interview required a custom page build. This made it challenging to publish interviews in a timely manner. Also, this was a volunteer effort for everyone involved so hand-coding a new page for every interview and finding volunteer developers with WordPress knowledge made the process more difficult.
The designs were created by Ivonne Karamoy and Cassie Kaiser. In addition to the overall site redesign, they worked to establish a consistent style for all of the different content modules such as Q & A blocks, page headers, image blocks, pull quotes and more. Creating these standalone content components were key in making it possible to create pages easily and quickly.
From there, I translated their designs into a custom framework for the global components, themes, and each content module. We decided it was best to create our own framework, rather than use pre-written tools like Bootstrap so that we could fully customize it and only add what was needed, to keep it a lean as possible.
In addition to creating the framework, I also created a Style Guide for design reference and to document the code snippets for the content modules.
Each module was designed to work independently to allow for flexibility. Pages could be created with any mix of content modules and was not reliant on the surrounding markup or other page components. The only requirement is to use specific HTML markup and class names, documented in the Style Guide. A new page or interview could be created by adding any number of modules and needed piecing them together to form a complete page.
Though we decided not to go with a full scale CMS like WordPress and opted for static pages, the publishing process still needed to be efficient. To cut down on some of the tedious copying and pasting of HTML, I incorporated some basic PHP to reuse components such as the global header and footer. We could then include the snippets onto a page instead of manually copying and pasting the entire code block into every single page. Also, if I need to make global changes, I could make them in one shared file rather than manually updating each page.
With PHP variables, I also added some options for customizing the page templates, such as changing theme colors or customizing commonly used content blocks to reduce manually updating HTML.
In addition to the Style Guide documentation, I also wrote documentation for updating and maintaining the website. While the repo is public, the documentation is specifically for teams members with direct access to the repos.❖ ❖ ❖