Behind the Archer Site: A Developer POV

Overview

The concepting and design phases of the new Archer company website started almost one year before the site’s launch. Our goal was to push the limit both in design and technology using the latest and greatest web approaches and techniques.

In the end, it was a major team effort involving almost every department. As a member of the production team, my role in this project was to help with the completion of the front-end development. I worked on creating HTML and CSS page templates, in addition to some of the animated elements seen across the site.

Animations

Part of the production team’s job is to review the designs and look for opportunities to create a better user experience. One of the first elements we identified was the footer. Originally, the footer was locked to the bottom of the page, and since our footer contains a good deal of information, we wanted to make sure that users would find it and interact with it. We played with a few concepts and ultimately decided on a pullout drawer solution.

For all animations associated with the footer, we used a combination of JavaScript and CSS3. When you first navigate to our website, at the bottom of the page you will see a thin bar with an Expand button in the center. Upon clicking that button, the drawer will slide out and reveal the full footer. We accomplished this using JavaScript animations and CSS class detection to ascertain what state the footer was currently in. Additionally, if the footer is not expanded, it will expand automatically when the user scrolls to the bottom of the page, revealing the full footer from our original design. As expected, when the user scrolls up from the bottom of the page, the footer will hide itself again.

The footer includes two other animations as well: the Contact Us window and the Find Us button. In the original design, the Contact Us window was intended to be a modal window, and at first, we implemented it as such. However, we decided we wanted it to be more unique. We also implemented a bit of JavaScript that allows a user to link directly to our Contact Us window by using a hash tag in any URL on the site (e.g.. www.archer-group.com/#contact-us, www.archer-group.com/work#contact-us). The Find Us button was initially intended to be a static compass image, but with the help of CSS3 animations, we were able to make that asset stand out more as well.

There were a number of concerns we had to address while designing and working on these animations. One of the biggest concerns we were faced with was page load. Having a page that is purely HTML and CSS will produce a very small workload for a browser, but depending on a user’s system specifications and browser, as soon as you start adding JavaScript that modifies the DOM, the experience can start to drag. One element we knew we wanted to include from the start was the filtering system that exists on various pages. As that set of JavaScript animations can already be somewhat heavy at times, we needed a solution that was as light as possible. We ended up using a mixture of both JavaScript animations and CSS3.

On top of that, we had to keep in mind that our site uses a responsive design. Responsive design is a web development approach that uses CSS media queries to detect devices and change CSS dependent on device width. This differs from the traditional approach to mobile site development, which requires creation of a separate site specifically for mobile and tablet browsers. In other words, all of the animations on our site needed to be scalable down to smaller resolutions. In most cases, this involved creating width detection for some features to either enable or disable certain animations and functionality. For example, when a browser’s viewing window width reaches the threshold to be treated as a mobile device, the footer styles will change so that the footer is locked at the bottom of the page and the animation no longer functions. However, if you resize your browser’s window back to its regular size, all of the animations will be restored. This is the power of responsive design!

Approach

The Approach page is a great example of the capabilities of JavaScript animation. The animation on our Approach page is a mixture of parallax animation and window scrolling detection to display the different states of the animation. However, there was one particular hurdle to overcome with the Approach page: We wanted to show this type of animation across as many platforms as possible, but the amount of loading required for both the images and the JavaScript, combined with the fact that mobile devices have less powerful processors, required us to display an alternate Approach page to mobile users. This countered our desire to make the entire site responsive, but was necessary to provide the best user experience across devices.

To address this problem, we came up with a script that combined both JavaScript and PHP to detect the user’s capabilities. Our primary concern was that we didn’t want a mobile device user to start loading some of the large images and scripts associated with the Approach page. We preferred that they only load the smaller, mobile-specific experience. Using PHP allowed us to easily set which data should be loaded for the desktop and which should be loaded for a mobile device (since PHP processes data at the server level, before that data is brought to the browser). PHP presented a challenge though. Since PHP is server side, we’d need to run any detection of the browser capabilities on the client side (in JavaScript). To solve the problem, we set a cookie on every page through JavaScript, which detects the device’s width to determine if you are on a desktop or mobile browser. If you were to navigate to the Approach page, PHP can read that cookie as well and will load the appropriate content for you.

Looking Back

As a junior developer new to this trade, working on the Archer Website Redesign was a great learning experience. I got the opportunity to dive into and learn a good deal about WordPress and work out difficult scripting and CSS issues with the help of my team. In addition, the new website incorporates a lot of our ideas about where web development is heading, making the experience even more special.

Leave a Reply

Close Modal

Contact Archer

Close Modal

We know you're still using an older version of Internet Explorer. Do you know how much mind-blowing stuff you're missing because of this?

Save yourself. Upgrade now.
We'll help you...