The new Optima site has been a long time coming, mainly because it’s one of the largest sites we’re responsible for.
The large parallax images on the landing pages were custom-scripted — I wanted to use CSS3D, but various design decisions prevented that. While I would have preferred to never animate two large images in the browser at the same time, this code is optimized to handle them as efficiently as possible.
The site is also optimized for mobile use. The large images are replaced with smaller ones and the parallax feature is disabled. The large image galleries are built with jQuery Cycle2 and its “swipe” plugin for touchscreens. The top navigation is turned into two sliding menus, one sliding in from the right and one from the left as needed. Buttons are made larger for fingers. The desktop is slightly reconfigured for iPad-sized screens, just enough to make sure everything still fits.