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.
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.
Andrew Hyde Says:
2:28 pmJan 01I love the footer, very nice work.
Brian Shaler Says:
3:13 pmJan 01Very nice! Well done.
Sunny Thaper Says:
4:03 pmJan 01Jimmy, I love the inclusion of Microformats. I agree with you in that they should be more supported with WordPress. Very well done though, I now need to get Safari 3 so I can have a better user experience.
Armen Says:
11:26 pmJan 01Very tasteful. However, there’s a severe issue with your homepage. When I try to go to it, it shuts down my whole browser (latest version of FF) just before it fully loads.
I’ve never had a site do that in my life.
Jim Jeffers Says:
8:55 amJan 03I spoke with Armen about his issue via email and have been unable to replicate his experience on my own Vista installation with the same version of FireFox, now was I able to determine what different content on the homepage was causing the crash.
If anyone else here experiences similar issue please write me.
David Storey Says:
11:22 amJan 07Its great to see the use of CSS3 here. Opera also supports the text-shadow in Kestrel. Sadly not the border-radius or multiple backgrounds yet, but we’ll keep plodding away. It would be nice to see some of the advanced selectors here too.
Jim Jeffers Says:
1:28 pmJan 07Thanks David! I’m looking to multiple-background images more than any other CSS3 feature. This is the most significant enhancement I could ask for as a designer.
Ptah Dunbar Says:
4:36 pmJan 07Great work, IMO, I love how you reinvented the footer! This inspires me to look into adding microformats on my future blog. Seems like a microformat wp plugin would be of great use right about now.
Are You Ready and Willing for CSS3? « Lorelle on WordPress Says:
8:58 pmJan 07[…] A Refreshed Design for 2008 by Don’t Trust This Guy, I found a glimpse of some of the new CSS3 features and possibilities including multiple background […]
The Brian Shaler Blog » ReadPhoenix: Top Blog Posts of the Week #4-5 Says:
3:53 pmJan 12[…] Blog: DontTrustThisGuy.com Author: Jim Jeffers Company: Sitewire Post Title: A Refreshed Design for 2008 […]
bakazero Says:
8:36 amJan 29Great Work! Nice Theme!
It’s really unnice in my IE6…
The .png image isn’t transparent.
But, when I’m using the firefox, the Drop Cape is really Awesome!
Can’t wait for the next update of firefox to support the multiple-image-background…
Get Ready to face the new style with CSS3 | bakaDesign Says:
2:53 amJan 30[…] you too don’t know about the Drop Cap (CSS2 feature), you can see the implementation at donttrustthisguy.com. It’s great CSS effect but doesn’t supported by […]
The “Best” Kind of Design Exposure! | DontTrustThisGuy.com Says:
3:17 pmFeb 29[…] What you can’t tell from the surface from this design is the technology under the hood. I took this site as a chance to experiment with extensive implementations of Microformats and also took advantage of some new features in CSS3. So if you’re interested in seeing just how I did it check out my article ‘A Refreshed Design for 2008.‘ […]
Interaction design Says:
3:08 amApr 15I like the footer too, pretty original. Well done.
Tasarim Web Says:
8:27 pmMay 05Great Work! Nice Theme!
It’s really unnice in my IE6…
The .png image isn’t transparent..
Tom Says:
2:33 amMay 15the theme is great in firefox but as Tasarim said I am also facing the same problem in IE. Otherwise its simply awesome
Daniel Says:
5:51 amMay 19How cool are some of the features of CSS3!! Multiple backgrounds are fantastic!
Design Says:
4:52 pmJun 30Hi, I love the coffee cup stain design idea, great stuff
Design Chester, Cheshire UK.
Grafilate Says:
6:23 amJul 04Great Work! Nice Theme!
It’s really unnice in my IE6…
The .png image isn’t transparent..