Christina Truong

camera icon Photo by Miguel Weston

Women&&Tech, 2017

HTML, CSS/Sass, JavaScript/jQuery, PHP

Responsive custom framework, front-end architecture and development, style guide and documentation.

Back View live site

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 Redesign

Women && Tech website - before
2012 design
Women && Tech website - redesign
2017 redesign

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.

For the redesign, we initially planned to create our own custom editor with Node or Ruby, rather than using Wordpress. After some testing with Ray Kao, our Operations & Support team member, we decided to take it back to the basics. Since all of the team members understood HTML and CSS, we decided to put the editor on hold and instead, create a framework that everyone would be able to maintain and customize. Also, if we needed more help, it would be a lot easier to find volunteers that knew at least basic HTML and CSS rather than looking specifically for WordPress and JavaScript developers to help maintain the project.

The Framework

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.

Women && Tech website - before
Page header component
Women && Tech website - before
Interview header component
Women && Tech website - redesign
Interview footer component
Women && Tech website - redesign
Q&A component

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.

Women && Tech style guide
Women&&Tech Style Guide

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.

Customization

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.

❖ ❖ ❖