Turning Off Underlying Headlines in sIFR

I highly recommend adding sIFR to your web site, if it is appropriate. I have to admit for a long time I didn’t like it. But, sometimes adding nice looking typography to your site can really make it pop in a way that you can only do with Flash or images. So, the more I use sIFR, the more I like it, and the more I use it, the more I understand how it works. If you don’t know what sIFR is or what it does, please check out Mike Davidson’s sIFR site.

sIFR works by using Javascript and the Flash player to replace headlines in your web page with nicely styled fonts in Flash. If you are a novice to sIFR, there are certain tricks to using it that can greatly enhance your implementation. I won’t go into all of them here, but I will talk about turning off your underlying headlines in sIFR.

When you have sIFR installed on your site, sometimes you tend to notice the unstyled underlying text show up briefly before being replaced by Flash. If you have this problem, you will want to eliminate it to get the best user experience possible. It has a kind of jarring effect when you see the font change suddenly like that, so it is best to avoid it.

The creators have provided a way to turn this off so that you will only see the Flash fonts load when the page loads. You can do this by adding a stylesheet to your header called “sIFR-screen.css.” If you do this, then your headlines should not show by default. This works by creating default styles for your headlines with the class “.sIFR-hasFlash.” All headlines are then set to “hidden” so they will not be displayed if you have javascript and Flash 7 installed. The genius is that is you don’t have javascript or Flash 7 running, the normal unstyled headlines will still be visible.

However, you may want to modify the code if you are only replacing a certain group of headlines, and not all of them at once. You can do this by adding an id to your headers and then adding the id to the header style in your sIFR stylesheet.

I need to warn you here, not to remove the “hasFlash” class from your header styles. If you do this, the headlines will not show up when javascript is not running or you have a version lower than Flash 7. This may be rare, but you can modify the sIFR script to work only with Flash 8, like I did here. I made this mistake, which is how I know you need it.

So in closing, make sure you turn off the underlying headlines when using sIFR. Also, be sure to test your work with Javascript turned off, to make sure those users who have javascript turned off or don’t have the right Flash player can still see your headlines.

Testing Flash Player Compatibility Across Browsers

Today, we were informed by a client that one of the sites we had been working on was not working properly. When the client went to the site, they could see the site, but it was behind a transparent white screen. We had no information on what platform or browser the client was using, but I assumed it was a compatibility issue with the Flash player.

On this particular site, it was using SlideShowPro, UFO and sIFR, all on the home page. Chris noticed that one of the slideshows was only compatible with Flash version 8. He thought if we downgraded it to 7, that would solve the issue. I agreed, but I wanted to test it first to see if we could reproduce the problem. I thought that this would help us deal with Flash player compatibility issues in the future.

I decided to look for a way to test different versions of the Flash plugin. I found the archived Flash player download page on Adobe’s web site. I recommend bookmarking this page. You will need to download these plugins if you want to test different Flash player versions in your browsers. I had a problem though. I could only get the players to install in Firefox. I couldn’t install any of those plugins in Internet Explorer.

So I installed Flash player version 7 in Firefox. When I viewed the site, it was obvious that was causing the problem. Don’t ask me how the client had Flash player version 7 still on their browser. That seems to be about par for the course around here. Anyway, downgrading the slideshow to version 7 fixed the problem, and the site is now compatible with Flash 7. Voila!

In researching this problem though, I came across another neat little tool, called Plugin Switcher, that I recommend you try out. Right now, it is only compatible with Windows. But, it allowed me to install as many versions of the Flash plugin as I wanted and switch between them on the fly.

Plugin Switcher claims to let you switch between Active X plugins also but I could not activate that feature. As a result, it only worked in Firefox for me, however it did that perfectly. There is a free version and a paid version. I only tried the free version. I contacted the developer to find out how much the full version is since most of the site is in German. If I ever try out the full version, I will post again, and let you know what I think.

Secure Contact Form for WordPress

I love wordpress, but one of the things it lacks is the ability to add a contact form. As a result, I have been looking for a way to easily add a contact form to wordpress. Today, I ran across this contact form plugin that seemed to be what I have been looking for.

It was created by Mike Cherim and Mike Jolley. It was a snap to install, and once I installed it, it works great. It requires a minimum of setup, and you will have a secure contact form running in no time at all. This is the wordpress contact form plugin you’ve been looking for.

It is secure in that it adds a CAPTCHA which prevents automated submissions to help combat spam. I recommend installing this today if you require this functionality on your blog. I am installing this on all of my sites that use wordpress. Dowload the plugin here and check out my contact form here.

Now if I can find a stats plugin for wordpress that would really rock!

Celebrity Choppers

We have been working on a site for Celebrity Choppers for the past month, which launched yesterday. Celebrity Choppers is currently a TV show without a home. The synopsis is a group of guys from Tennessee build custom chopper motorcycles for celebrities.

I am really excited about this site and really enjoyed working on it. It was designed by our Creative Director, Chris Kosman. I did all the CSS layout and design. You can view it at http://www.celebritychoppers.net/. This is a great looking site which we are really proud of.

Celebrity Choppers

Active State Class

There is a current trend in web design I will call, “active state classes.” An active state describes a link in web page navigation that is a different color than the rest of the navigation signifying that the user is currently on that page or in that section of the web site.

Active states of links are created in the CSS of a site by assigning a class in CSS named “active.” You then give the class a different color than the rest of the navigation to make it stand out. Once the user navigates to that particular page, the “active” class is added to the link. So as the user navigates around the site, the current page or section is highlighted by the active class creating an active state.

