David Walsh ported Jonathan Snook’s jQuery menu effects to MooTools. It a quick and easy tutorial which adds cool animation without having to use Flash.

While it doesn’t improve functionality of the menu, it does add a unique touch to the everyday CSS hovers we see in almost every website nowadays. I like to keep JavaScript at a minimum if possible, but this script seems pretty lightweight and fast loading.

Check it out here.

Netuts published a screencast tutorial on how to use CSS sprites. It’s a good web optimization technique that I see more and more, but could be adopted throughout a lot more sites. Check out the video below. Make sure you watch in fullscreen mode or go to Netuts site since I’ve scaled the video to fit in the blog post.

For the most part it’s a good idea to use variable sizes like em or percentages when declaring font-size as opposed to using fixed px when a user resizes the text in a browser. Most browsers now resize px, but I found it to be better practice using em or percentages.

Most of the work we do uses the YUI-CSS library which has a handy chart for determining font-size using percentage when using their library. For those not using a grid/font library, Aloe Studios Blog has a small utility EmChart to help calculate ems from pixels.

It’s worth checking out and hopefully it will alleviate some of the headache in trying to determine how to use ems.

Firescope is a Firefox add-on that allows you to search HTML and CSS reference material directory from Firebug.

After installing you will see a Reference tab in Firebug. From there you can search for HTML Elements, HTML Attributes, and CSS Properties. It shows you what the element is and also it’s compatibility in Internet Explorer 7, Firefox 3, Safari 3, and Opera 9.

It’s a pretty simple add-on, but works as intended. For beginning developers I can see it helping quite a bit and for advanced developers as the HTML spec changes it will give a quick view of what works and what doesn’t.

Starting to use CSS3 techniques that degrade gracefully in older browsers will help design transition into the future. As of right now using these techniques in a design is a secondary thing as opposed to using it for the crucial look and feel of the website. Smashing Magazine has some great tips of including a little bit of CSS3 into designs and worth a look.

Even though the Microsoft servers were down part of the day on Friday, I was lucky enough to download the Windows 7 Public Beta and install it on a dedicated test machine. Being a web developer, I was interested in seeing if there would be any rendering differences across browsers as opposed to the machine performing better than Vista. I’ve never really had any problems with Vista. My primary development machines are running Mac OS X and I have a single machine running Windows on Boot Camp for testing IE7/IE8, Firefox, Safari, Opera, and Chrome. For the most part we follow Yahoo’s graded browser support. However, we’ve dropped support for IE6 and most clients are okay with that as long as it works in IE7 and IE8. If a client really wants IE6 compatibility, we don’t have an issue supporting it, but at the request of the client.

Safari is really the only browser across platforms PC and Mac that visually looks equivalent. Most of the issues I had seen in the past had been due to things like anti-aliasing. While most clients aren’t that critical on the look, they do question why it does look different on PC platforms vs. Mac platforms. Most people just want it to look and function pretty similar in all the browsers. While you can’t compare IE across operating system platforms, you can compare Firefox and Safari. You can definitely see a difference in Firefox on the PC platform vs Mac and the look in Firefox on PC more closely matches IE8. Some clients like consistent looks of buttons for form elements, and until only pretty recently were developers able to skin those buttons without having to jump through hoops.

When comparing Windows 7 and Vista, I didn’t notice any differences in how things looked. I’ve been testing in IE8 on Vista for a little while, so I’ve already adapted some of the issues with that. I think the multiple browsers are finally starting to converge to standards. It’s not perfect by far and still plenty of hacks in the CSS, but we’re definitely in a much better place than we were years ago. It’s refreshing to see and I hope progress continues on the matter. If you are interested in upgrading your test machine to Windows 7 I have yet to see any issues.

Ever since I’ve started creating XHTML/CSS for the most part have always started with a Photoshop PSD and chopped it accordingly to create a valid layout.  I initially purchased two full version copies to cover the licensing of my own machines which has a pretty large initial fee.  Over the years I have purchased lower priced upgrades in order to keep up to date and compatible with my latest Mac OS X machines/operating system.

