The SAPAN Institute
Creating the new sapanarts.org provided Function1 with an excellent opportunity to dig into the details of configuring, theming and coding on this latest and greatest Drupal platform. This build yielded rewarding results on top of increasing our real world knowledge of Drupal 8, including a contributed module and numerous bug fix contributions.
Fullscreen, Image-based Visually Interactive Experience
Tasked with the challenge of matching the vibrancy of their in-person presence with their online persona is something we took great pride in accomplishing. The overall design objective was to create a site that exudes the same energy and passion as the performances for which the SAPAN team is so renowned. By incorporating full-width images shot at various SAPAN events throughout the site, we were able to tap into the energy and exuberance of the performance company.
On the homepage, we developed a hero paragraph underneath the navigation where the client is able to feature a single hero image, image carousel or an auto-play hero video. The hero section is the end user's first impression of the site and a fullscreen image or video has the ability to draw someone to further explore the homepage and entire website.
SAPAN's previous website (which was developed using Wordpress), had a dated, busy look and feel. Using a "less is more" design approach by interspersing bold fullscreen images and the simple san serif web-safe Google Font, Roboto, we were able to successfully deploy a clean, modernized, responsive user experience.
SAPAN Homepage Before (left) and After (Right)
SAPAN Performance Company Page Before (left) and After (Right)
In order to achieve a more dynamic feel, CSS Transitions were added across the site, including animating the text on interior page lead images and the Get Involved and Upcoming Event sections hover states.
SAPAN Homepage Get Involved CSS Transition Sample
In addition to adding CSS Animation, integrating SAPAN's social channels was an essential element in creating a successfully interactive user experience. This was accomplished in part by adding a Social Media section to the homepage (Keeping up with SAPAN) in which the user is able to switch back and forth between SAPAN's Instagram and YouTube feeds without leaving the site, in real time. Links to SAPAN's social channels are displayed in the footer and the Add to Any module was used to add Social Sharing features. These can be found on pages throughout the site, allowing users to share videos, images, events and blogs to their own social channels, bolstering SAPAN's social presence.
When approached by SAPAN to work on a revitalized design, one of the major objectives was to create a responsive experience, a feature that was prominently lacking on their previous WordPress site. With mobile web browsing increasing and steadily eclipsing desktop, it was imperative that the design was effortlessly translated across device views.
To accomplish this, Function1 built a custom, responsive theme using Bootstrap and SASS. With this approach responsive layouts were created for the varied content on sapanarts.org from the various artist listings, photo & video galleries, event calendar, blogs and forms.
With over one third of sapanarts.org traffic coming from mobile users and an amazing 40% bounce rate it's clear the investment in responsive was a good one.
SAPAN had built an outstanding library of content over years of performing. From blogs to photo galleries and users, it was very important to not allow this content to fall to the wayside as they progressed away from WordPress. Taking advantage of the fact that the Migrate module is now part of Drupal 8 core, despite it's experimental status at the time of this migration, and building on the solid base provided by amitgoyal, Function1 was able to quickly and cleanly migrate the bulk of the WordPress content.
SAPAN needed more than just a beautiful new site. They needed to be able to maintain and build upon the solid foundation provided by Drupal 8 and Function1. To best enable the non-technical users at SAPAN, Function1 provided a library of custom display options using the Paragraphs module. Armed with these options, the users at SAPAN can easily build responsive content including elements like:
- Full width media
- Customizable background images
- Custom blocks anywhere on the page
The AddToAny module had a full Drupal 8 release available at the time of this build. This plus the customization, Drupal optimization and analytics integration options made AddToAny an easy choice for enabling user engagement.
SAPAN wanted an easy way to share their latest media from Instagram and YouTube. The Instagram Block module provided a simple solution to show off the latest Instagram photos in a customizable block. This solution worked so well that Function1 duplicated the module's functionality for use with YouTube in the YouTube Block module.