Cloud Four Blog

Technical notes, War stories and anecdotes

Redesigning Ceasefire Oregon

Last fall after the Umpqua Community College shooting in Southern Oregon, I decided that my donations and support for Everytown weren’t enough. I wanted to do more. And I wanted to do something local.

I did some research and discovered a wonderful advocacy group called Ceasefire Oregon. They seemed to be both passionate about sensible gun legislation and also wonky which appealed to me.

Ceasefire Oregon is the best resource on local legislation. Unfortunately, the website was difficult to read and navigate.

Old Ceasefire Oregon Home Page

So we offered to help redesign Ceasefire Oregon on a pro-bono basis. And I’m pleased to announce that the new Ceasefire Oregon site has launched.

Ceasefire Oregon's new site

In addition to the opportunity to contribute to a great cause, we found several pieces of the project interesting from a technical and design perspective.

Rebranding Ceasefire Oregon

The first challenge was finding a way to convey what Ceasefire Oregon does in a logo. The old logo was a riff on a shooting range target which seemed less than ideal for a gun violence prevention group.

Ceasefire Oregon's Old Logo

We talked to Ceasefire Oregon about their goals and what they wanted to convey:

  • Change is possible
  • Empowered
  • Moving ahead
  • New future
  • Action

We collaborated with Ceasefire Oregon on mood boards to get closer to the brand. And then we began working on logo ideas.

Aileen designed an origami-like dove that captured everyone’s imagination. It became the centerpiece of the new design.

Ceasefire Oregon Dove

Once the dove was approved, Aileen began work on variations of the logo. We wanted to support both horizontal and vertical logos as well as different versions for the three different Ceasefire Oregon organizations.

Ceasefire Oregon Education Foundation Logo

Pattern library

After we had the high-level brand details sorted out, we moved immediately into building a pattern library.

Ceasefire Oregon Pattern Library

I want to highlight a couple of things in the pattern library.

First, because of the three different sites and their color schemes, there is a pull down menu in the upper left that allows you to switch which colors are being used. This is most noticeable when looking at buttons, blocks, and navigation.

Second, during development, our pattern libraries rarely follow a completely linear progression from smallest components to larger ones. You can see evidence of this in the sandbox where we experimented with designs.

Local WordPress Development

For many of our recent projects, our clients had well-established content management or ecommerce systems. This has meant that we were able to keep all of our development front-end and exclusively used local development tools.

Ceasefire Oregon needed a new content management system. The old site was running on Drupal 6 which has been discontinued. We decided to move them to WordPress.

We wanted to find a way to continue to work on our own local machines while doing work on a content management system. We ended up running vagrant installs of WordPress.

I also want to give a hearty endorsement to WordPress Migrate DB Pro. We lost a lot of time trying to get open source database syncing solutions to work. I wish we’d bought the plugin earlier.

Pattern Library to WordPress Theme

One of the thornier challenges we ran into was figuring out how to tie the output of the Ceasefire Oregon Pattern Library to the WordPress theme that we were developing.

We ended up with a solution that worked pretty well. The gulp process for the pattern library also created a compressed CSS file that was aliased into the Vagrant environment in the theme directory. Whenever we made changes to the pattern library, they were automatically reflected in our theme.

The biggest downside to this approach was that the repository was a mixture of pattern library and theme code. But this combination sped up our design and development so much that it was worth it.

Content Strategy and Modeling

We spent time working with Ceasefire Oregon on their content strategy. We’ve done a little bit of this in the past, but this was the first time we’ve run workshops with clients discussing content. It is clear that the new site benefits from this work.

I’m particularly proud of how Sara and Gerardo mapped the content into WordPress content types. The new legislation section makes it easy for Ceasefire Oregon to keep track of new and old bills. I expect it to become the canonical source of gun safety legislation relevant to Oregon.

Ceasefire Oregon's New Legislation Section

And much, much more

This article is inadequate for describing all of the hard work that went into this project by everyone on the Cloud Four team. I’m incredibly proud and grateful for everyone’s contributions. It means a great deal to me.

And I hope we get a chance to write in more detail about the way the site was built in the future.

Making Oregon Safer

We’re tremendously grateful and humbled by the work that Penny Okamoto, Joanne Skirving and the rest of the volunteers at Ceasefire Oregon do. If you feel strongly about sensible gun legislation, they deserve your support.

We’re honored to have had the opportunity to work with them and to contribute our small part towards helping make our community safer.

Meaningful metrics and designing globally: two more Responsive Field Day topics

By now, you’ve probably read about Responsive Field Day’s amazing speaker line up and may be wondering just what these paragons of responsive design are going to talk about. We’re happy to announce two more speaker topics:

