However, while presenting my newest work to a customer, reality hit me hard. The page displayed without styling in Safari (4.0.3 531.9.1) and Chrome (3.0.195.21) browsers. I went to investigate. After some time, I removed @Charset command from all CSS files. That fixed the problem but still made me look weird.

So until further ado, I’ll avoid using @Charset command in CSS. I advise you do the same.

In recent years, I had pleasure (yes, let’s call it pleasure) of working with several web designers. I also had pleasure of observing the latest stuff made by web designers on the net. I am yet to find a single designer that thought about people with disabilities. And I am not talking about heavy disability either. Not every one of us is young with perfect sight. Many people have problems with high resolutions, and even distinguishing colours. And we are not that old as well. Take WordPress theme I am using atm. Enhance fonts. You see what happened with tabs and search box? Yeah. But it looks nice in normal size. Right?

The funny thing though. I always pointed out the problem to designers. Nobody cared, but insisted the design stays as is. And I don’t even want to start explaining how much clutter do you need to add to HTML code to make fields rounded and expendable. Sure, you could do it using Javascript and perhaps this is the way to go anyway. But enough of that.

It is more than obvious that some don’t get the importance of great looking float-able, accessible and useful designs. And that is not OK. And it is not only a design issue as well. There is about 10% of people with some sort of optical problems. So 10% of all users will, in worst case, see your site distorted, or find it unusable. Excellent. Specially, if those are your customers.

Building web page as designer drew it is just not enough. Web sites that don’t scale are behind an era we are living now and in best case annoying to people with sight issues. So, use techniques that are available nowadays (and when CSS3 finally gets support it deserves, we all will be happy hypos) and don’t forget that you don’t represent everyone.

Writing HTML, CSS and JS for all those rounded buttons was fiddly, not to mention time consuming. The answer from designer: “You don’t need the design to float, scale, etc.”

Right. I will be covering that methodology (or wrongness of it) in one of my next posts. I just hope CSS3 support grows by 1000% in next week. Yeah, wishful thinking.

What to do?

A first thing that I always thought of was z-indexes. Only one problem there. Z-index doesn’t work in Internet Explorer in this case. But how can it be solved?

There is an attribute you can set for embedded objects called wmode. If this attribute contains value of transparent, you will force embedded object to display behind the absolute positioned one.

Example:

<embed width="465" height="285"
type="application/x-shockwave-flash" src="myflashanimation.swf"
style="" name="movie_player" quality="high"
allowfullscreen="true" allowscriptaccess="always" flashvars=""
wmode="transparent" id="movie_player"/>

Absolutely nothing. The only connection to Lotus Notes is, when you integrate this functionality into your database. It is a simple and trivial solution. I needed to create a form that will represent one single banner. This form contains name, URL, image, sort order etc. Look-up view for obtaining sorted banner list was created and some web forms that are already in “production” had to be altered, for loading of JavaScript class etc.

Prerequisites

This functionality depends heavily on jQuery library. It can be obtained here. I recommend minified version if you plan on hosting it yourself or, you can use Google Code link to link it from Google.

Next you need to obtain the adPlayer library. It is located here. I would ask you to not link the library directly from this link, but download it to your server and link it from there.

Getting started

In order to implement this application, you will first need to make a small HTML adjustment in the place where you want banner animator to be implemented.

<ul id="adPlayer">
    <li><a href=""><img src="images/ad1.jpg" /></a></li>
    <li><a href=""><img src="images/ad2.jpg" /></a></li>
    <li><a href=""><img src="images/ad3.jpg" /></a></li>
</ul>
<div id="adPlayerNav"></div>

Obviously you should insert link of your desire. The same goes for image src and alt parameters. Also, number of li elements can vary.

Next, at the bottom of the page (where your JS libraries are loaded and on load events are set), you need to load both .js files (jQuery and AdPlayer) , if you do not already have them. Next, add following (or if you already have onload event loader, just call loadPlayer() function).

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        loadPlayer();
    });
</script>

Now add some style

It is necessary to add styling to content thus far. CSS excerpt below will give you some idea as to how you can style things. Beware that #adPlayer height property must be set to height of a banner space. Also, some tweaking to .js file will have to be done, but nothing major (this will definitely be changed in future releases).

/* layout */
#adPlayer { list-style: none; height: 220px; margin-left: 0;
margin-bottom: 0; overflow: hidden; padding: 0; }
#adPlayer li { margin: 0; padding: 0; }
#adPlayerNav { position: relative; top: -1em; right: 1em;
text-align: right; }
#adPlayerNav ul { list-style: none; margin: 0; padding: 0; }
#adPlayerNav li { display: inline; margin: 0 0 0 0.1em;
padding: 0; }
#adPlayerNav li.adPlay, #adPlayerNav li.adPause {
margin-left: 1em; }
#adPlayerNav li a { cursor: pointer; padding: 0 0.5em; }

/* typography */
#adPlayerNav li { font-size: 1.2em; }

/* color */
#adPlayerNav li { border: solid 1px rgb(213, 213, 217); }
#adPlayerNav li a { background-color: white; padding: 0.5em; }

You now have fully functional banner animator.

Optimization

Loading 3+ 50K+ images in the middle of the page can never be a good thing. Thus, adPlayer library has a dynamic mode that can be used. This mode loads images after the page is loaded, which is a good thing. However, you cannot leave your banner space empty until then. A compromise solution is to load first banner in-line and all others after the document is loaded. Your HTML file must now look somewhat like this:

...
<ul id="adPlayer">
    <li><a href=""><img src="images/ad1.jpg" /></a></li>
</ul>
<div id="adPlayerNav"></div>
...
<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        loadPlayer( true );
        adplayer.add ("", "images/ad2.jpg", "");
        adplayer.add ("", "images/ad3.jpg", "");
        adplayer.generatePlayer();
    });
</script>

Loading loadPlayer method with true as parameter value will enable dynamic mode. Now you can add banners in desired sort order. First parameter is link, second image src and third image alt. After you are done, just call generatePlayer method.