CSS Expert

Order In The Court for The Heritage Foundation

Background: OrderInTheCourt.org claims to expose evidence of activist judges. It has info on all twelve courts, several hundred judges, and about thirty types of activism. All this data is dynamic which presented challenges in writing the information architecture and the CSS for each template.

The Challenge: The biggest challenge was displaying all the data in a friendly way, even when there is too much or too little text in the database. For example, a court page will sometimes have no pending judges and sometimes have up to three. As a result of that expected variation in detail on some data points, there is some unavoidable excess whitespace.

The Styles: As a rule, I keep my code is well commented for people doing maintenance in the future. In this case I went a bit farther than usual by writing in long hand with uber semantic class names, ensuring easy maintenance for future employees. I used a selector approach that heavily favored the use of element pattern matching for .Net form elements and .Net sortable tables, so they would be styled without the need for the back end developer to add classes.

The Design: I carefully researched the design and emulated the best parts of other market leading sites on the Supreme Court like Oyez. I departed from those sites with regard to the color palete in favor of a more classical look (literally in the header) with a palette that embodied a more official presence.

IA Optimization: The Information Architecture on the page has been SEO focused from the first keystroke. Through the proper use of header elements, staying mindful the text inside dynamic data points and static elements, will comprise the first 200 words of the page, repeating data points and static headers for an optimal keyword ratio.

Index of Economic Freedom for The Heritage Foundation and The Wall Street Journal

Background: The Index is a annual product of the Heritage Foundation in partnership with The Wall Street Journal. I was given the responsibility to re-skin it this year by giving it a new color palette and some updated features. The IA and the structural CSS were reused from the previous year.

Budget Chart Book for The Heritage Foundation

Background: The Federal Revenue and Spending Budget Chart Book is an annually refreshed site that historically received less than 200,000 page views per year for five years. In 2008 I recreated the AI and CSS from scratch resulting in an increase in page views to almost 1,000,000 hits per year. That’s a five-fold increase in traffic. Analytics prove that the increase in visitors was due to higher organic hits via higher search engine exposure, through precise Search Engine Optimization. If you did a search for Federal Budget Charts or anything like it, we were top ten. Some of the improvements made the first year were as common sense as not displaying keyword rich text as images. We pulled the text out of the charts and placed them in their proper page elements. Some SEO improvements were more complex, like calculating the proper keyword density on the live text, alt tags, titles, and making all URLs accurate and keyword rich.

Its usually a fair assumption that high pages per visit is due to the quality of the content. The Heritage Foundation's John Fleming created the charts, which were a huge improvement. In my opinion his easy to understand charts are the cause for the increased pages per visit.

Moving It To .Net: The 2009 edition was enhanced from a basic fifty page HTML site to .Net site with a custom admin tool. Much of the same IA was reused. The site actually received thirty percent more visits than the previous year.

IA Optimization: Every little bit of IA optimization really counts on pages like these with only 300 words to optimize. Moving from an HTML version of the site to a dynamic .Net version required much forethought.

Although a database was used to store the data points and images, we purposely avoided the use of pulling images directly from the database or as ashx files. To accomplish this, the admin tool copies the files from the database to a folder on the server. This way we are serving real images and real keyword rich URLs to every page, as apposed to low quality SEO links like redirects or direct database calls.

Google and Google Image search rewarded us for using these keyword rich URLs. Some may call the attention to the keyword richness and quality of an image URL overkill, but the 30% increase in visitors in 2009 is evidence of that extra vigilance paying off.