Last Call Media Drupal 8 Case Study
0 likes432 views
Last Call Media is a digital agency that recently redesigned their website using Drupal 8. Their new site includes a blog with infinite scrolling and Disqus commenting, author pages, and a unique front page design with modal windows, parallax scrolling, and hand-drawn animations. The redesign project took 5 months and involved 6 developers, 1 designer, and 1 project manager logging over 1,337 hours. Last Call Media is a growing agency with 20 employees across offices in Massachusetts, New York, and Oregon.
Last Call Media Drupal 8 Case Study
- 1. lastcallmedia.com allaboard@lastcallmedia.com @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. ASSIGN ROLES. 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.
- 9. STATISTICS flickr.com/photos/vancouverfilmschool/ 1337 hours 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 BLOG DESIGN 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: KEY CHALLENGES/FEATURES • Different design from blog • Modal windows • Side-scrolling design • Parallax • Hand-drawn animations
- 25. 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
- 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 • 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
- 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 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
- 32. 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. !!!
- 33. WE’RE HIRING!