Most current web designers and developers are aware of this trick. But, I was reminded of something this week while using this technique in my site design. This link state works differently across different browsers.

In styling links with CSS, there are 4 pseudo classes for each link state, link, visited, hover and active to which you can assign different styling. With Firefox on Windows and Mac, as well as Safari on Mac, you only need to specify one active class for the “link” pseudo class to make the active state work. This will not work in Internet Explorer 6. In IE 6, you need to specify the active class for all four link pseudo classes to make the active state work.

I am describing this technique here because I forgot to do this for all 4 pseudo classes. I then tried to figure out why it didn’t work in IE 6, until I looked at a previous site I had done. That is when I figured out what the problem was.

Note, I have not tested this in IE 7 yet. I am not testing my design in IE 7 yet. I only have one PC in my office, and I still have IE 6 installed on it, since it usually gives me the most trouble.

Multi-level Vertical Suckerfish Dropdowns

I am working on a site right now that requires suckerfish dropdowns for the navigation, but I needed to modify them so that the links for the navigation bar could be vertical, instead of horizontal. I found a tutorial for a modified suckerfish at HTML Dog, http://www.htmldog.com/articles/suckerfish/dropdowns/, which had multi-level dropdowns, so I used that as my starting point.

The HTML Dog tutorial showed how to build multi-level dropdowns where the second and third levels come out from the side. I needed a vertical navigation with multiple levels and all additional levels coming out from the side. I decided to try and modify their suckerfish to make my vertical multi-level navigation.

It was pretty easy, and in the end, I got the exact result I wanted. All I had to do was make the first level behave the same way as the second and third levels in the HTML Dog tutorial. I have posted my example here, vertical suckerfish dropdowns.

Lorem Ipsum Text Generator

I ran across an excellent Firefox plug-in today if you design or build a lot of web sites. It could actually be used for print as well.

Doing web site builds, I always need Lorem Ipsum, or dummy text, to fill out the content areas of the sites I am building. A while back, I found a web site that I normally use for generating Lorem Ipsum text, http://www.lipsum.com/.

It works very well. But, whenever I use it, I have to search for the web site in Google. Then, I run the program that generates the text. Then, I copy and paste the text in my web page. It works very well. But, I remembered hearing about a plug-in for Firefox that generated Lorem Ipsum text.

Today, I decided rather than go through all those steps again, I would try to find the plug-in and see how well it works. Well, I found it and after trying it out, I think it works great!

The plug-in, LoremIpsum Content Generator, can be found at https://addons.mozilla.org/firefox/198/. Once you download and install the plug-in to Firefox, it is very easy to use. Just go to the tools menu, and click on the generate Lorem Ipsum text option. There it brings up a window which gives you several options. You can generate text by character, words or paragraphs. After that, all you have to do is click the button to copy the text to the clipboard and paste it into your work.

I recommend this plug-in to anyone who uses Lorem Ipsum text on a daily basis. I think you will it is a small step but is worth it to increase your productivity!

Control Letter Spacing Using sIFR

I am using sIFR on a project I am currently working on. The design of the site I am building required the letters being rendered in sIFR to be spaced out. I tried to change letter spacing in the default version of sIFR 2.0, but I could not get it to work.

So, I did a search on Google for “spacing letters in sIFR” and found an excellent hack that allows you to change the default spacing of the letters. This hack can be found here, http://forum.textdrive.com/viewtopic.php?pid=102296.

The current version of sIFR (version 2) doesn’t allow for spacing of the letters because it is only requires Flash version 6. However, Flash version 8 does allow for the spacing of letters. So the fix for this basically consists of 4 steps.

  1. First add a line of code to the dont_customize_me.as actionscript file.
  2. Edit the sifr.js file to check for version 8 instead of 6.
  3. Add the letter spacing code to the sFlashVars parameter in the replacement calls.
  4. Save the swf file to be compatible with Flash 8 and actionscript 2.

That is it. It worked perfectly. See the example linked to above for the full instructions.

Smoky Mountain Convention & Visitors Bureau

This was a redesign of the Smoky Mountain Convention & Visitors Bureau that was launched right before Christmas. It was a lot of fun working on this site.

The design of the site came from a local advertising agency that Mediapulse sometimes partners with. The interesting part of the site is in the Flash. The Flash parts, including all of the creature animation, was done by our Art Director, Chris Kosman.

The site was built by me, using standards compliant CSS. All of the Flash uses Unobtrusive Flash Objects (UFO) so that it will validate. The site also makes use of sIFR, which I am starting to use more of, for the headers.

Anyway, we are really excited about this site! Check it out at http://www.smokymountains.org/.

Building Web Sites

I live in Knoxville, Tennessee and work for a web development company called Mediapulse. My main responsibility at Mediapulse is Internet Marketing. But, most of the time I spend building the web sites we develop for our clients.

I support CSS and web standards, and at Mediapulse, we design all of our sites that way. I am starting this blog to talk about the CSS and design that I use on a daily basis. I plan on posting CSS tips and tricks that I find as I build web sites. I will also be posting about the projects I am working on and linking to released sites.

I hope my readers will find this site useful and that it results in a community here. If I can help a few people learn about CSS and web design, then that is what I set out to accomplish. If nothing else, a year from now, I will look back and see what I have done for the past year and use that to better myself.

Thanks for reading.