In early 2015 I was tasked with designing a new website for the Annenberg Public Policy Center. The old site was had content management problems, a non-responsive layour, and some big security issues.
There were a few restrictions. One, the site had to roll out almost immediately. We only had a few weeks. Two, we had to incorporate all the existing site content… tons of publications, reports and press releases going back to the early 90s. Three, we had to accomplish all of this with a team of two — myself and one web developer — since the Policy Center was so busy with other projects. We started with a commercial framework as a base so we could have a functional site right off the bat.
A note on commercial CMS themes and frameworks: if you’re a designer or developer, stay away from these. They cause more problems than they solve. The framework we chose for WordPress used it’s own functions to serve content outside of the existing post loop. I’m not sure if this was a piracy prevention thing or what, but it made tweaking items like navigation walkers and custom post types impossible. We ended up re-writing almost every feature by the end of the project. If we had started with a boilerplate WordPress install and built it from the ground up we would probably have finished in half the time.
Other than that, I’m very happy with how the site turned out. It’s clean, safe, and easy to use. We engineered a project-based taxonomy that runs throughout the entire site, so press coverage, press releases, books, journal articles, lectures and landing pages could all be tied together easily.
The departments are now color coded, so I took the opportunity to develop teaser signage for the Policy Center’s 20th anniversary that incorporates the new look and feel of the site.
One of my favorite little touches is the external link indicator on hyperlinks, as well the prepended icons that indicate content types like PDF, DOC, XLS, CSV. Most of the materials on the APPC site are data sets with lots of different components, so my goal was to make them more visible and prevent people from accidentally downloading a 2GB Excel file when then needed something in plain text. I doubt I’m the first person to implement a feature like this, but I love how it’s easily accomplished in one style selector.
a[href*="//"] :not([href$=".png"]) :not([href*="http://www.annenbergpublic"]) :after