TOKY Scores Sixth Drupal Featured Case Study for PGAL.com
On the heels of sending our lead developer to New Orleans for DrupalCon 2016, we’ve got a bit more news from the programming corner of TOKY’s offices. The site we designed and developed for architecture firm PGAL is now a featured case study on drupal.org, a community honoring firms that have maximized the capabilities of the Drupal content management system.
Drupal case studies are a great honor — but just as importantly, they’re the perfect opportunity for our developers to share a bit about their process, showing how they turn beautiful designs into sites that work well for the end user and the site administrator.
Here’s a look at a few of the main development challenges our team solved while building the PGAL site.
Quick, Intuitive Project Filtering
The client wanted to provide visitors with a quick, intuitive way to explore hundreds of projects that span a number of markets and services. We focused on project filtering and search to make this happen.
On the All Projects page, the user is presented with a full list of filters to choose from. Once one filter is selected, further search options are automatically eliminated to correspond with results for the chosen filter. For example, once a user selects “Aviation,” any filters that do not overlap with that category — for example “Education” and “Recreation” — will disappear. This prevents the site from presenting the user with zero results — a potentially frustrating user experience.
Fast Load Time
We also needed to find a way to balance a large number of big, responsive project images with fast and efficient page load time. We achieved an incredibly fast load time (97 on Google Page Speed), by implementing a number of front-end best practices, including:
- HTML, CSS, SVG, and JavaScript minification (in part thanks to the Speedy module)
- Inline critical CSS in the <head> of the page and asynchronous loading for the rest of the page
- JavaScript moved to the bottom of the page, and script execution deferred via hook_js_alter()
- Image optimization via the ImageAPI Optimize (or Image Optimize) module using pngquant, opting, pngcrush, jpegoptim, jpegtran, and jfifremove
- Drupal core page caching for anonymous users, compressed cached pages, and CSS/JavaScript aggregation
- Prefetching and DNS prefetching
- Apache server configurations
Efficient Content Management
PGAL’s marketing team wanted a CMS with a user-friendly back-end admin experience. After replacing the custom CMS with Drupal, all content — from the Home page and Project pages to leadership bios — can be quickly and easily managed.
Additionally, certain content types — including leadership bios, careers, and locations — have the potential to be used in several different parts of the site. To save PGAL’s staff from having to reenter content in multiple places, we made these content types entities that are then pulled into their assigned pages. For example, details about each of the firm’s 11 locations were entered into the CMS once, but this content is pulled into both the Locations page and the Careers page via the Entity Reference module. The same is true for client names; if a client is listed on a published Project page, that client’s name is automatically pulled into the master list on the Clients page. This ended up saving the client substantial content entry time at launch, and will continue to do so in the future as new content is added.
That’s all for now from our development team, but you can read the case study in its entirety on drupal.org, or explore the final product at pgal.com. And of course, congrats to the PGAL team on this very technical — but still big — win!