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.
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-widthproperty, a fairly important property in a semi-fluid layout. The pages are served as MIME type
text/htmlusing the UTF-8 character encoding.
You may be aware of the debate surrounding XHTML served as
text/htmlversus 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+xhtmlcontent, 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.