This site was developed through a marketing agency that had sold the design work and needed us simply to implement it. The purpose of the site was to provide Pennsylvania drivers with information to reduce the incidence of car theft. Our job was to write the site, including the "kewl" JavaScript and Flash bits in a browser-compatible manner.
There were three main page designs involved for this site: a splash page, the home page and the inside pages.
The splash page randomly loaded one of fifty Flash movies, each representing a tip to prevent your car from being stolen. The tips were "typed" in with the sound of a typewriter playing in the Flash movie. The splash page contained a link to allow a user to skip directly to the home page.
The Flash files redirected the browser to the home age when the movie was completed. Web visitors without Flash saw the tip as linked text.
If you have Flash installed, you can view the tips by clicking the links below (which redirect back to this location after the animation plays):
The home page had JavaScript drop-down menus as shown in the screenshot below. For browsers without JavaScript, regular text menus were provided.
The page included JavaScript mouseovers to highlight the linked images on the right. This was written using object detection; thus most browsers got the full effect shown below, but browsers without the appropriate object retained full functionality without seeing error messages.
Each of the inside pages randomly showed one of the 50 tips across the top of the page as a Flash file, which "typed" out similar to the demos shown for the splash page. Browsers without Flash were fed an animated GIF of the tip instead, which looked identical but did not include sound.
A Flash car map was developed to explore the tips. As you moused over the car image, various tips appeared on the page.
Browsers without Flash saw an image of the car that popped-up the appropriate tip using JavaScript in conjunction with a client-side image map.
Browsers without JavaScript received a simple web page listing the 50 tips.
If you have Flash installed in your browser, the Flash car "map" can be viewed here (link opens in new window). Mouseover the car to view the various tips.
All users had access to a plain vanilla web page with the 50 tips listed, a PDF formatted for printing, or a form for ordering bulk brochures.
The current http://www.watchyourcar.org is being maintained by other developers and is still "kewl", but no longer works for users without Flash or Javascript installed. Worse than breaking browser-compatability is that the site is no longer ADA compliant.
contact ornery-geeks to discuss your needs
Clicking on these icons will open a new browser window:
© 2006 ornery-geeks