The new Optima site has been a long time coming, mainly because it’s one of the largest sites we’re responsible for.
Optima is actually one of the first sites I worked on when I joined this company three years ago. The client wanted some changes to the background-image slideshow feature that dominated every page, and after making a few small improvements to my predecessor’s code, I finally had to say that any further work would require a complete rebuild of the JavaScript and the HTML that it used. The basic side design and structure, however, remained until now.
This version of the site is almost completely new. The images are the same, which have all been recreated from the original versions at new sizes, as well as the “Location” maps, which rely on some custom JavaScript and Google Places/Maps integration I built for the old site. The CSS grid was inspired by Bootstrap 3, but that’s about all I took away from that framework.
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.