Hey everybody, we’ve recently launched a new website for BeckAg. They are an innovative company which specializes in facilitating conversations between agriculture professionals. We worked with them to completely reorganize their content, streamline the user experience, and build a highly engaging and interactive site.

BAG_Interactive_01The new BeckAg Homepage

The Oxide team put together an awesome design for the site, and we were able to plan out a couple of really nice interface pieces. I was able to flex some front-end muscle on this project and built all of these features custom, from scratch, just for this site. (You may just see a Fun with code post in the future detailing these features.)

BAG_Interactive_02-2A slideshow from the Current/Future

One of the core features of the site is a nifty slideshow system, with the next and previous slides peeking in from the sides, as well as a slide preview running along the bottom. Instead of using the usual bulky JavaScript animations, I’m relying solely on CSS3 transitions, which helps with clean, smooth animations. Building this truly unique slideshow was a fun and interesting challenge, and keeps the site more efficient.

BAG_Interactive_03An accordion from the Team page

Another great feature can be found on the Team page. What may seem at first glance to be just another JavaScript accordion turned out to be quite a bit more complex. There are several helpful interface elements which allow the user to key in to the intent of the content while allowing for a lot of information to fit into a much more convenient space. (Go ahead and have a look for yourself!)

BAG_Interactive_04An example of SVG
use to avoid large complex images

Visually, the site uses a healthy balance of SVG for line-art and images for texture and photos. Overall, the page load speeds are quick and efficient for such a detailed site. This, along with using custom code for the many interface features, keeps the bandwidth demand low so it won’t be so taxing if viewed on a mobile device. The inclusion of SVG for line-art also allows for a more seamless transition to mobile and high-resolution displays.

Speaking of mobile, we’ve also made this site completely responsive, allowing for the best user experience across all devices and screen sizes.

BAG_Interactive_07The BeckAg site
when viewed on a
mobile device

This site is a true example of what our team can achieve on a site – from design to development we’ve built a true custom solution for BeckAg which is well suited for their current and future needs.

View the project page for BeckAg.