Case study:
Three front end challenges building responsive MTV UK site
Didzis Avotiņš
Sr. Front End Developer, Wunderkraut
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
DCampBaltics15 - MTV UK Case Study
By Didzis Avotiņš