Magnolia and VPRO's 3voor12 Music Website

629 views
560 views

Published on

3voor12.vpro.nl is a renowned and international music website with more than 2,5 mln unique visitors yearly. On the site the user can queue and play audio and video in a sidebar and still navigate the rest of the site without interruption of playback. The site is responsive and works on both mobile and desktop. A large editorial team keeps the site up-to-date with the latest news and newest albums.

In this talk a walkthrough of this fully responsive website will be given. The use and benefits of magnolia will be highlighted from different perspectives. How it is used by a designer, a frontender, a backender, an author and last but not least the visitor. Many standard features of magnolia have been utilized and also new components were developed, like parameterized image variations and a Solr search engine extension. The latter will be touched briefly upon but will be presented in detail in a separate technical presentation by Ernst Bunders and David Pronk.

The process of building this large scale site with interplay between all above disciplines will be discussed as well: it wouldn't have been possible without scrum.

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
629
On SlideShare
0
From Embeds
0
Number of Embeds
216
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Magnolia and VPRO's 3voor12 Music Website

  1. 1. Mathijn Elhorst technical coordinator VPRO digital Basel September 4th 2012Tuesday, 4 September 12
  2. 2. Mathijn Elhorst ik begrijp hier niets van! • m.elhorst@vpro.nlTuesday, 4 September 12
  3. 3. Overview ik begrijp hier niets van! • VPRO and VPRO digital • 3VOOR12 • intro • implementation • development process • Conclusions • What’s nextTuesday, 4 September 12
  4. 4. VPRO ik begrijp hier niets van! • Dutch public broadcaster • Creativity, world citizenship, innovation and being opinionated are leading values • Target audience is the creative class • Junction of cra!tsmanship and expertise, involvement and passion • O!fer leading, deepening cross-media content • (Inter)national cooperationTuesday, 4 September 12
  5. 5. VPRO Digital ik begrijp hier niets van! • started 1994 • backend, frontend, interaction design, projectleaders • 18 people employed • 7+ freelance • working with scrumTuesday, 4 September 12
  6. 6. VPRO Digital ik begrijp hier niets van! • 150+ websites • mobile applications • 2,5 years Magnolia • 68 websites running in magnolia • more/most to follow soonTuesday, 4 September 12
  7. 7. ik begrijp hier niets van!Tuesday, 4 September 12
  8. 8. VPRO Digital - setup ik begrijp hier niets van! POMS Grails audio/video metadata harvester JavaScript Image Solr/ES CouchDB server server APITuesday, 4 September 12
  9. 9. ik begrijp hier niets van! • alternative pop music, music industry, journalism, new (local) music • on internet, radio, tv, print • huge archive of concert, festival & live registrationsTuesday, 4 September 12
  10. 10. 3voor12 - intro ik begrijp hier niets van! • started 1998 • 3.284.555 unique visitors 2011 • 1.007.338 visits per month • 5.447.336 page views per month • editorial team of 15+ people • 16 voluntary local editorial teams • 10.000+ hours of audio and video • 40.000+ articlesTuesday, 4 September 12
  11. 11. 3voor12 - intro ik begrijp hier niets van! • Magnolia implementation June 2011 • Launch date 11:57 January 3rd 2012 • Designed for desktop, tablet and mobile • Responsive design with fixed grid • Play queue • Uninterrupted playback of audio/video • Demo time 3voor12.nlTuesday, 4 September 12
  12. 12. 3voor12 - implementation ik begrijp hier niets van!Tuesday, 4 September 12
  13. 13. 3voor12 - implementation ik begrijp hier niets van! Google Throttled retrieval analytics popular pages, albums, tracks, etc. pages tracks a!ter 20 secs of playingTuesday, 4 September 12
  14. 14. 3voor12 - implementation ik begrijp hier niets van!Tuesday, 4 September 12
  15. 15. 3voor12 - implementation ik begrijp hier niets van!Tuesday, 4 September 12
  16. 16. 3voor12 - implementation ik begrijp hier niets van!Tuesday, 4 September 12
  17. 17. 3voor12 - implementation ik begrijp hier niets van! POMS Elastic Search Process Graph documents database Other source Other sourceTuesday, 4 September 12
  18. 18. development process - start ik begrijp hier niets van! • product owner & stakeholders • created ordered backlog • designers • created rough layout of site • frontend/backend • created implementation of album page with dummy playlistTuesday, 4 September 12
  19. 19. development process - build ik begrijp hier niets van! • product owner & stakeholders • keeping ordered backlog • designers • adding pages and templates • frontend/backend • tuning play queue • following designers • continuous interplayTuesday, 4 September 12
  20. 20. development process - end ik begrijp hier niets van! • migration old site • default activation of public nodes not possible • public beta for one month • launch date servers overloaded • 2 extra sprints extra to fine-tune and extra migrationTuesday, 4 September 12
  21. 21. development process - scrum ik begrijp hier niets van! • focus, focus (max 2 projects in one team) • really small team better than no-focus • 3 teams or more can give communication problems • in other words: no silver bullet • adjust, adjust and listen to retrospectivesTuesday, 4 September 12
  22. 22. Lessons learned ik begrijp hier niets van! • SASS works great for us but... • Responsive not from desktop->mobile but other way around to keep CSS small • CSR can be a pain/complex • PostgreSQL full database best setupTuesday, 4 September 12
  23. 23. Conclusions ik begrijp hier niets van! • Magnolia satisfactory, but... • author instance can be slow sometimes • activation can be cumbersome • large datasets / migration troublesome • image handling not matureTuesday, 4 September 12
  24. 24. What’s next ik begrijp hier niets van! • Adaptive streaming • Mobile experience • Performance improvements • Going to Magnolia 5 • Elastic Search • Image server • vpro.nl in MagnoliaTuesday, 4 September 12
  25. 25. Thanks ik begrijp hier niets van! • David Pronk, 10:30 Lecture Theatre • 3voor12, Ajax and subtemplates • Javascript server and RequireJS modules • Ernst Bunders, 14:00 Lecture Theatre • Solr Search Engine Integration • Parameter-Based Image Transformations • Filesystem Image Variation Caching • m.elhorst@vpro.nlTuesday, 4 September 12

×