Román Cortés managed to create a dead-on recreation of Homer Simpson using nothing but HTML/CSS. To boot it is essentially a vector image that will scale if you increase the text size of your browser. Go to the page and press the control and the ‘+’ key at the same time to see what I mean.

The source code isn’t too pretty but for this spectacle it is certainly understandable. It just makes a good case that open technologies like SVG, which will make it easier to construct vector graphics out of XML code, need to be adopted much faster.

For the past month I have been working feverishly on the latest release of America’s Best Graduate Schools put out by U.S.News and World Report. Today we finally launched it to the public and I wanted to show the difference between last year’s release and this years.

The old Best Graduate pages were constructed with several year old PHP code and hosted on a couple of Apache servers. Much of the layout was done with tables (spacer .gifs ugh…) which became very difficult to manage after many annual revisions.

This year we decided to re-do the whole thing with a new look and a new Zope backend. The HTML and CSS code was completely modular for maximum efficiency. It was actually a lot of fun seeing the whole thing come together.

So have a look around the new site and let me know what you think. You can see the official blog post about all of the new features and functionality here. If you want to know some of the technical details, leave a comment. There was a lot of mental energy that went into the design of the site. But now I’m beat from the pre-launch stress and look forward to getting to bed before midnight.

I spent a good chunk of today re-jiggering the look and functionality of the comment system here on my blog. Using the WordPress Thread Comment plugin readers and myself can respond directly to other comments complete with e-mail notification. Gravatar is a globally recognizable avatar plugin giving everyone who posts their thoughts to my blog the option to show an icon representing themselves. If you don’t have a Gravatar account head on over to Gravatar.com to register your e-mail address. Finally, I installed WP-Chunk which simply minimizes long URLs posted in comments and prevents them from breaking my layout.

But most importantly I re-designed the look of comments making them easier to read. I hope this will encourage more discussion on my blog and if you have any feedback, please leave a comment!

P.S. If you need a smattering of comment designs for inspiration check out the comment design showcase at SmileyCat.com.

