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.
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.
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!
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.