Case study: 

Three front end challenges building responsive MTV UK site

Didzis Avotiņš

Sr. Front End Developer, Wunderkraut

avitslv on Github, LinkedIn, Drupal

Project background

The Client

Shared backend architecture

Content

repository

IA

Modules

Configuration & Features

Services

...

Previous front-end approach

...

M

T

D

MTV UK

MTV RU

...

M

T

D

CC UK

...

Base

Base

Base

First challenge:

Theme structure, shared styles

Fork brand level styles or create new ones

White label sub-theme

Template sharing and override mechanism

Single base theme

Theme structure: root

/

Base theme

White label sub-theme

CC

sub-themes

..Site X

sub-theme

MTV

sub-themes

Theme structure: base theme

/common

styles

Theme structure: styles directory

/common/sass

/common/sass/mtv

Theme structure: compiling MTV UK sub-theme SASS

/mtv/mtv_co_uk/config.rb

/mtv/mtv_co_uk/sass/style.scss

// Base styles
@import 'mtv/base/fonts';
// Layouts
@import 'mtv/layouts/panels/site_layout';
// Components
@import 'viacom/components/swiper/swiper';
@import 'mtv/components/vimn-videoplayer/vimn-videoplayer--alpha';
add_import_path "../../common/sass"

...

MTV UK

White label

SASS - MTV

SASS - Viacom / WH

SASS - Brand X

Theme structure résumé - styles

MTV RU

CSS

CSS

Base theme

CSS

Second challenge:

Panels grid system implementation

Less maintanance and lower dev costs

MTV UK project goals:

Increase Ad revenue

Possibility to publish iterations of the MTV site in other countries

Allow site builders to build pages

Grid that supports MPU Ads ( e.g. 300 x 250 )

Mobile

1col

Tablet

2col

Desktop

3col

Large Desktop +

4col

0px +

760px +

1020px +

1300px +

Panel Grid System ( VIMN Grid )

Back-end:

  • Panels layout
  • Panels CTools styles plugin
  • Patch for Panels module

Front-end:

  • Singularity.gs grid framework
  • Pre-generated Panels site builder CSS for preview
  • Layout SASS grid in Base theme for site users

VIMN Grid - Demo

Third challenge:

Component approach

Component == any element or group of elements with specific CSS class

Panel panes

Panel regions

HTML element

Group of HTML elements

The ultimate goal for any component:

  • Placement, context independent ( lookin good, always )
  • Context aware

Component in Drupal term's:

Back-end:

  • Content
  • Module
    • PHP Logic
    • Base template
    • JS

Front-end:

  • CSS properties
  • Template overrides

Example: Video player component

Example: Listing component

List of MTV UK components

  • Mobile navigation
  • VIMN Grid
  • VIMN Listings
  • Video player & video playlists
  • Gallery
  • Embedded content
  • Lazy-loaded & responsive Ads
  • ​Search overlay
  • ... 23 components in total

Let's put it all together

Viacom Platform programme

  • Started September 2014
  • Wunderoot + VIMN dev team
  • Scrum framework
  • Team:
    • Project owner
    • 2 front end developers 
    • 2-4 back end developers 
  • White-label theme ready: January 2015
  • MTV UK re-launch date: April 2015

Developer locations

London, UK

Helsinki, Finland

Valmiera, Latvia

Made with Slides.com