Adobe released it’s Air product today making it official and peeling off the cliche` beta title. Adobe Air allows developers to build desktop applications using web technologies like HTML for structure, CSS for presentation, and JavaScript for behavior. Flash and Flex, Adobe’s own web technologies, are also rolled up in the mix. Professional authoring tools like Flash CS3 and Dreamweaver CS3 saw updates today to allow development within the popular tools. Aptana also offers a free plugin for their open-source development tool Aptana Studio.

I have been playing with Air apps for the last couple of months while the product was still in beta. There are a lot of clever applications that are more like widgets then conventional full-blown desktop programs. For example, the Adobe sample app PixelPerfect was a simple ruler overlay letting you measure anything on your screen. This little tool comes in handy for web development where there aren’t any rulers on the side or measuring tools like in Photoshop. Powerhouse auction site eBay created their own Air app that banishes the concept of refreshing the page so bidders can watch their auctions in real time. But perhaps the biggest crowd of Air apps belongs to Twitter clients. Thwirl, Spaz, Tweetr, and Snitter are just a handful.

I thought John Ballinger had let his Twitter client, Tweetr, go to pasture without an update since the end of November. With each new Air beta release more functionality would break edging me towards Jonathan Snook’s Snitter. But alas, Tweetr is alive again with version 3.0 launching today to coincide with the official Air release. I’m happy as a clam to have my favorite Twitter client back and to see so many great ideas that have seemingly sprung out of Air.

Valentin Agachi’s XHTML Challenge takes the rating meme under the hood letting users compare websites based on their (X)HTML markup. When a challenge is set up between two sites, a PHP script from XHTMLChallege.com slurps up the source code and begins a detailed analysis. Facets for competition include which doctype was declared, validation, content length in bytes, a ratio of content/markup/ and whitespace, use of conditional comments, and the number of table tags used.

As I have written about before, there is more than just HTML that goes into making a sexy source. I think XHTML Challenge could expand their analysis to include the number and positioning of CSS and JavaScript files, use of microformats (which results in more semantic, though bulkier, markup), and total file size of all components. This would paint a better overall picture of all the necessary components that go into a modern design.

Frontend web developers, like myself, take a lot of pride in how we structure our code. HTML coding is all about semantic, well-organized markup that is as small as possible while providing a solid structure for the content. It is good to see that there are others out there like myself that can appreciate the thought and planning that goes in to the under pinnings of a modern website.

XHTML Challenge should not be confused with Command Shift 3 which rates the aesthetics of a site not its code. Maybe the two sites should get together producing the ultimate website rating tool!

via (Web Designer Wall)

With Super Tuesday right around the corner, what is an undecided web geek to do? Why break a decision down into technical specs, like any other decision they have ever had to make.

Robert Accettura did a little survey of the presidential-hopefuls websites and noted what technologies were used on the front and backend. If you were to vote solely on who is using the best web technologies, your best bet would be Barack Obama. His site is run on an open source operating system, uses a CSS based design, as well as HTTP compression. Hillary Clinton and half of the Republican candidates are running Microsoft IIS; surprise, surprise! This survey also showed how web standards has come a long way as all of the candidates but one (Mike Gravel) neglected using a table-based layout.

Does a well-built website architecture make for a great leader? Probably not. But if you are a web geek you will probably get a kick out of these stats, just like me. Check out Roberts page for the complete breakdown.

Hot or Not is an iconic web 1.0 site with a basic concept: Look at a picture of a person and mark on a scale of 1-10 how hot they are. Command Shift 3 takes the same concept and applies it to web design. Frankly I find the web design implementation far more interesting than the original Hot or Not concept. But judging a website on a scale of 1-10 sounds overly-complicated. CommandShift3.com instead puts two websites side by side and it is your job as the all-knowing visitor to click on which one you like best.

The cool thing is you can see if you picked the crowd favorite and what percentage of people agree with you. If you like a site so much you can click through and leave a comment about it or visit the actual page. Too lazy to wade through the thousands of contenders? Then check out the Best & Worst sites in a variety of time frames. And if you are looking for something specific you can search by keyword or browse their tags.

While the concept is super simple to grasp, the impact of a site like this is a lot more compelling than the loads of CSS galleries that litter the net. The interaction and side by side comparison really set it apart in the showcase arena. I enjoy the simplicity of the site, showing me only two designs at a time instead of bombarding me with thumbnails like some other sites do. In conclusion, this site is a great way to get a taste of some great web design that is out there on the net while keeping it fun and engaging. I added my blog to the fray to see how it would stand up. Wish me luck, and we’ll see if my design chops can rise above the crowd.

Oh and in case you didn’t know, Command Shift 3 is the keyboard shortcut to take a picture of the screen in Mac OS X.

Kevin Rose’s Internet video startup, Revision3.com, unveiled its new look today. The homepage has been simplified providing an immediate focus with a large feature box that rotates through different site promotions. Each show now has it’s own section which is easily accessible from the “Shows” drop down menu along the top of every page. Streaming video flash players on each episode page have been bumped up to 555×337 which really draws viewers in. Each show has a plethora of different subscription formats which are only a tab away from the recent episode list. The overall restructuring is a welcome improvement, but unfortunately it came at the expense of visual design.

The new color scheme is drab and bland with a “corporate” feeling that first comes to mind. I suppose this is to appeal to advertisers that Revision3 is trying to attract to buy ad inventory but it feels like something from early 2000. The old design (pictured below) felt slick and cutting edge just like the network itself. But the worst offender of this new look is the typography. For one, it is a light gray (hex code #666666) and could stand to be darker (like #333333) for increased contrast and thus increased readability. The line-height is also not set leaving lines scrunched together making it harder to read. In short, the new design is missing the final polish which used to set it apart from other media websites on the net.

Daniel Burka has been the lead designer on most of Kevin Rose’s web projects but it looks like he didn’t have a hand in the new Revision3.com. He must be too busy working on Digg and Pownce, two sites I really admire from a design perspective. Luckily I have no reason to visit the Revision3 site on a regular basis except to subscribe to new shows. I hope they take a second look at things and update the style to match the new functionality.

Four local area DC Developers (Doug, Gabe, Jason, and Min) got together and created two excellent Twitter mashups that were released this week.

Twittertale.com weeds out public tweets that have swear words and then highlights them on their school room inspired site. It also keeps track of the top 5 naughty words as well as the users who indulge in the most sailor talk. As of this posting, @bumblebunny looks to be an interesting person to follow. As an extra twist, I think the swear words should be censored with *’s leaving the audience to guess what swear words were being used.

Politweets.com takes the same concept from Twittertale but applied to U.S. Presidential candidates. The two major political parties are seperated out and the political candidates are ranked in the middle based on the number of mentions on Twitter. This is a neat way to extract data from such a large body of political commentary and the guys certainly nailed the design with a gorgeous yet simple layout.

I decided to contribute a tweet to both sites at the exact same time…

It’s hard to imagine being somewhere that locks down the web browser so much that you have to resort this nifty trick I read on DownloadSquad.com, but desperate times call for desperate measures. If you can’t reach the web through Internet Explorer due settings beyond your control and forgot your portable Firefox thumbdrive then simply open up the calculator or MS Paint and click “Help”. From there go to “Help Topics,” which will bring up a help window. Now all that is left is to right click on the title bar and select “Jump To URL.” Type in any web address you like, but make sure to include “http://” at the beginning and you should be good to go.

What you are basically looking at is a stripped-down, basic version of Internet Explorer which is built into Windows and used to display CHM files, or Microsoft Compiled HTML Help files. Sure there are no niceties like bookmarks or your comfy, cozy Firefox extensions, but if you need to check your e-mail or Twitter account and this is your only resort, you will put up with a little cruft in order to get your stuff. Besides there are back and forward buttons, what else do you need in a browser?