Sophie Shepherd: Designing for a global audience (and how a pattern library can help)

Sophie ShepherdThe Ushahidi platform is a data collection tool that has been used by over 18 million people in 150 countries, and translated into 49 different languages. As a designer on Ushahidi, Sophie will talk about the challenges of designing for users around the world with varying devices and connections, languages, and digital experiences, and will explain how a pattern library has made this process easier.

Steve Souders: Metrics that matter

Steve SoudersUntil browsers add mind-reading event handlers, we have to search for an alternative way to measure how fast users think our sites are. For decades, the go-to number has been window.onload, but modern and responsive techniques have weakened the relevance of that metric. What are the metrics that DO have meaning for what your users are experiencing?

This summer has flown by and now Responsive Field Day is somehow happening next month! Don’t miss your chance to hear Sophie Shepherd, Steve Souders and our other fantastic speakers on Friday, September 25th in Portland’s Revolution Hall. Get your tickets while you can!

Final Responsive Field Day Speakers!

When we tell people about Responsive Field Day, the most common response we get is, “Wow, that’s amazing lineup.”

My response has been, “And we’re not done yet.”

That’s why I’m so pleased and honored to get to share with you our final speakers:

  • Val Head, our favorite guide on how animation can be used effectively and how it adapts in responsive designs.
  • Steve Souders, whose persistent and patient advocacy for web performance has made the web a better place.
  • Olawale Oladunni and Mini Kurhan, who will share the innovative solutions they designed for Walmart’s responsive hero images.

Val, Steve, Ola and Mini join an already stellar cast:

Thirteen terrific speakers. One amazing day digging into the depths of responsive web design. All for only $175.

If you haven’t purchased your tickets yet, what are you waiting for?

Responsive Field Day Speakers, Tickets and Community

Late spring. We are now officially entering the marvelous season in Portland. That means gorgeous weather and cheerful citizens from now well into October. This part of the year is why everyone wants to be here. Let’s forget about the rest of the year (hint: dim, misty). Let’s just talk about the wonderful things.

Like Responsive Field Day, this September 25 (Friday) at Revolution Hall here in marvelous-season Portland. We announced the event back in March, but now it’s time to up the ante with some real details.

Responsive Field Day

Speakers

The first half of our confirmed speaker roster looks like a dream team of responsive all-stars.

  • Stephanie Rieger, consummate researcher whose humanist talks explore anthropological and technical realms
  • Ethan Marcotte, who, you know, invented Responsive Web Design. And who also weaves a riveting presence in his talks.
  • Jeremy Keith, whose impact on web practices are legion, and who spices up the discourse on any panel.
  • Yesenia Perez-Cruz, who synthesizes her talents in writing, communication and graphic arts for a nuanced perspective on responsive challenges.
  • Jen Simmons, whose powerhouse weekly podcast _The Web Ahead_ is on the required listening list for those who build the web.
  • Brad Frost, whose bounding enthusiasm and thought leadership have helped to lead us toward a clearer responsive future.

And that’s only the first half! We’re kind of giddy with excitement right now. Stay tuned: we’ll announce the rest of our speakers soon.

Tickets and Community

Tickets will go on sale soon. They’ll be $175. We are keeping ticket prices low so that more of you can join us.

Any proceeds from the event will be donated to programs that support open web technologies, the tech community and education.

The whole Cloud Four crew hopes you can join us for Responsive Field Day!

Responsive Field Day Portland!

For the last two years, I’ve devoured the podcasts from Responsive Day Out—the conference that Jeremy Keith and Clearleft put on across the pond in Brighton.

I’ve encouraged anyone who would listen to subscribe to the podcast. It is my favorite conference that I’ve never been to.

That’s why I’m so thrilled to announce that we’re bringing the Responsive Day Out format to Portland!

Responsive Field Day

We’re calling it Responsive Field Day. It is a one-day conference on responsive design. It will take place on September 25 at Revolution Hall.

We plan to continue the spirit of the Brighton event where Jeremy famously said that “every expense has been spared.” So you can be certain the event will be affordable and inclusive.

Lyza, Aileen and I are traveling to Brighton for Responsive Day Out 3: The Final Breakpoint to watch the masters and learn how to make Responsive Field Day a success.

We’ve already got some fantastic speakers lined up. We’re not ready to announce the lineup yet though, so you’ll have to trust us when we say, “OMG! OMG! I can’t believe they said yes!

So mark September 25th on your calendar and start planning your trip to Portland. Sign up for email or follow us on Twitter to receive updates when the speakers are announced and tickets go on sale.

Finally, thanks so much to Jeremy and Clearleft for inspiring us and sharing what they’ve learned.