The Sophisticated Logo Rotator
The challenge
Most of the customers we’re trying to sell Arena PLM to are not current PLM users. Our chief competitors are probably homebrew Microsoft Excel spreadsheets. So one objective for the homepage was to show that there are lots of successful, established companies out there already using the product.
The solution
Logos are much faster to recognize than just company names in text, plus (provided they're well–designed) they’re a nice and easy way to add appealing imagery to the page. However, put too many logos in at the same time and it can overwhelm the rest of the page. So we decided to have a single row, which would be a nice companion to the news ticker, and slowly rotate through the logos after a certain time interval. Having a slow, subtle animation would be key because it’s not something that we want stealing attention from the rest of the page.
You can see the final result on the current Arena Solutions homepage.
How it works
The HTML involved here is a basic unordered list, created dynamically through the magic of jQuery (you can view my source code here). There is a folder of customer logo images, and each has a name prefixed with a unique number that can be easily called randomly from the script.
The reason why it’s titled the Sophisticated Logo Rotator is that it goes the extra mile to be a bit more intelligent. For instance, simply pulling random logos from the pool each time would not be ideal, because you would occasionally get the same logo multiple times in successive rotations, or even multiple times simultaneously (in its early stages, my co–workers and I would play it like a slot machine). So it stores a record whenever each logo has been displayed, and once all of them have been displayed once, it deletes the record and starts over from the beginning. This way all logos in the pool of images are displayed equally as often.
It’s also not only accomplished with web standards (no Flash) but it also falls back intelligently if the user has CSS and/or Javascript disabled. The markup utilizes the <noscript> element to serve a single row of logos if the user has scripting disabled. Lastly it’s extremely easy to keep the logos and associated links updated as it’s all served from an XML file.
Big thanks to the people I was lucky enough to work with on this at Arena, Ian Andersen and Marc Escobosa, for designing this as I was mainly just responsible for the code on this one. If you have any questions or comments I’d love to hear them. Leave a comment on the associated blog entry or shoot me an email.
All code within is under Creative Commons license and free for use, just give credit where credit is due.