Colophon & Credits

Learn all about the design and development of this site.

Design and Markup

By Jon Tan:

The logo is a play on the letters C and S, combined to form three incomplete but connected circles. Other elements were also created specifically for shiflett.org, including the icons used throughout. Arial is used for headers, and Verdana is used for the main body text.

The design was inspired by musings on the idea that personal web sites should be user-centered but also the author’s web GUI. The most intensely-discussed subject was information architecture; both Chris and I share the opinion that good design starts with structure. Hopefully the final result streamlines a lot of useful features in to a clean, simple interface.

The design loves all common screen resolutions from 800x600 and up, but it is particularly enamored with the most popular, 1024x768. The container does not stretch beyond that, in order to retain reasonable line lengths for comfortable reading. However, it does stretch if you raise the default text size in your browser. In that instance, the main container expands with the text size until there’s no more viewport space to fill, at which point the content will wrap.

Accessibility was a baseline design ethic. The markup is ordered logically. The contrast should be sufficient for most users, and text resizing is accommodated as far as possible in the default style; relative values are used for everything. The site has been manually checked to Priority 2 plus conformance to the WCAG 1.0 with extra screen reader checks for critical objects like the calendar. Please send feedback if you have any accessibility issues.

A special mention goes to Jon Gibbins for his JavaScript and accessibility contributions, without which the code view, comments form, and calendar would not have existed in their final form.

Valid XHTML 1.0 Strict markup is used throughout with valid CSS. Although the CSS validates, the single exception is an IE6-specific conditional comment, included separately to work around non-existent support for the max-width property, a fairly important property in a semi-fluid layout. The pages are served as MIME type text/html using the UTF-8 character encoding.

You may be aware of the debate surrounding XHTML served as text/html versus HTML 4.01, but I consider the former to be a solid interim. At some point, IE.Next (or even IE.Next.Next) might support application/xml+xhtml content, but currently it does not. Content negotiation is an option, but not one that was chosen at this time.

Architecture and Code

By Chris Shiflett:

The architecture is driven by URL vanity. URLs form the foundation of the interface and the organization of the content. If you visit a URL with superfluous characters such as www, you are redirected to the correct, beautiful URL that I have chosen for that page.

The code has been written from scratch using the MVC design pattern and open source technologies such as PHP, MySQL, and Lithium. Although the site itself is not open source, features such as code highlighting, comment filtering and formatting, and other random tidbits have been discussed in my blog.

I use Delicious to manage my links and Flickr to manage my photos. Feedburner provides subscription statistics. Each of these services offer an API that I use to integrate their features into the custom interface.

I make extensive use of caching, including full-page, partial-page, and algorithmic caching. Twitter provides authentication, so you don’t have to trust me with your password or bother remembering one just for this site. To encourage quality discourse, anonymous comments are not allowed.

Ajax has been used to enhance some features, such as comment previewing, but all features function with or without JavaScript for maximum accessibility.

Upcoming Events

Smashing Conference

1516 Mar 2016

At Oxford Town Hall, Oxford, England.