CASA of Cook County

Building a new site for a worthy cause in just 24 hours

In 2009 I participated in The Nerdery's Overnight Website Challenge, a 24-hour hackathon to help non-profit organizations. As part of a small team, I donated my time to design and build a website for CASA of Cook County. CASA's mission is to protect children who have experienced neglect and abuse by providing them a voice in court.

I contributed to the design of the site, but I was not the sole designer. The final visual designs were completed by the wonderfully talented Laurel Hechanova.)

Year 2009
Roles
  • Mentor
  • Visual Designer
  • Front-end Developer
  • WordPress Developer
Type Website
URL No Longer Available (view archived site)
Divide & Conqueor

A strategy for hackathon success

With only 24 hours to plan, design, and build a new website for CASA, it was critical to be as effecient as possible. As a team, we split into groups that would focus on project management, UX, visual design, front‑end development, and WordPress development.

I was able to participate in multiple roles for the team. My contributions to the final site were a style tile, which helped to establish the mood and visual direction of the site, front‑end development, and Wordpress development. During the hackathon, I also provided mentorship to another designer that was learning front‑end development.

Visual Design

Kicking off the design process with Style Tiles

Style tiles are a visual design tool created to help designers quickly explore a variety of visual directions within an established visual identity. That made it the perfect tool to explore new design directions with our client.

My Style Tile

The goals of my Style Tile were to:

  • create urgency behind CASA's mission (when necessary) through typography
  • explore how photos could interact with imagery to create a more impactful message
  • provide a sense of levity around their most important call-to-actions (donate and volunteer)

Im my experience, few clients choose one visual option to the exclusion of others. After all, there are often great parts of each design that can combine to create a better whole. Our client choose to combine many of the elements of my style tile with our lead visual designer’s Style Tile.

Front‑End Workflow

Party like it’s 1999 2009

As the lead front‑end developer, I guided the team through front‑end tooling and workflow decisions. Our goals were to be able to create a custom designed website, quickly, while ensuring we used tools that could be easily picked up by CASA’s team after the hackathon.

Casa tech stack

Choosing the right tools for the job

Our choice of tools revolved around 2 major needs—we wanted to take advantage of the latest HTML5/CSS3 standards and we needed to work quickly.

In order to take advantage of the latest browser features, we used Modernizr for feature detection and Compass for vendor prefixing. We used Sass to break our CSS into smaller files that enabled others to easily contribute to the site and minimize Git merge conflicts. To increase our JavaScript production speed we used jQuery, this also gave us access to a wide array of open‑source plugins powered by the framework.

Front‑End Code Sample

Creating the hero grid

As one of the more technically challenging parts of the design, this component served as the hub from which visitors engaged in the primary goals of the site (fundraising and volunteer acquistion).

Breaking-down the design in components

My approach was to break the design into 3 distinct reusable components:

  • .featuredStory component would be used for article teasers
  • .mediaBox component would easily handle an text overlayed on top of an image
  • .heroGrid component would deal with the unique layout challenges of this component

The .featuredStory component

Based on its usage in the design, I realized the .featuredStory component needed to respond to the height of the image provided to it. By anchoring the text content of the module to the bottom of the image and allowing the image to occupy the full-width of the container, I was able to ensure that this module could be reused across the site (regardless of the container it was put in).

My reusable component based approach paid off. With some slight modifications, we were able to reuse this component in section of the site that focused on volunteer stories.

See the Pen Featured Story, 2009 example by Ezekiel Binion (@ebinion) on CodePen.

The .mediaBox component

See the Pen Media Box, 2009 Example by Ezekiel Binion (@ebinion) on CodePen.

Although the .mediaBox component was similar to the .featuredStory component, it had one major semantic difference — the image was intended as decoration, not as a preview of a story. This meant that I didn't need to make the image available to HTML. This was music to my ears, ensuring an image covered the background of its container was much more difficult using the tag than by using a background image. Instead of searching for a jQuery plugin or writing one from scratch, I could rely on a recently released CSS feature, background-size: cover;.

My next problem would be even more complex, vertical centering. Currently, there are very few ways to vertically center an object in its container. In order to make this happen, I'd need to go old school and use a table based layout.

Using HTML tables for layout is semantically problematic, tables are intended to display tabular data (think data you would put into an Excel sheet). Using it for layout would cause accessibility issues for screen readers and other systems that digest HTML. Thankfully, CSS provides us a way to display elements as if they were tables without resorting to using the HTML table elements.

By using display: table; and display: table-cell; on the parent and children (respectively) I would be able to take advantage of the ability to vertically align the content of table cells. The only remaining requirement would be to give the .mediaBox a height so that the table cells know how to center themselves, my .heroGrid component would solve that problem.

Putting it all together with the .heroGrid

See the Pen Hero Grid, 2009 example by Ezekiel Binion (@ebinion) on CodePen.

After building the 2 components that would display our content, I needed a component that would layout those components. The .heroGrid component, would serve as the grid structure that our other components would be placed into.

My first attempt was to use our prebuilt grid but there was one big problem, it didn't have a way to ensure each column knew the height of the entire container (ED: today we can accomplish this using CSS Grids or Flexbox). In order for the boxed feel to work, I'd need my columns to be equal height. To pull this effect off, I would have to once again use CSS table display to take advantage of the fact that a single row of table-cells are always the same height.

After ensuring the columns are the same height, creating 2 boxes equal height rows inside of the center column was a easy. Simply adding height: 50%; inside of an absolutely positioned container that has height: 100%; accomplished my  goal.

The Final Product

Our work placed top 3 at The Nerdery’s Overnight Website Challenge. More importantly our client (whom spent the entire 24 hours with our team) was ecstatic about the results. CASA of Cook County launched their new site shortly after the hackathon.