Design elements you should steal from our Technical.ly redesign

After four years with the same Technical.ly Philly WordPress theme and six months after our Baltimore launch, we united our brands with a complete redesign under Technical.ly in March.

The design was led by Tom Rose and we partnered on the WordPress development (WordPress multisite) with WebDev Studios. We’re still making our way through bugs and looking toward a second phase, but I’m proud enough of a few design elements that I want to share.

My colleague Brian Kirk and I put no less than a year of thought into the effort, so we offered considerable direction and then watched Tom and WebDev exceed in making those plans a reality. Read a more general assessment of the redesign on our company blog here, and find a recap of our old site here.

Below, find some small elements that I’m most proud of and think should inform your design work.

Responsive design

The area of our redesign that still requires the most work is our long-desired effort to have a responsive design, meaning its layout reformats depending on the device being used.

While as a whole responsive is a large project, we’re proud of how we focused on a mobile-first strategy.

Engage box and Article Location Info

We added to the standard WordPress tags and categories display with three other valuable outputs.

First, the Engage box. I’m a strong believer that news sites should be expect to be play a bigger role in commanding their audience to action. In late 2012, we began writing headlines with that in mind and adding a custom field to our redesign was the next step. Whenever possible, we try to define the clearest call to action from our article — donate, volunteer, RSVP, read more, take a survey, etc., as seen above. [Custom fields]

Secondly, there are two reasons why I think tying location data to articles is valuable, when relevant. First, it can help offer context to the reader greater context about where an event or business is located. Second, the opportunity for visualizing where we most often report becomes greater the more data we have. [Custom fields]

Third, we are continuing to build out a directory of local technology communities and we connect articles to this directory, as also displayed above. [Custom taxonomies]

Disclosures, Updates and Intro Grafs

One small custom field option I’ve wanted from the earliest days of us discussing a redesign was an unobtrusive way to share clear disclosures and updates to articles. [Custom fields]

• Disclosures: On the backend of our website, our content creators can add any and all information about possible ethical entanglements, allowing us to get involved in our community because we have a dedicated place to disclose that involvement.
• Updates: Recognizing the realities of online reporting in which we often tell the audience that we have corrected mistakes or added additional information. News doesn’t end with publishing, and we wanted a place to keep our audience informed.

For feature stories, we wanted to use design to show off our weightier items with typography. Designer Tom Rose delivered us just the kind of drops cap and intro graf font weight we wanted. Though not displayed here, we also had Rose offer a stylized pullquote.

Visit Link posts and Reaction Counts

A few of us at Technical.ly Philly have been playing with different WordPress custom post types and Tumblr deliveries, so I wanted to be sure we saw something like it for the redesign.

Tom used WordPress custom post types to create a ‘Visit Link’ article in which we can share other content from the web that would be relevant to our audience while still adding context, as seen above.

Those visit links appear on the article page itself, but also directly on the homepage, so we can connect our audience and other publishers directly without having to steal clicks unnecessarily. [Custom post types]

Also seen on the homepage is, instead of a social network-branded or comment-driven method of conveying engagement, we created a ‘Reactions’ counter built on Disqus commenting. The eventual goal will be to create a metric that would incorporate a variety of numbers, it’s starting with only tweets for simplicity.