The redesign of the Netech website was a unique, challenging and fun project to have the opportunity to work on. The most demanding factors for this project revolved around the front-end implementations.
While the site’s design is undoubtedly beautiful, one familiar with font-end web elements will know that the layout and styling of these components are based of rectangular components/parameters. Looking at the site, one immediately notices the “swoosh” elements found in many of the transition space between content sections. Though there could be several approaches to how one implements these design elements, a large piece of the design direction involved parallax effects throughout the site on various content components. With this in mind, our developers saw an opportunity to add to these components and make them truly part of the user experience offered by the site. To do so, the “swoosh” elements were built out as separate pieces allowing them to move independently, resulting in a unique and sleek look as one navigates the site.
Although the parallax implementations lent to some creative fun, they also brought about some of the most challenging aspects of the project. The first being the long, scrolling layout. With many large image assets to accommodate the background parallax effects and multiple sections potentially appearing per page, we realized the need to address page load performance/optimization. With some compromise from the designers/client we addressed the issue two ways. One, we sacrificed the high-res versions of images and settled on more reasonable images that were also highly compressed, post resizing. Additionally, other assets including CSS, JS, and font files were compressed using Gzip in order to improve load times on these assets as well. Secondly, we utilized some javascript to provide the best UX on page load. Due to the timing to load the necessary page assets and initialization of parallax, we decided to display the landing section of each page during initial page load, displaying the remaining content after the effects initializations completed. This allowed us to insure users were immediately aware the page did and was loading while the remaining content rendered to promote not scrolling prior to the page’s respective effects loading.
The second big challenge presented during this project that stemmed from the design and parallax effects was the accompanying implementation of responsive design. We knew we wanted to preserve as much as we could from the desktop view of the site on the mobile view. Thankfully, a couple open source libraries helped us achieve our end goals. Using the skrollr (github.com/Prinzhorn/skrollr) library as our parallax framework, we were delighted with the mobile support provided for parallax. However, even with this in place, we ran into some major rendering issues on devices running older versions of iOS. This was a result of utilizing a relatively new CSS unit called viewport units. While incredibly useful in responsive design, certain browsers (typically older versions) don’t fully support these units. There is a wonderful library that provides a fix for this issue that can be found here.
In the end, the launch of Netech was a satisfying end to a long road. Unique opportunities such as this and the challenges they provide are where our developers thrive and where Switchbox looks forward to great, future ventures. Visit the site in its entirety here http://netechcorp.com/
