Last Call Media Drupal 8 Case Study

Last Call Media Drupal 8 Case Study

• 1.
  lastcallmedia.com [email protected] @lastcallmedia DESIGN FOR DRUPAL: CASE STUDY-LAST CALL MEDIA.COM
• 2.
  WHO'S WHO •Rob, CTO • Justin, Project Manager • Colin, Creative Director • Jeff, Developer • Kelly, Developer • Tom, Developer
• 3.
  ESTABLISH PLAN. ASSIGNROLES. TAKE OVER THE WORLD. flickr.com/photos/34338074@N06
• 4.
  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?
• 5.
  MOST IMPORTANTLY… !!! Who are we? What do we want to say?
• 6.
  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.
• 7.
  SPRINT DAYS flickr.com/photos/hyfen
• 8.
  QA TESTING flickr.com/photos/harryka/
• 9.
  STATISTICS flickr.com/photos/vancouverfilmschool/ 1337hours logged to date 6 Developers 1 Designer 1 Project Manager Project Duration: ~5mo
• 10.
  DESIGN • Concept
• 11.
  DESIGN • Concept • Planning (IA)
• 12.
  DESIGN • Concept • Planning (IA) • Design and Illustration • Sketch • Ink • Color
• 13.
  DESIGN
• 14.
  DESIGN
• 15.
  DESIGN • Concept • Planning (IA) • Design and Illustration • Goals for blog
• 16.
  BLOG
• 17.
  DEVELOPMENT
• 18.
  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
• 19.
  IMPLEMENTING THE BLOGDESIGN Primary challenges/features: • Custom theme • Infinite scroll on blog index page • Disqus commenting on blog posts • Author pages
• 20.
  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
• 21.
  INFINITE SCROLL •A lot less painful than initially expected. ! • Using jquery.infinitescroll.js • Used a standard view on blog page
• 22.
  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
• 23.
  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/*
• 24.
  FRONT PAGE: KEYCHALLENGES/FEATURES • Different design from blog • Modal windows • Side-scrolling design • Parallax • Hand-drawn animations
• 25.
  DIFFERENT DESIGN FROMBLOG • 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
• 26.
  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
• 27.
  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
• 28.
  PARALLAX • Usingstellar.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
• 29.
  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).
• 30.
  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.
• 31.
  SO WHO ISLAST 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
• 32.
  WHERE IS LASTCALL 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. !!!
• 33.
  WE’RE HIRING!
• 34.
  lastcallmedia.com [email protected] @lastcallmedia THANK YOU