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.

1. Mathijn Elhorst
technical coordinator VPRO digital
Basel September 4th 2012
Tuesday, 4 September 12

2. Mathijn Elhorst
ik begrijp hier niets van!
• m.elhorst@vpro.nl
Tuesday, 4 September 12

3. Overview
ik begrijp hier niets van!
• VPRO and VPRO digital
• 3VOOR12
• intro
• implementation
• development process
• Conclusions
• What’s next
Tuesday, 4 September 12

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 cooperation
Tuesday, 4 September 12

5. VPRO Digital
ik begrijp hier niets van!
• started 1994
• backend, frontend, interaction design,
projectleaders
• 18 people employed
• 7+ freelance
• working with scrum
Tuesday, 4 September 12

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 soon
Tuesday, 4 September 12

7. ik begrijp hier niets van!
Tuesday, 4 September 12

8. VPRO Digital - setup
ik begrijp hier niets van!
POMS Grails
audio/video
metadata harvester
JavaScript Image
Solr/ES CouchDB
server server
API
Tuesday, 4 September 12

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
registrations
Tuesday, 4 September 12

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+ articles
Tuesday, 4 September 12

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.nl
Tuesday, 4 September 12

12. 3voor12 - implementation
ik begrijp hier niets van!
Tuesday, 4 September 12

13. 3voor12 - implementation
ik begrijp hier niets van!
Google Throttled retrieval
analytics
popular pages, albums, tracks, etc.
pages
tracks a!ter 20 secs of playing
Tuesday, 4 September 12

14. 3voor12 - implementation
ik begrijp hier niets van!
Tuesday, 4 September 12

15. 3voor12 - implementation
ik begrijp hier niets van!
Tuesday, 4 September 12

16. 3voor12 - implementation
ik begrijp hier niets van!
Tuesday, 4 September 12

17. 3voor12 - implementation
ik begrijp hier niets van!
POMS
Elastic
Search
Process Graph
documents database
Other
source
Other
source
Tuesday, 4 September 12

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 playlist
Tuesday, 4 September 12

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 interplay
Tuesday, 4 September 12

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 migration
Tuesday, 4 September 12

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 retrospectives
Tuesday, 4 September 12

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 setup
Tuesday, 4 September 12

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 mature
Tuesday, 4 September 12

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 Magnolia
Tuesday, 4 September 12

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.nl
Tuesday, 4 September 12