This morning, the company I work for launched their new website, PythonSafety.com.

The interesting thing about this project is that we chose WordPress as the framework for the website. While I may spend some time talking about why we chose WordPress at a later time, I wanted to share some features in the new site that you don’t typically see in a WordPress powered project.

Products

The primary purpose of the new site is to share up to date product information for each of our products with our customers. Products are categorized into “Product Groups“, and products can also be related to other products as a child or parent item.

Depending on how a product relates to another product, how many child products a parent product has, and a number of other variables, a different template is used on the product page that is most suitable for the content. For single products, you might get a view showing product photos, a description, and specifications. For a parent product page, you might get a template that pulls data for whatever child-product is currently selected using ajax using a separate template.

No matter what, we never have to use any custom html/css on these pages making them much easier to update in the future.

Every individual product has it’s own gallery that allows us to show any number of product photos related to that item. Clicking a thumbnail changes the current photo, and clicking the larger photo opens a full size image in a lightbox. Images are cropped automatically to the correct sizes when uploaded into the system.

Product Specifications

Products have specifications (essentially just key/value pairs) that are easily managed in the backend. Sometimes, these are used just to give information about a specific product (like this page):

Another unique use for Product Specifications is setting up comparison tables for similar products. If a number of products share different keys, we can declare the keys we want to compare, and the theme will automatically generate a comparison table for a set of products (shown here):

Related Documents

We have a number of publications that are available for download on our website. We’ve setup a system that allows us to upload a publication, and then relate that document to any product(s) we want. This allows us to update one publication, which will then update any instances of that publication across the site (example).

Product Search with Autocomplete

Every product has a unique code that is used by our team and by our customers. To make it easier to find information about a product, we’ve setup a search feature that autocompletes as a product code is typed in.

Other Pages

Also in the new site are systems for managing job listings, videos, and press releases. These are a little more generic in nature. Of course, there are also some pages that are more standalone, such as the “About” page.

Built with WordPress

In the past, I’ve asked others when they thought it was appropriate to use WordPress at the underlying framework for a project. A lot of developers frown upon using WordPress altogether (forces you into a “post” data structure for the most part, no MVC architecture, etc). What do you think about using WordPress as a framework for non-blog websites?

In the past, I’ve often stressed the importance of producing high quality content while building a publication. Growing a successful website takes a lot of work, and content is considered by many to be the most important part of the job.
Maybe you’ve heard people say, “Content is king.”

I’m not sure that content is really the most important part of a publication though. Obviously, content is an essential part of any news site, blog, etc… and I still believe content usually trumps tasks like link building or fine tuning your site’s markup/design… but there is something even more important than content that I’ve never recognized before:

You.

A few years ago, one of my website’s subscription lists was hacked into causing 50,000 subscribers to be bombarded with spam mail. I immediately issued a personal apology, an explanation of the security breach, and explained how we would move forward. While preventing the security breach would have been ideal, the publication didn’t take a traffic hit. In fact, the site continued to grow, and many subscribers even thanked us for how we handled the situation.

More recently, I contracted for a website with a huge community. While the company was ran by a great group of people, their public face was basically just 1 person. When that person left the company, a lot of people lost trust in the website.

Reaching people at a personal level builds trust and allows for forgiveness. Personality in content engages people at an emotional level, and people enjoy learning/laughing/talking with people they like.

Anyways, this post isn’t meant to be a long-winded analysis. I’m really just finding myself asking the question: How do you package a personality for an audience to digest? Surely there is a case by case answer, but I think when you figure out how to deliver content alongside personality, you win.

It is with great pleasure that today I officially join the team at Python Safety as their Director of Marketing and Design. Python Safety is the provider of the best drop prevention solutions available today.

Since June 2011 I have been contracting for Python Safety, providing them with services such as web design, print design, and brand development. Key projects I have been responsible for include the development of the company’s 2012 product catalog (including photography for nearly 200 products), building a new company website, and inventing a brand new identity for the company from scratch. I also worked on a variety of marketing materials for the company including posters, presentations, trade show materials, shirts, booklets, packaging, stickers, brochures, business cards, and videos. Python Safety provides me with a unique environment where I am able to own projects from start to finish, explore design mediums I haven’t had the opportunity to work in before, and work with a talented management, sales and marketing team.

