Last Call Media được xây dựng từ Drupal 8

Last Call Media creates digital experiences for web and mobile: we bring our clients contemporary strategy, graphic design, leading-edge development and post-launch support. Our approach combines best practices and progressive techniques to deliver solutions for clients across the private and public enterprise sectors. Our primary development expertise is in Drupal and we are very involved in the community. Relaunching our site on Drupal 8 gave us the perfect opportunity to get in on the ground floor of the new version and help out the community by providing a real world implementation (and contribute back a lot of code).

Why Drupal was chosen: 

Our previous site was built on Drupal 7. We chose to stay with Drupal because it is in line with our ideals as a company, and it is the most capable enterprise development platform available. We’re also strong believers in the Drupal community - it is rare to find a group of people willing to work so hard for the greater good. From our point of view, Drupal 8 is an evolutionary leap forward that fixes a lot of things that have bothered us for a long time about Drupal. It wasn’t a question of whether we would re-launch our own site on Drupal 8, it was a question of when.

Describe the project (goals, requirements and outcome): 

The primary goal for the rebuild was to showcase the design and technical prowess of our company. We wanted to move away from the “shoemaker’s son” syndrome that tends to plague the web service provider community, so we started by examining what we wanted to say. In the requirements gathering process, we dove into the Analytics data for our existing site to figure out which sections were important to our business, and discover how our site visitors typically used the site. We also surveyed some of our existing clients to determine what our target audience was looking for in their tech provider’s site.

Our findings indicated that there were two primary groups that interact with our site. The first is project stakeholders, who are primarily interested in a basic overview of our company: who we are, what we’ve done, and how to reach us. This group does not come by very often, and does not tend to spend a lot of time on the page, so it was important that we keep our message short and visually appealing. The second group is made up of tech savvy people who are interested in what we have to say. In other words, they are looking for blog posts. With these findings in mind, we split the site into two distinct sections: a single, flashy front page aimed squarely at the stakeholders, and a clean and simple blog for the tech-savvy.

With these requirements in mind, we entered the design phase.

  • For the front page of the site, we came up with the idea to make a sideways-scrolling site with a train following the user at the bottom while the background scrolls with page content. This concept fit with our brand and would simultaneously be unique and eye-catching from a design standpoint and a showcase of our ability to solve complicated technical challenges. We developed content that accurately reflects our company and answers our defined user groups’ questions as succinctly as possible while making it easy for them to dive deeper into our company should they desire to.
  • From there we entered the wireframe phase, clearly laying out all functionality and the basic layout of the site. This stage was particularly important for this project, since before completing it we weren’t sure if our concept was even viable.

Challenges presented during design included, among other things, finding the correct width to make the background images so that they scrolled at the appropriate speed in relation to both the site and each other, and making crisp versions of such large images for both standard and retina resolution screens while maintaining a reasonable file size. Realizing that this concept requires a certain amount of screen space to work, we designed an alternate, more straightforward layout that replaces it below a certain break point. This alternate layout appears on most phones and some smaller tablets.

Our goals for the blog were very straightforward. We intended to create the most clean, frictionless, and appealing environment for our users to investigate our content. We used a few design tactics to achieve this, including employing a simple, open design to eliminate distractions, limiting the width of the content to prevent users from losing their place when jumping from one line of text to another, and using flat shapes, big images, and large text to make it a snap for users to know what they’re looking at. Many of these approaches are in line with current design trends of which we are big fans.

Site Structure

On the back end, lastcallmedia.com consists of two content types (blog post and portfolio item), two taxonomy vocabularies (tags and categories), and basic fielded user entities. We used entity display modes for all content listings except for the navigation lists in the blog section. All content listings were created using the new-to-core Views module. Structurally, lastcallmedia.com is a very simple site; we built our entities, configured our displays, and placed them on the page in blocks. There is very little “glue code” for this site on the PHP side, which is a testament to how configurable Drupal 8 is going to be.

Parallax

A major part of the homepage is the parallax train illustration. This feature went through several iterations during the development process. We began with a small snippet of javascript that updated the background position of each piece as the user scrolls horizontally. After discovering in QA that this approach wouldn’t work on tablets, we switched over to using an extended version of Stellar.js, which uses CSS transforms, and falls back to using iScroll for scrolling detection on mobile devices.

Portfolio Popups

This is a feature that we planned a lot of development time for. Imagine our surprise when we discovered we could just add data attributes to the node links and they would appear in a modal window without any fuss. Unfortunately, we ended up wrestling with the javascript side of things more than you might expect, due to a couple of bugs with events not firing. Still, we got a really nice modal effect virtually for free.

Modernizr

We needed a way to do feature detection for certain elements on the homepage. For example, the portfolio slideshows are swipeable, but only if the touch event is detected. In other cases, we need to disable certain things at different media queries. Modernizr made both of these use cases pretty painless. We had to update from the version that ships with core in order to support Modernizr.mq(), but that was a painless thing to do from a custom module.

Design Implementation

When we started this project, there were no Drupal 8 base themes in the contrib space, so we ended up building two custom themes: one for the blog, and one for the front page. Both themes use HTML5 and CSS3. Since our initial research indicated that only a very small percentage of our users were browsing with IE8 or lower, we did not attempt to polyfill support for those older browsers. For performance and retina compatibility, we chose to implement a custom icon font (created using Fontello) for small graphical elements. We opted to launch without using the Picture module, although we plan to use it to add retina versions of image field content in the future.

A lot of thought went into making the sideways scrolling action of the front page intuitive for users who are accustomed to dealing with vertically scrolling sites. To accomplish this, we combined several effects. First, we used the excellent ScrollTo plugin to animate anchor scrolling between panes. Second, we took control of the mousewheel scrolling event and redirected it so that down goes forward (right) in the animation, while up goes backward (left). Finally, we linked the vertical scrolling of each pane to the mousewheel event as well, so that moving forward in the animation would smoothly scroll you to through each vertical pane as it was centered in the window. Needless to say, a lot of thought and development time went into the scrolling effects for the front page.

In the end, we gained substantial real-world Drupal 8 experience and achieved a visually pleasing and technically impressive website. In addition to our code contributions back to the community, we can point to what we've done and say, "look at the awesome things you can do with Drupal 8!"