Shiflett.org Design

Shiflett.org is the popular professional blog of PHP and web application security expert, Chris Shiflett. Chris is a popular speaker at industry conferences and the author of two books, PHP Security (O'Reilly) and HTTP Developer’s Handbook (SAMS), as well as the principal of the web security practice for OmniTI.

When Chris first made contact to discuss collaborating, I knew that the content would drive the design. As a personal preference, content wins over purely stylistic decoration every time for me. Designing an interface around great content with an expert developer who wrote it is even better. Not only that, but he’s a “good bloke” too. This is what Chris had to say about our work:

I first contacted Grow Collective because of their impressive design portfolio, but after working with lead designer Jon Tan, I realized that they dig deep into the purpose of a web site to deliver an interface that not only looks good, but also adheres to the highest standards of usability, accessibility, and web standards.

You can read more in his blog entry for the launch.

The objectives of the new design were threefold: First, to provide Chris himself with a web site that he could be proud of, and one that would be his very own GUI to aggregate all the information from the wider Web that would be useful to him on a daily basis. We did that. Second, to give something back to his audience with community tools and features. We completed a solid first phase with more to come. Third, to provide the wider audience with access to information about security in a concise format from around the Web, edited for syndication by the author. We did that too!

Love and care was given to all aspects of the design, especially the typography, legibility and flow. A new logo was drawn and an icon set created specifically for the site. As part of the new identity, the byline type was drawn by hand to give maximum clarity at a small size. Themes for the design were application interface references, simplicity and clarity. As a natural stickler for detail, there are many things I would amend since the initial design last year and the recent launch but we will be making adjustments continuously in the coming months.

The new site is much more than a blog. With Chris working on the code that delivers the content, and both of us debating structure and feature sets, we produced a hybrid site that neatly merges a blog with tools for the security fraternity and other developers. This was further enhanced by outstanding DOM scripting and accessibility input from our own Jon Gibbins, who worked on features such as the unique code view and calendar with the microscopic attention to detail he’s fast becoming famous for.

Some of the shiny, brand new features for the design were:

• The total re-organisation of the home page to give a snapshot of activity throughout the site.
• A completely new community section with individual member profiles (see mine) listing their contributions to discussions. It also features OpenID verification, gravatar support and publishes headlines from members’ blogs.
• An all–new code view (essential for a technical web site) that starts from a baseline of semantic, accessible HTML. Colour highlighting is achieved using a set of functions developed by Chris. The feature then uses DOM scripting (JavaScript) to add a rich layer that converts the code to an ordered list with line numbers, alternate shaded lines for high readability and can handle infinitely long lines of code without breaking the interface. Readers can then toggle between the two.
• A unique comments system that allows limited (x)HTML and crucially, uses the same code view functionality so visitors can post code that is styled in the same way as it is in an entry.
• A new links section which is powered directly by Chris’ del.icio.us bookmarks using the del.icio.us API.
• A new planet section which is an extended blogroll or XFN list that not only lists the blogs that Chris reads regularly, but also displays the headlines and summaries published in the last three days.

A new site with complex functionality will always have a few bugs. Chris recognised this and decided to launch regardless and throw open the new features to his erudite developer audience for their input. Bug fixes continue apace based on their feedback. These are some of the comments about the site from this tough audience so far:

Edward Yang, developer and creator of HTML Purifier:

This new site looks absolutely delicious. The OpenID support is cool, the layout is spiffy, and the XHTML 1.0 Strict validation is a pipe dream. Nice work!

Ammar Ibrahim, developer, programmer and frequent speaker at open-source events:

I just love this design. One of the nicest blog-designs I've ever seen.

Nate Klaiber, web developer and programmer at Barbour Publishing:

I love the new look and feel — and will definitely stick around.

John Layman:

The new design looks wonderful! Easily one of the most visually appealing and accessible blogs I've seen.

For those who may want more technical information head over to the shiflett.org about page for more detail. Many thanks to Chris for choosing to collaborate with us, and now that I have him saying “mate”, congratulations on his honorary membership of our little collective. I'll leave you with more words from Chris that neatly sum up how we love to work:

Working with both Jon Tan and Jon Gibbins was a joy; not only do they possess the skills necessary to shape ideas and bring them to life, but their rich personalities and keen sense of humor makes the entire process a lot of fun.

More articles