Goodbye to em’s…Welcome back pixel font sizes!?

Sam Bishop — Fri, 10 Jul 2009 03:52:34 +0000

Happy days to web designers and developers across the world. There have been quite a bit of posts lately about dropping em values as font-sizes and switching back to pixel sizes. This will definitely save headaches for lots of us. Cameron Moll’s article explains some of the reasoning behind this but it makes all the sense in the world to us.

I also heard on a recent Boag World podcast that this would probably be adopted for the host’s company as well in their future developments.

Yes, em values as font sizes will scale the text larger when you set the browser’s text size larger but many modern browsers have replaced the shortcuts for this with page zooming instead. Yes you run the risk of zooming in so much there is horizontal scrolling but I think if your text size is large enough overall you can eliminate this problem.

No need to go into further detail but you can read the full article and listen to the podcast using the links above in the page copy.

What are you other designers/developers going to do out there? Stop using em values and revert back to pixel font sizes? Or stay with the headaches of em valued font sizes?

jQuery for added enhancements

Sam Bishop — Thu, 18 Jun 2009 16:33:53 +0000

I thought I would write a little post about how jQuery can be used for little usability enhancements and effects. Now I would never recommend using jQuery without some prior Javascript knowledge but you can definitely jump right into jQuery if you want. I was fortunate enough to learn enough Javascript over the past year (see DOM Scripting by Jeremy Keith) where I have really been able to use jQuery to its full potential. For those of you that don’t know jQuery is a Javascript library that takes out a lot of the tedious coding that is required in Javascript. The packed version is only 19kb so the added functionality is definitely worth it. Now onto some examples.

One of our most recent clients, MVP Software Inc., wanted to make use of some scrolling and fading elements. Now a year ago I would have used some simple flash elements. I know now that this is just overkill. Using jQuery and the InnerFade plugin we were able to successfully rotate the client testimonials (RANDOMLY) in the header (see the header on any page) and rotate the images on all the module pages (see rotating images here).

Another example would be the simple reveal that is used here for our FAQs for one of our clients. We cannot disclose who this is for but look at this simple function.

$(“h3″).click(function () {
if($(this).next(‘div’).is(“:hidden”)) {
$(this).next(‘div’).slideDown(“slow”);
}else {
$(this).next(‘div’).slideUp(“slow”);
}
});

This simple function basically will reveal the div following immediately after the h3 that is clicked. Once revealed, clicking the h3 again will slide it up and hide it. This makes things very easy if you have the answer wrapped in a div following the h3 that is your question. Now you must make sure the initially hide those div’s in the css but this function would require a ton more code to do strictly in Javascript with using jQuery. This just makes things a lot easier to digest and to code. See the basic reveal in action. UPDATED: 11/2009 for proper graceful degradation. If Javascript is disabled the answer will automatically display.

These are just some basic enhancements to websites that are not really necessary but do add a nice touch. Do I think jQuery is necessary in every project? No. But do I think jQuery can make your life a lot easier when adding simple behavior details to web projects? ABSOLUTELY.

CWS Blog » Usability

Goodbye to em’s…Welcome back pixel font sizes!?

jQuery for added enhancements