A Refreshed Design for 2008

Happy new year! To kick off the start of 2008 I've labored over a new design for DontTrustThisGuy.com. Writing a custom WordPress template, the new version of this site has microformats strategically mixed-in for your convenience. Additionally, the site now uses some advanced CSS3 styling to reward readers who are using more modern browsers, and to encourage those of you who are not, to upgrade.

CSS2 Drop Cap via Pseudo-Selectors

The purpose of the new design is to emphasize the content of each individual blog post. Most of the focus was on font choice, and text layout to encourage reading. The first paragraph of every post is slightly larger than the remaining content. Also, through the use of CSS2, a drop-cap is displayed in Firefox, Safari, and Opera web browsers. Sadly, IE7 does not support the 'first-letter' pseudo-selector even though it is a CSS2 feature. A screenshot displaying the difference can be seen below. The capture on the right is the gracefully degraded appearance in IE6 and IE7.

CSS3 Multiple Backgrounds

The page graphics are emulating a morning newspaper with a casual coffee stain here and there. Of course, if you are using any browser other than Safari you won't be able to see where those coffee stains came from. That's because only WebKit (the open source engine that Safari runs off of) currently supports the multiple background images feature of CSS3. The category and archive listings also have rounded corners courtesy of multiple backgrounds and even a drop shadow courtesy of 'text-shadow', but again only in Safari. The capture to the right is Firefox, and left of it, is Safari.

Your Name and Website in hCard

Whenever an author posts on this blog his hCard (a vcard in HTML format) is embedded into the post. This is not a built-in feature of WordPress and I think it should be. But I even took that a step further; if you comment on the site an hCard is generated for you with your name and web URL. Don't worry, your email address is not included.

  • Note: the toolbar allowing the display and utilization of the microformats embedded into the page in the screenshots are only possible with the Firefox Operator add-on

    • Article Specific Feeds for Free with hAtom

    Subscribing to a blogs RSS feed is nice but what about if you want to track the comments on a particular article? Well, by default WordPress also generates a comments feed, but this pushes all comments from all posts into the feed which may not be that useful. So you're left with having to roll your own php script to generate a customized feed for every post. This could be a little tricky. What if you can do it with no extra effort at all? Every post and it's comments already have to be wrapped in HTML markup so they can be displayed in your browser. By adding a few extra classes to the already done markup you can turn your HTML into hAtom and use an hAtom transcriber.

    Article Bookmarks Baked In with xFolk

    Every post, and page displaying a series of posts, such as the archives, has xFolk markup for each article. Again with Firefox's operator, you can easily bookmark any one of the posts featured on the page or add them to your ma.gnolia.com or del.icio.us account.

    What Do You Think?

    That about sums it up for the new design. It will be interesting to see how well browsers can support the CSS3 and microformats on this site one year from now. I'll be adding some more features to the site throughout the year as I've left plenty of room for growth. What are your criticisms, or opinions? And again, welcome to 2008, and thank you for your readership.