For the most part, Photoshop continues to be the industry standard as far as graphic/web design goes and PSDs are usually what is delivered to be from a graphic designer.  Sure there have been times where I might get an Illustrator or a Quark file, but that’s usually not the norm.  It does a great job for what I need to do which is mostly resizing, measuring, and pulling pieces out of layers.  I could have a graphic designer send me the cut up images from ImageReady, but that doesn’t always give me the best results.  I’m much more comfortable having the designer send me the PSD and do my own cutting and optimizing for what I feel best fits the code/layout for the web.

I’ve always tried to look for alternatives that are better suited for my needs.  This lead me from Dreamweaver to SubEthaEdit to Coda which I use exclusively for development.  I was never really happy with Dreamweaver, but got the job done.  I am much happier with what Coda has to offer and it feels like it’s built for Mac OS X.  Also it’s cheaper at $99 vs. $399 ($199 upgrade).  When smaller companies develop the software it seems like there’s quite a bit more free updates before a full upgrade which also tends to keep price down.  Price is a small factor, but if a program is much better than I would consider paying more for it.

This is one of the reasons I’ve stuck with Photoshop for so long.  I followed the same progression with the graphics tools as I had with the development tools.  When Pixelmator first came out, it just didn’t have enough of the features that I needed for web development.  It probably had a good amount of graphic tools to help graphic designers, but wasn’t enough for my daily tasks.  The software has been out for a little while now and they are soon to release their 1.3 version which I’m currently using in beta mode.

They’ve done a much better job as far as adding features to get me to switch.  For the most part I am able to the work and it seems to run quite a bit faster than Photoshop.  Some things still make it a little difficult for me to use.  For example if you zoom and image it’s hard to tell what percentage you are actually at.  In Photoshop it shows a percentage at the bottom of the window.  Also if the image is larger than the screen, it doesn’t really do a great job of fitting it around the tools, it just puts the tools on top of the image.  I almost always have to resize the image to fit an open spot inside the tools.  When I’m cutting the PSDs I like to use the Marquee tool to cut my images for the web and sometimes like to crop there.  There’s a crop tool in Pixelmator, but at times it’s a little difficult to position.  It does however let you edit the crop area before actually cropping.  I would also like to see a live preview so I could compress the images as small as possible without losing too much quality.  Right now it’s more of a guessing game.

I’ve been using Pixelmator for about two weeks now for normal tasks.  I haven’t really had to do really complex PSDs.  I mostly just have basic layouts or image resizing for different sites.  I think I’ll have to use it for a little while longer and see if I run to any trouble with it.  For right now using Pixelmator and keeping CS3 on the back burner will keep me from upgrading to CS4 next month.  What’s more important to me right now is if I can be more productive.  Right now I think I’m just as productive, and if this keeps up at a lower cost.

The Olympic Games have started and it’s been a pretty good show so far.  There’s a lot of events, and I like to follow certain sports, but I can’t really stay glued in front of the TV on several channels throughout the entire day.  I don’t think clients would be very happy.  I do like to check out their websites to keep up with the latest standings and results.  For as long as I can remember using Olympic websites they’ve all been pretty good.

They offer the overall package: good design, good user interface, and best of all good functionality.  I’m able to find what I need in a pretty effective manner.  It’s nice to see that over the course of many years, even larger sites have transitioned into XHTML/CSS.  It’s been a long process, but I think many companies and organizations have seen the benefit.

NBC’s Olympic website does a good job as well.  I think people put more time into websites that will see a lot of traffic in bursts.  Of course these websites probably get the bulk of their traffic hit during times like this so it’s a good chance to shine in front of a large audience.

Well, that’s all I really have.  Do you like the Olympic sites or do you think some things could be improved?

Facebook has just released their new layout to its users today.  Just login to the site and you will be directed to the new layout.  I think they did a good job on the redesign and improved quite a few things over the previous beta versions I have seen in the past.

Facebook seems to be the standard as far as usuability in social networking.  The layout seems to load very quickly and they use AJAX technology effectively.

If you get a minute, it’s worth checking out.

Noupe had another great post yesterday that collects some of the most common bugs, hacks, and fixes that us front-end CSS developers use on a daily basis.  Those fixes are broken down in the following categories:

1. IE Bug Fixes
2. Centering A Block Element
3. Column Issues
4. CSS Positioning
5. CSS Float Concept
6. Easier Rounded Corner Solutions
7. CSS Form Issues
8. Worth Checking Out CSS

If you are trying to learn CSS or just wanted to review some of the tips, it’s a good article to check out.