I will be ceasing additional contract work for the foreseeable future, and will focus solely on Python Safety and small personal projects.

In 2009, I began to help my close friend Michael Caldwell run for state house here in Georgia.

The catch: We wanted to run the most accountable, accessible, transparent campaign possible.

This meant no lobbyist funding, no out of state funding (even from family), no funding from PACs or other political campaigns, and self-limiting funding from ourselves.

On top of this, we also were facing an incumbent with none of these restrictions, and tens of thousands of dollars in the bank.

Making the task even more challenging, Michael Caldwell was 20 years old when he began his candidacy.

In 2010, we lost with 45% of the vote in one of the closest elections in the state. Two years later, we decided that our message of accountability and transparency in Government was worth giving another shot.

Last night, Michael Caldwell won in the primary election for House #20 here in Georgia against an 8-year incumbent.

Out of all of this, I am very proud of my close friend and his supporters, but I am most excited about what this means for future elections in Georgia (and perhaps other states as well). We have proven that the stigma of “lobbyist dollars are a necessary evil” wrong. We have shown people that you can be a working citizen legislator, not a career politician. We have created a model for a new kind of campaign that I hope catches on over the coming years.

It should be noted that this wasn’t the victory of one person, but a collaborative effort of thousands of supporters, and many hard-working volunteers. A huge thank you is in order for everyone who helped make this victory possible. This is truly your doing.

After months of planning, working with a handful of very talented designers, and several dozen iterations, Python Safety has a beautiful new logo mark.

The final mark was designed by the super talented Gert van Duinen. In the coming months, Gert may also be assisting Python Safety with a refresh to our logotype.

Web App Tester has been updated recently, but I never posted about the changes! There is now an iPad preview mode alongside the iPhone preview.

A bigger update will come next that includes zoom-in/zoom-out functionality.

See the official feedback/updates post here.

I wanted to share a simple trick I’ve been using recently for quickly adding baseline grids to nearly any element on a page. It’s nothing too fancy, and it’s very easy to implement.

Demo: Baseline Grid on Any Element Example

Download Demo: easy_baseline_demo.zip (12KB)

In the demo above, you’ll see various baseline grids (and combinations of grids). There’s a switch in the top right to turn the grids on and off.

To make a 21px Baseline Grid, you would apply the class “baseline_21″ to the element which you want to apply the baseline grid to. In your stylesheet, you would add the following CSS:


.baseline_21 {
position:relative;
}

.baseline_21::after {
z-index:9999;
top:0;
bottom:0;
left:0;
right:0;
position:absolute;
content:'';
}

.baseline_21::after {
background:url(images/baseline_21.png);
}


Adding this class to an element will make that element “position: relative;” (meaning that this won’t work on elements where position needs to be something else). Then, using the ::after pseudo-element, we apply a background that is positioned absolutely to fill the entire element.

The background image is a 42px tall graphic divided into two rows. The rows alternate with their background color. The top row has no background, just a red baseline, and the bottom row has a 20% opaque white (or other color) background. This just helps me follow the rows on wide documents.

As shown in the demo, it’s easy to apply baseline grids to children inside the element with the baseline grid as well. By adding multiple backgrounds to a baseline grid, you could also overlay a column grid using this method.

Full disclosure: I’m not a typography guru, and the demo might not be a very solid example of baseline grid usage. Also, I whipped up the demo very quickly, so there may be an error or two in some browsers.

My new home away from home.

Got these in the mail today. I know this catalog doesn’t mean much to people outside of our company, but seeing this project all come together so nicely really makes me feel fantastic.

I’m working on a few posts that outline the process we used for designing and producing this catalog. In some regard, I’m writing to solidify what worked and what didn’t work in my own mind. I hope that the series also helps others like myself who decide to design a catalog with very little (if any) previous print experience.

Python Safety is a company I have been working with for just over half a year now.

We upgraded our office space at Python Safety this past week. I’ve got more of a dedicated “studio” now for working on the new 2012 catalog.

And the catalog is shaping up very nicely. Still plenty to do, but if things continue at this rate, we should have a beautiful 80 page catalog ready for print by the end of December.

Pretty exciting for us all. In less than a year, we’ve moved and upgraded our headquarters twice. The company is growing quickly, and having a lot of fun :)