Everyone likes to look at pretty things, designers just get a little more involved. There are a host of design inspiration sites out there but Faveup.com divys their content up into logos, business cards, flash websites, and CSS websites; something for everyone. I love browsing through creative offerings and this site keeps my imagination going in the online side and the print side of things.

Organized code is easier to read/understand code. When coding you should always keep it as tidy as possible in case someone else (or even you) has to revisit it down the line. Smashing Magazine gathered the best tools to help you clean up your krufty code in various programming languages.

CSS Beautifier looks to be the best CSS optimizer mentioned by Smashing Magazine. You have complete control over the formatting of your style code including the ability to add a new line, space, tab or nothing after pretty much any CSS property. The best feature has got to be the Alphabetizer which will let you sort properties within a selector or the selectors themselves. Be careful with the last options because changing the order of your CSS selectors could change the way your CSS behaves on a site. Order is important in a cascading stylesheet.

My Great Free Online Beautifier for JavaScript does exactly that. There are no options to tweak but this handy tool takes your garbled JavaScript code and lines up the brackets and adds new lines for legibility where needed. Perfect for untangling those long lines of code that were squished down to a single line.

Obviously these two are the tips of the iceberg as Smashing Magazine has more tools for other languages. These two struck me as the most useful to a web developer and that is why they have made it in to my bookmarks of web goodies.

I am part of the very select few (web designers/developers). That is why I get paid the big bucks!

The Retro Theater CSS design by Eric Roge is a perfect example of what can be done with a little creativity. The trick to pull this wffect off was using background images attached to several different extra divs to create the theater. The content is contained in a div with an ID of “container” then centered and set to a width of 450 pixels. Since the other theater elements need to stay in place when a user scrolls, their position is set to fixed which allows the movie screen to scroll without using an “overflow:scroll” on the container div. While it may seem like more work to make the screen scroll this way, the extra effort pays off with a more natural scrolling experience for the audience. No matter where the mouse is on a page the use of the scroll wheel will be consistent. The static seen flickering on the movie screen comes as an animated gif set as a background image on the container div.

I bet there was a lot of trial and error involved in developing this layout but the results speak for themselves. Eric did a spectacular job of capturing the feeling of an old retro theater. If this was a site for a movie theater or film festival the design would separate them from their competition while conveying their message in a unique and interesting way.

Browsing the headlines at CNN today I noticed a link to preview their new beta look. Here is a look of the current design followed by the new beta look…

As you can see, CNN is trying to better organize their information as well as web 2.0-ifying their look with rounded corners and brighter colors. Under the shiny hood they have ditched all table-based layout elements (<table>, <tr>, <td>) and have instead gone with a 100% standards-based layout (<div>, <p>, <ul>, <li>). For the laymen, CNN has made their layout lighter in code and easier to maintain.

The bad news is CNN is relying on a lot more JavaScript files; 15 total scripts on the new homepage compared to 9 on the old. For a comparison, other news sites like MSNBC.com uses 12 and USNews.com uses 10. The more scripts a page needs to call the longer the load time as the browser has to download the complete JS file before the page continues to load. Below is a table outlining some other technical stats between the previously mentioned news sites.

With the technical bits aside, the new design greatly enhances usability, especially in the article pages. Thanks to AJAX a reader can interact with photos and video on the page without being forced to reload or pop-up a new window. This makes things like their in-line photo displays a joy to use. But photos are not the only thing that have been made easier to use; CNN’s new YouTube-inspired Flash video player has its own little tab that comes into view when needed and tucks neatly away when not in use.

Flash video players are universal and can be used on any system with the Flash plugin. This is a big step up from the former Windows Media only video option that came in a pop up player on the old CNN. Not only is video more user friendly but it is also bigger making it a much more enjoyable experience.

Conclusion
The new look provides several necessary improvements as CNN looks to focus more on multimedia driven content in the future. The changes that I have seen today are a big step forward and I look forward to checking back as CNN remains my top spot for national news. I look forward to seeing whatever else they may have in store.