This image has a common classname ( fallback) for easy CSS targeting. The first element inside the animation wrapper is a composite fallback image for browsers that don’t support CSS animations. Approach & structureĮach animation illustrating the browser chrome ( One, Two, Three) is wrapped in a div element with a common class applied ( animation-wrapper), along with an id we can use to target the specific element with JavaScript. The complex interplay of multiple elements moving both sequentially and in tandem really drove home the need for a CSS animation editor (vote it up!). This called for fairly complicated animation sequences that had to be quick and buttery smooth. In order to demonstrate features of Firefox, we needed to simulate the way interface elements respond to user actions opening and closing tabs, rearranging icons, adding a bookmark, and so on. This also gave us a chance to create some snazzy animations to show off some of the advances in CSS and SVG supported by the current generation of browsers, both on desktop computers and mobile devices. Another big target audience are Firefox users who haven’t yet updated, so we needed to give them an overview of what’s new.
#MOZILLA FIREFOX DESKTOP PAGE DOWNLOAD#
Naturally, the main audience for these pages are people using browsers that aren’t Firefox, so we wanted to illustrate the new Firefox design in a fun and compelling way that gives them a real sense of what it looks like, hopefully encouraging folks to download it and see it first hand. This redesigned browser called for redesigned web pages to showcase the new interface (the tabs, icons, menus, etc., collectively called “browser chrome”) and new features (especially the new customization menu) As you may have noticed, Firefox for desktop computers (Windows, Mac, and Linux) got a redesigned interface with the release of Firefox 29.0.