1.0Overviewso, basically...

EON’s site used to be sleek and modern, but was beginning to show it’s age. Working closely with D+i, the agency who originally created the site, I implemented code to achieve their designs. D+i also involved me early in the design phase so I could provide advice for making the most of budget.

Services

Details

  • Rebuilt and modernized an aging website.
  • Worked closely with agency designers to bring their vision to life.
  • Provided early design input to make the most of available project scope.
Desktop screenshot of web development for EON Office website

2.0Special Highlightslet me draw your attention to...

2.1People Popping Up

Using pre-built plugins is okay if they can reduce budget or tackle complex problems well, but it’s always preferable to develop something custom that exactly meets the needs of a particular website.

The EON website needed popup functionality on the team page so users could browse information about EON’s staff, as well as individual pages for each staff member. To make it easy for EON to update things, I built my own popup functionality that made adding new staff members as easy as publishing a single post in WordPress.

The popup’s architecture also helps the team page to load quickly since it only downloads additional bio info when the user requests it by clicking on a staff member. This paired with elimination of any plugin code bloat through custom coding helps this feature to function pretty fast.

Since I built it from the ground up, I also couldn’t resist adding my own activation and close animations. Plugins generally allow for one or at best a small range of pre-defined animation options, but by building my own I was able to combined fade, scale, expand, and reposition in a subtle but appealing bit of choreography.

2.2Random is Easy

Part of the EON project involved importing all the old posts from the existing website into the new one. Unfortunately, the new layout needed each blog post to have a featured image displayed to its left, or the blog index grid would break visually.

Instead of having some blog posts stretch left to fill the empty void where the image would have been, which would have looked pretty weird, D+i’s designers decided to add random rectangular placeholders that matched the many other random rectangles thematic throughout the design. The simple challenge in development was to make these easy to add to new blog posts, as explained in this section’s video. Enjoy!

3.0Technicalfor the geeks

Aqua SVG Sprite plugin banner

3.1Aqua SVG Sprite Plugin

I like using SVG images for download performance reasons, and love using SVG image sprites for their even greater performance. In previous years, I had compiled SVG image sprites through gulp, which was quick and easy during development but meant that client’s couldn’t add or adjust the images involved on their own.

I then developed my own chunk of functionality I’d port over from project to project that allowed for creation of sprites from images added to the WordPress media library. It was now easy for clients to update the images, but it was still a bit feature-sparse and required a bit of configuration for each new site.

EON is the first website to take advantage of the Aqua SVG Sprite WordPress plugin I developed, which builds upon the portable functionality I’d been using and makes it available to the entire WordPress community. One enhancement is a new shortcode generator available through the TinyMCE editor for adding images easily to posts. The plugin additionally allows for creation of multiple sprites (previous versions just generated one) and handles adding, trashing, etc. of images a bit smarter.