1. BUNTE.de Relaunch 2016
Highlights and Learnings
Hansjoerg Posch, CTO BurdaStudios
Nov 2016

2. Challenges & Opportunities
Distribution is changing
Top notch home destination is key,
but growth is triggered off-site.
Publishing is turning into a Product &
Platform Business
Multiple sources, feeds, “Content
Re-Targeting” is driving the business.
New technologies are arriving
AI, Bots, Robots will shape our
products (“non-UI interfaces”).
Relationship & Context are king
LBS and context-related content &
services are necessary to stand out
of the crowd.
Our conclusion: Content needs to be available in an abstract and
flexible way without having any specific ties to a CMS.

3. BUNTE.de
Highlights
Headless Setup with Drupal
(Thunder) and a custom
rendering/distribution engine
Massive performance uplifts
with positive user/SEO signals
Top notch GTM and Native setup
Phased rollout over 3 months
1 yr project duration from 1st
concept to complete switch

4. MICRO SERVICES
+ Widgets
BUNTE.de “Carrier” Architecture
COCKPIT Custom app
running on AWS.
Distribution, Performance
Management, Placements
incl. Auto-Pilot RENDERING Output to
n formats (Web, AMP,
feeds, App, etc)
CMS Drupal (Thunder),
Editor’s Workplace
composing text, image,
video + various taxonomies
to a story KPI TRACKING
(GA etc)
insights.burda-studios.de/carrier-headless-decoupled-cms-at-bunte/
AWS (ECS, Docker, S3, EBS,
ElastiCache, EFS, Route53, CF, ...)
Inspired by

5. Why a headless setup?
Focus on the future opportunities with
Publishing shifting to off-site distribution
Substantial performance boost for core
audience due to clean markup
Less complex caching (No more Varnish)
Access to “sexier” technology stack (e.g.
AWS & Docker, Grails, Node, GTM)
Way more stable core CMS

6. 0.03 sec
Average article rendering time
vs 2-5 sec on our old system

7. Front end: Orchestrated by Google Tag Manager; based on Material Design
Google Tag Manager
Managing all front end activities
including Ads, IVW, Video, Analytics.
Rule/Detection based firing of e.g.
specific desktop/mobile tags, video
Material Design
Following Google’s guide to achieve
consistent UI/UX, less confusion @
Devs + users
Implemented in bootstrap 3
material.google.com tagmanager.google.com

8. This is IVW + Outbrain. Easily Switch On/Off + Optimized Loading

9. 2.5xFaster Avg Document Content Loaded Time
Bounce Rate -7%, 10%+ PIs/Session among multiple segments

10. Our Swiss Knife for
Image Handling -
Thumbor
github.com/thumbor/thumbor/
Impressive OSS Image Delivery
Service with auto-cropping, filters
and auto face / feature detection
Serving optimized images for
e.g. various iPhone resolutions
Massive efficency booster for
our editors
Running in our dockerized
environment using S3 as cache.

11. Part of the Shift -
Mobile App
Relaunch
Relaunch of iOS + Android Apps
using Facebook’s React Native
Native “smooth” Look & Feel
Common Codebase for iOS +
Android for 80%
Shared Stack (React, JS) w/
lower maintenance costs
Drawback: Integration of native
SDKs, Android Support
insights.burda-studios.de/mobile-apps-for-publishers-native-web-or-hybrid/

12. Key Learnings
Data contracts and solid E2E tests
are key
Implement serious data contracts
(e.g. swagger io) and solid E2E tests
(selenium) early.
Data exchange using XML/DTD might
make sense.
Go live early with non-UI data
We’ve started with the app, a rather
complex service to get rid of the
legacy environment.
Reducing the complexity even more
with a non-critical part like RSS feeds
might have saved time.

13. Project progress 2017
Oct 15
Phased Web Rollout
Oct 20
100% Switch
June
Sync old/new env
iOS + Android App
Relaunch
Jan/Feb
Kick-Off Workshops,
Prototypes, Testing
March - June
Dev of new Env with
focus on non-UI +
Migration
(Feed-based)
Aug - Oct
Switch of all
Feed/Syn Partners
Frontend Dev
Nov
Ongoing
development
Prod LIVE

14. Key Partners
Analytics, Tracking, GTM
Software Dev
Infrastructure Setup
Design, UI/UX
CMS Operations Cloud Vendor

15. Q&A
On the right: The Team celebrating the
BUNTE.de Relaunch on Oct 20.
Hansjoerg Posch
CTO BurdaStudios