Touring the New Salsa Site
The geeks guide to the new Salsa Digital website... slip into your most comfortable cardigan for this trip down gigabyte lane.
In just a few short years, the web platform has expanded once more and brought with it a cache of new weapons for our development arsenal, so let’s explore some of the new features we’ve employed in this latest iteration.
Early into the redesign, it became apparent that a lot of what we wanted to achieve with the site was not going to be possible without making some browser support sacrifices. By casting off the infamous Internet Explorer 8 compatibility and focusing on 9 upward, we were able to focus our efforts on adding many of the newer features available in web today. And if you were wondering; Chrome is still the king for feature availability and performance - Salsa site was built in Chrome and it remains the definitive version. Of course, we do support Firefox, Safari, iOS, Android and co.
With the plethora of different sized devices available today; supporting 320x480 to 2560x1440 is no easy task. On top of this - the more complex the design, the harder it becomes to maintain a consistent look at feel across all devices. So how do we deal with triggered animation on the Expertise page when the height of the page can be different? How do we create landscape left-to-right scrolling About Us page, which will work on a portrait mobile screen? These are some of the challenges we faced when building the new look Salsa site.
Going beyond just style changes for small devices, we take this one step further with responsive imagery. Take the home page for instance - if you’re browsing the site on a tablet, it will load an appropriate banner image depending on if you’re in landscape or portrait mode. On top of this, it will load in a higher resolution version of that image if your screen is a high resolution (retina) display. Such customization means the site will tailor itself to work best with what device you’re currently using.
Parallax and Animation
It’s many of the more subtle parallax effects on About Us page which breathe life into each section, like the stretching cityspace below “Salsa Man” in flight, or the softly shifting fractal patterns that adorn the backgrounds of ‘About’ and ‘Stats of Origin’.
Expertise uses animation to guide users through a journey of our strengths. Take a leisurely scroll down the page to see shapes lock together and elements bloom to life as the page builds itself before your eyes.
Articles are given a smooth ‘app like’ transition on pages like Case Studies through the use of AJAX. Opening up and moving between articles is fast and seamless, using a spinning icon during loading phases to keep users engaged. Also - that spinning icon is 100% CSS - no additional images used!
The sliding Get in Touch screen, menu fade effects and even page not founds are just some examples of the animation found everywhere to create a richer user experience. Often it’s the finer things that make a difference to the overall experience.
Any productive developer knows that hotkeys are the bees knees. We’ve brought some of this ideology to the site using quick navigation keys for articles. If you’re looking at a News article page, you can use left and right keys to go to the previous or next article. For a quick close, use the Esc key. The Esc key also can be used to close overlayed content, such as Get in Touch, Sitemap and Staff Profiles! Once you’ve tried it, you’ll find it hard to go back to regular clicks.
So what’s next for the Salsa site? What new ways can we explore the boundaries of what we can imagine and what we can create? Who knows! But for now we hope you enjoy the exciting new changes to the site. Stay tuned...