lastcallmedia.com

allaboard@lastcallmedia.com

@lastcallmedia

DESIGN FOR DRUPAL: CASE STUDY- LAST CALL MEDIA.COM

WHO'S WHO• Rob, CTO • Justin, Project Manager • Colin, Creative Director • Jeff, Developer • Kelly, Developer • Tom, Developer

flickr.com/photos/34338074@N06

ESTABLISH PLAN. ASSIGN ROLES. TAKE OVER THE WORLD.

GATHER RESOURCES (POWER, INFLUENCE, INFAMY)• Internal Questionnaire • Client Questionnaire

• “What’s your favorite thing about LCM?” • Current Site Analytics and Performance !

Initial Questions • What are we trying to say? • What is most important to us?

MOST IMPORTANTLY…!!!

Who are we? What do we want to say?

CHOOSING DRUPAL 8• Evolutionary leap forward • Wanted to stay ahead of the pack • Drupal as an open source platform aligns with our core values as a company

of inclusivity and collaboration • LCM team members involved with Drupal Community for over 9 years.

flickr.com/photos/hyfen

SPRINT DAYS

flickr.com/photos/harryka/

QA TESTING

flickr.com/photos/vancouverfilmschool/

STATISTICS

1337 hours logged to date 6 Developers 1 Designer 1 Project Manager Project Duration: ~5mo

DESIGN• Concept

DESIGN• Concept • Planning (IA)

DESIGN• Concept • Planning (IA) • Design and Illustration

• Sketch

• Ink

• Color

DESIGN

DESIGN

DESIGN• Concept • Planning (IA) • Design and Illustration • Goals for blog

BLOG

DEVELOPMENT

OVERALL APPROACH• Rely on core wherever possible

• Lots of new core site building functionality out of the box • Test how far core can take us now without relying on contrib !

• Limited custom PHP code • Unstable APIs • No contrib • Avoid having to rewrite functionality after each upgrade

IMPLEMENTING THE BLOG DESIGNPrimary challenges/features:

• Custom theme • Infinite scroll on blog index page • Disqus commenting on blog posts • Author pages

CUSTOM THEME• No big surprises here

• {theme}.info > {theme}.info.yml

• template.php > {theme}.theme

• {template}.tpl.php > {template}.html.twig

• {theme}.libraries.yml new

INFINITE SCROLL• A lot less painful than initially

expected. !

• Using jquery.infinitescroll.js

• Used a standard view on blog page

DISQUS COMMENTING• Implemented in custom module

• Combination of: • hook_entity_extra_field_info() • hook_node_view() • hook_theme()

• Placed the new disqus item using standard field interface

AUTHOR PAGES• Everything here is standard core

functionality: • Top portion: default user

display mode • Author info: fields on user

entity • Posts on bottom: view block

configured to show on user/*

FRONT PAGE: KEY CHALLENGES/FEATURES• Different design from blog

• Modal windows

• Side-scrolling design

• Parallax

• Hand-drawn animations

DIFFERENT DESIGN FROM BLOG• Homepage shared virtually no

assets with the blog

• Built new theme just for homepage. • Helped avoid massive theme

• Loaded theme only on front page. • Implemented using custom

module • Custom theme negotiator

MODAL WINDOWS• Originally anticipated a lot of

custom work to make modal windows work.

• Only needed to add “use-ajax” class to a link to get it to open in a jquery ui dialog window.

• Previous/Next buttons handled using combination of: • php: hook_preprocess_node()

to find previous/next links

SIDE SCROLLING DESIGN• Added custom homepage

template

• 5 100% width regions

• Using jquery-mousewheel to force horizontal scroll

• Using jquery.scrollTo for scrolling navigation in top bar

PARALLAX• Using stellar.js for train parallax

effect.

• Background, train tracks, foreground all scroll at different speeds.

• Stellar.js lets you set a scroll-ratio for divs to manage scroll speed

• Gotchas: • iOS scrolling

• Used iScroll for tablet to mimic regular scrolling

HAND-DRAWN ANIMATIONS• Unique challenges:

• Animations needed to start and end at specified points

• Animations only progress/rewind when scrolling

• Implementation: • Using a single sprite with

containing each individual animation step (generated using compass).

D8 DEVELOPER EXPERIENCE• In General

• Everything’s still there (though it might not be where you remember)

• Working with the new D8 CMI • Allowed config to be deployed in code without requiring any contributed modules, or worrying about

how related functionality was packaged together (no more features) • Allowed multiple developers to work on related components without having to worry (as much) about

causing conflicts with each other

• Greater flexibility for module developers • Shifting to OOP and use of services allow devs much more power to build sites • There’s a learning curve, especially if your php development has been limited to working with Drupal in

the past

• More accessible to themers • Twig gives template-level access to devs who may not feel at home with php.

SO WHO IS LAST CALL MEDIA?• 5 Years old this October • Growing in-house team of 20 full-time employees

• 8 in house developers • 2 Project Managers • 2 Creatives and Designers • Systems Administrators • UX/UI Content & Marketing Strategists • Leadership and Internal Support

WHERE IS LAST CALL MEDIA?• Headquartered in beautiful downtown Northampton, MA

• The other side of the state, just before the Berkshires, for you Bostonians. • Satellite offices in New York, NY, and Portland, OR. !!!

WE’RE HIRING!

lastcallmedia.com

allaboard@lastcallmedia.com

@lastcallmedia

THANK YOU