Tackling Umbraco: Case Study on NFL Ops Site Design

USUS

SHOLASHOLADEVELOPERDEVELOPER

MATTMATTDESIGNERDESIGNER

This is us. Matt, designer. Shola, developer.

REINGOLD, INC.REINGOLD, INC.ALEXANDRIA, VAALEXANDRIA, VA

OUR COMPANYOUR COMPANY

This is our company. Reingold, Inc. Strategic Communications Firm -  full Service Creative -  based in Washington, DC.

OverviewOverviewOverviewOverview

Intro to Project

Design Challenges

Under the Hood: Tips & TricksArchetype

UaaS Deployment

External Data

and more!

Overview. Why are we here? -  Opp to work with NFL to create new web presence for

Football Operations division. -  Site was built on Umbraco, launched on UaaS

(umbraco.com)

Matt will introduce project background and highlight selected design features of site. Shola will share Umbraco “Tips & Tricks” / lessons learned, topics include: Archetype, UaaS Deployment, External Data, and more!

OUR CLIENTOUR CLIENT

Our Client. - NFL Football Operations = everything on field during game and everything behind the scenes of that. -  Administer game of football.

-  More: balance people (players, coaches, teams, officials) w/

-  Game’s Rules -  Health & Safety -  Tech -  Fan Experience

"FOOTBALL IS AN ESSENTIAL PIECE"FOOTBALL IS AN ESSENTIAL PIECE"FOOTBALL IS AN ESSENTIAL PIECE"FOOTBALL IS AN ESSENTIAL PIECEOF AMERICA’S FABRIC, UNITINGOF AMERICA’S FABRIC, UNITINGOF AMERICA’S FABRIC, UNITINGOF AMERICA’S FABRIC, UNITING

FANS, PLAYERS ANDFANS, PLAYERS ANDFANS, PLAYERS ANDFANS, PLAYERS ANDCOMMUNITIES WITH A SIMPLE YETCOMMUNITIES WITH A SIMPLE YETCOMMUNITIES WITH A SIMPLE YETCOMMUNITIES WITH A SIMPLE YET

POWERFUL BOND."POWERFUL BOND."POWERFUL BOND."POWERFUL BOND."

Troy Vincent (our client) Executive VP of Football Operations 15 year NFL career, All-Pro Grew up w/ football, made career, now works with League on corporate side. -  Understands the value of statements like

“the game is more than just a game.” -  Inspired by quotes like that (and on slide)

which set tone for project.

What we aren't. (nfl.com)

Honor the game’s history.

Showcase innovation.

Troy's 3 C's - Clarity, Consistency, Credibility.

Umbraco!

Website ObjectivesWebsite ObjectivesWebsite ObjectivesWebsite Objectives

Great kickoff, clear objectives. - Not NFL.com -  Honor the Past -  History of Rules, Evol Helmets / Players -  Innovation / Tech

-  Uses tech to constantly improve game -  Instant replay, e-Playbook -  Improve player safety + fan experience

-  3 C’s -  Content = clear. IA = consistent. Voice = Credible.

-  Umbraco! (NFL IT had familiarity w/ U and recommended it)

Look & FeelLook & FeelLook & FeelLook & Feel

Look & Feel. One of the first hurdles for design is establishing identity. One approach is Style Tile. Exercise helps understand how UI / photos / typography / colors come together without the constraints of content & layout.

Mood Board. w/ NFL brand color palette and preliminary concepts for identity marks. “NFL Ops – Behind The Scenes” was working title.

Brand Connection. Connecting FB Ops identity to NFL Brand. Hex pattern = used all over Ops site (and presentation) was inspired from football equipment and nfl.com textures.

Typography. Proprietary typeface called Endzone. Sans/Slab serif variety. Comparing header vs body text styles

Photography. NFL has awesome photos. Full access to AP images library which is really cool. (side note)

UI Elements. Tests how different combinations of elements can look. Overall summary of why we use style tiles (removes contextual opinion, great for projects with more than 1 designer = central resource for creative direction)

NavigationNavigationNavigationNavigation

Navigation. Nav always important for any site. Used nav as opportunity to differentiate NFL Ops from other NFL properties.

Other NFL Web PropertiesOther NFL Web PropertiesOther NFL Web PropertiesOther NFL Web Properties

NFL.com Primary news and communications branch for the NFL

NFLShop.com eCommerce site

NFLPlayerEngagement.com Player Engagement

NFLEvolution.com Player Health & Safety

Other NFL Properties. First step was to research NFL’s prominent websites: NFL.COM NFL SHOP NFL Player Engagement NFL Evolution

This is NFL.com homepage. -  Primarily news / player stats oriented -  Overlay shows basic layout

-  Lead story -  News item column -  Horizontal nav -  *** same as espn.com (conventional)

-  Same layout for all.

-  We came up with different concepts to test…

UX Testing OptionsUX Testing OptionsUX Testing OptionsUX Testing Options

UX Testing Options. Left: vertical nav that functions like accordion to reveal submenus. Middle: persistent vertical nav w/ icons, category description, mega menu. Right: Baseline. Traditional horizotonal nav w/ dropdown menu.

UX Testing. (we coffee shop’d it.) Took to coffee shops and did basic UX testing for feedback. Data recorded from Timed Tasks and general User Exp questions/opinions.

In the end we chose option #2 (from testing and other information)

We loved the Flexibility. 3 States: -  Minified w/ icons -  Expanded w/ category titles -  Fully open w/ custom mega menu

Provided an interesting yet usable way to navigate the site’s primary nav.

Mobile. Here’s how we handled mobile. Off-canvas menu uses same iconography as full menu for consistency. Problem Solved: Needed a way to go straight to main cat landing page. Horizontal line next to accordion “down” arrow created separation to allow: -  Click on right (down arrown) = open submenu -  Click on left (Icon / category title) = go straight to landing page

Responsive DesignResponsive DesignResponsive DesignResponsive Design

Responsive Design. 2015 – we need to design for every user every device. - Not just Resize content but Optimize.

Wireframes. Started from start w/ full wires. Not mobile-first / not mobile-afterthought Created 4 device “experiences”. - Large Desktops - Smaller Laptops - Touch: Tablets - Touch: Smartphones (<740)

Overkill? May seem like overkill / busy work. Why not just scale between smallest and largest? We found that each experience has unique challenges. Our content worked best on tablets when more visual, for instance.

Mobile Testing Rack. We tested the crap out of the site on wide array of devices (see!)

DesktopsDesktopsDesktopsDesktops

Desktop Experience. How the site turned out for Desktops.

LaptopsLaptopsLaptopsLaptops

Laptop Experience. How the site turned out for Laptops.

TabletsTabletsTabletsTablets

Tablet Experience. How the site turned out for Laptops. Note: Tablets don’t have hover states. You can’t have a user step through multiple levels of expanding nav w/out creating new variation of UI. Feature detection for touch devices larger than smartphone sets the nav in an pre-expanded state for users.

SmartphonesSmartphonesSmartphonesSmartphones

Smartphone Experience. How the site turned out for Smartphones.

Template StructureTemplate StructureTemplate StructureTemplate Structure

Template Structure. Site content = deep and wide. Important to set up logical hierarchy of page types. Also wanted to leave a manageable situation for NFL when site is handed back to client.

Template Structure (cont’d). So we came up w/ something like this. Arrows represent likely user paths.

Homepage. -  About Statement -  Featured Content -  Updates Feed (timely content such as

press releases) -  Main Category Intros

Main Category Landing Page. -  Quick links in hero space -  Update Feed (specific to category type) -  Highlights content rotator (to call attn to

deeply nested pages) -  Topic Area Previews

Topic Pages. -  This is where the “story” is told. -  3 different types:

-  Basic Topic Page (standard webpage) -  High Production Topic Page (less text,

more visual content) -  Art-Directed Longform (one-off, deep

content dives w/ lots of scroll-based animation.)

Content BlocksContent BlocksContent BlocksContent Blocks

Content Blocks. -  Rather than using baked/rigid page

layout, we decided to create reusable, modular content blocks.

Content Blocks Sheet. -  Variety of different styled blocks to

construct a page in unique layout each time.

Frontend vs Backend. -  On left: page layout in browser using

modular content blocks.

-  On right: same page inside Umbraco using nested, sortable fieldsets

(speaking of Umbraco…here’s Shola.)

ArchetypeArchetypeArchetypeArchetype

The fieldsets you just saw are from a great package called Archetype, from the guys at Imulus.

ArchetypeArchetypeArchetypeArchetype

An alternative to the Grid for creatingcontent blocks

Newer sites should try both methods tosee what’s comfortable

Archetype does a lot of things, but it can be used as an alternative to the Grid for creating content blocks. For newer sites, you may also want to venture into the Grid, but NFL Ops development started before the Grid became production ready.

Archetype NestingArchetype NestingArchetype NestingArchetype Nesting

Great for complex layouts

Place repeatable, modular structuresanywhere in a page

With Archetype, you can create virtually any type of content block, and its great for repeated items like slideshows for instance. What’s interesting is that you can also nest Archetypes to create complex structures.

For example, we have text, video, and slider blocks and so on that you saw on an earlier slide, but we also have a structure called an “expandable aside.” Inside it, we simply made available the same text, video, and slider fieldsets that its outer parent has available.

One drawback to this is heavy nesting while you’re editing. But there’s a workaround: Archetype lets you inject css and javascript for things like beautifying label previews, but you can really add any javascript and css. So we injected javascript and css to create a “wide mode” button.

Archetype: Add arbitrary JSArchetype: Add arbitrary JSArchetype: Add arbitrary JSArchetype: Add arbitrary JS+ CSS+ CSS+ CSS+ CSS

Allows you to add scripts that change theway the backoffice works

Knowledge of Angular or packages notneeded

// toggle 'wide mode' $(document).on('click', '.nfl-toggle-wide', function () { $('.form-horizontal, .form-vertical').toggleClass('form-horizontal form-vertical'); });

So if you’re not yet familiar with angular or building Umbraco packages, this can be a quick and dirty way to modify the way the backoffice UI works (While creating your Archetype, you need to click on advanced options). For wide mode in particular: While you’re editing a node, if you look through the Chrome inspector, there’s a div called “form-horizontal” that contains all the field properties for that node. So all this script is doing is essentially swapping the CSS class ‘form-horizontal’ with our own CSS class, ‘form-vertical’ (which removes left-padding on the property editors, and stacks the property labels to be on top of the property editors). the ‘nfl-toggle-wide’ element is just a button that we first added to the DOM via Javascript. You can place the button wherever you want via CSS. NOTE: You’ll want to bind its click when jQuery.ready() is actually fired.

Archetype RequirementsArchetype RequirementsArchetype RequirementsArchetype Requirements

Works best with Umbraco 7.2+

If using Courier/Umbraco as a Service,ensure it’s using the correct version ofnHibernate

If you do use Archetype, make sure you’re using Umbraco 7.2 and above, as there is a database value limit issue (they do however provide a separate dll that will repair this for versions less than 7.2). You also want to ensure you have the correct version of Courier if you’re on UaaS for instance, since Courier’s older usage of nHibernate has a similar issue.

UaaS DeploymentUaaS DeploymentUaaS DeploymentUaaS Deployment

Umbraco as a service is a really interesting hosting platform. UaaS essentially uses Git and Courier to ease the challenges of content deployment, where you might separate development, staging, and live environments. However, we were pretty deep into development before NFL Ops made the final decision to host with them.

UaaS DeploymentUaaS DeploymentUaaS DeploymentUaaS Deployment

Special considerations if you're porting an existingsite, vs. starting with UaaS from the beginning

Courier files must be created for not only content, butalso media, content types, custom datatypes, etc.

However, only content has a UI for quickly creatingthese courier files

If you start a new site on UaaS from the beginning, all of the Courier files for content, content types, media, etc. would be created naturally as you gradually edit through the backoffice. But since we were porting everything over, we needed to develop a strategy to create all these Courier files. For content, right clicking on the root node and republishing all of its “subpages” would trigger courier to serialize all the content in one go. But there isn’t a backoffice equivalent to easily do that for media, content types, etc.

UaaS: Creating Courier FilesUaaS: Creating Courier FilesUaaS: Creating Courier FilesUaaS: Creating Courier Filesfor a Pre-Existing Sitefor a Pre-Existing Sitefor a Pre-Existing Sitefor a Pre-Existing Site

// Example: Saving all content types to trigger Courier var svc = ApplicationContext.Current.Services.ContentTypeService; var allcontenttypes = svc.GetAllContentTypes(); foreach (var ct in allcontenttypes) { svc.Save(ct); }

So, instead of manually re-saving each of the hundreds of images, and dozens of content types--just so courier can be triggered--luckily, Umbraco gave us a way to loop through all of these assets programmatically. Each of these assets has an associated Service that allows you to save them, and therefore trigger Courier file creation. https://our.umbraco.org/documentation/reference/management-v6/services/

Courier: Global SettingsCourier: Global SettingsCourier: Global SettingsCourier: Global Settings

If you’re feeling adventurous, once you’ve written that code for each service, you can actually have them run on demand from the UI. We created a Global Settings node that when saved, will trigger courier for the services that are checked. You’ll notice the images checkbox has a “page” field. The reason is that looping through the service takes time, especially for images, and the Ops site is quite image rich. The problem is that Microsoft Azure (which is what UaaS runs on) has timeout of about 4 minutes at the load-balancer level. Paging through these services will allow you to stagger long-running saves, and avoid hitting the timeout. NOTE: For information on how to run code upon saving a node, look here: https://our.umbraco.org/documentation/Reference/Events-v6/ContentService-Events

Don't Store Media in.../mediaDon't Store Media in.../mediaDon't Store Media in.../mediaDon't Store Media in.../media

Especially important for image-rich designs

Use blob storage or CDN

avoids size quota issues

Azure Blob Storage Provider plugin

Media tree will likely be faster

So with all the image-rich content, it was best to store all media outside of your umbraco installation. This is especially important if developing on UaaS, so you can avoid size quota issues and/or other limitations that occur with Git and binary data. We happened to use the Azure Blob Storage Provider package ( https://our.umbraco.org/projects/backoffice-extensions/azure-blob-storage-provider ). Once we did this, we noticed uploading and browsing media is much more performant. Note: If using Azure Blob Storage Provider on an existing site, you’ll also need to change the existing media references in the database (Backup first of course). It will look something like this: update cmsPropertyData set datantext = cast(replace(cast(datantext as nvarchar(max)),'/media/','http://yoursite.blob.core.windows.net/media/') as ntext), datanvarchar = replace(datanvarchar,'/media/','http://yoursite.blob.core.windows.net/media/'); update cmsContentXml set [xml] = cast(replace(cast(xml as nvarchar(max)),'/media/','http://yoursite.blob.core.windows.net/media/') as ntext); update cmsPreviewXml set [xml] = cast(replace(cast([xml] as nvarchar(max)),'/media/','http://yoursite.blob.core.windows.net/media/') as ntext);

Speed Up EditingSpeed Up EditingSpeed Up EditingSpeed Up Editing

We discovered a couple of other ways to speed up the editing process.

Speed Up Editing: Front-Speed Up Editing: Front-Speed Up Editing: Front-Speed Up Editing: Front-end Edit Buttonend Edit Buttonend Edit Buttonend Edit Button

@{ var auth = new HttpContextWrapper(HttpContext.Current).GetUmbracoAuthTicket(); if (auth != null) { var curruser = ApplicationContext.Services.UserService.GetByUsername(auth.Name); if (curruser != null && curruser.CanEdit()) { <a target="_blank" href="/umbraco#/content/content/edit/@Model.Content.Id" class="editpage">Edit ▶</a> } }}

One is by using a front-end edit button link, which is just a nice quick way to reach the backoffice editor for the page you’re currently viewing. We have the button display based on the logged in user’s permissions. Your content editors will thank you, because backoffice search isn’t always effective (when you have several similarly titled articles) and expanding the content tree can be slow sometimes. A perfect place to put this razor code is if you have a “master” view that all your document types use, then just position the button with high z-index, absolute top/right values in CSS. NOTE: “CanEdit()” is just an extension method we created for the IUser class. It can contain whatever conditional permissions logic you might need.

With the long form layout design, each page tends to go through several revisions. This can bog down your backoffice, especially the content tree I just mentioned. Here’s some SQL that you might want to use that deletes old revisions to speed up the backoffice. Won’t go into too much detail, but there are 4 tables that hold this data. You want to prune them based on how far back in time you wish to keep data, while preserving published items, and newest revisions that may or may not yet be published. It’s a pretty handy script when your site has many revisions or just lots of content in general. NOTE: BACKUP FIRST!!! This script is highly destructive.

API ControllersAPI ControllersAPI ControllersAPI Controllersand Infinite Scrolland Infinite Scrolland Infinite Scrolland Infinite Scroll

On the front end, one interesting way we deal with listing lots of content is the infinite scroll technique, which is where we chose to retrieve data via AJAX and an API controller. We have an “Updates” section of the site that has lots of timely news-like articles.

API controllers are great for serializing a C# object to JSON. But what if you just want to return rendered html? One way is to manually build html tags as a string in the api controller and finally pass that to the browser, but that is quite horrible. Because, what if you already have a partial view that you want to reuse? You can’t use it directly, because rendering a view needs a controller context that an API controller can’t provide out of the box. Wouldn’t it be great if you could create a fake controller context for the sole purpose of taking advantage of that partial view?

In comes the aptly named FakeController. If your api controller ever needs to render a partial view’s html, you just need to create a fake controller to do it. Note that except for routeData, the fakeControllerContext instantiation has several null or bogus values, but that’s OK. It just works. NOTE: The above code snippet is of course lives in an API controller. For example: public class UpdatesApiController : UmbracoApiController { [System.Web.Http.HttpPost] public HttpResponseMessage GetUpdates() {

// initialize any variables here such as your ViewDataDictionary viewData, that you’ll eventually pass to your view below.

ViewDataDictionary viewData = new ViewDataDictionary(); string result = “”;

// --- CODE SNIPPET GOES HERE --- } }

External DataExternal DataExternal DataExternal Data

Earlier we spoke about how binary data such as images should be stored outside of Umbraco.

When You Should KeepWhen You Should KeepWhen You Should KeepWhen You Should KeepSome Data Outside UmbracoSome Data Outside UmbracoSome Data Outside UmbracoSome Data Outside Umbraco

When there’s content related to a nodethat must change very frequently

Publishing is computationally expensive

Invalidates the node’s cache

But there’s an instance where you also shouldn’t store certain content data in Umbraco’s content tree, and that’s usually when the piece of content must change very frequently. Changes require publishing, and publishing is a relatively expensive computational process. It also invalidates the node’s cache.

When You Should KeepWhen You Should KeepWhen You Should KeepWhen You Should KeepSome Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:Case 1Case 1Case 1Case 1

For example, we didn’t want to store hits or shares as node properties. You can use the google core reporting api, or store the data in separate tables yourself with a foreign key to the node.

When You Should KeepWhen You Should KeepWhen You Should KeepWhen You Should KeepSome Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:Some Data Outside Umbraco:Case 2Case 2Case 2Case 2

You Make The Call - Interactive Instant Replay Simulation

A similar case is when you need to quickly and frequently calculate and save data to a database. We encountered this in one of the site's features called You Make The Call, which is an interactive instant replay simulation. http://operations.nfl.com/the-officials/these-officials-are-really-good/you-make-the-call/

In You Make The Call the user assumes the responsibilities of an NFL referee during an Instant Replay Review. You get to watch the original play, and the same play from a couple of other vantage points. When you’re finished you receive a calculated percentile in real time against all the people that played that week—thus these type of data, i.e. realtime scores, are not something you want to be publishing to Umbraco nodes every time it happens, or it renders the caching useless. All other data however, like the text for the questions, the video urls, and etc. are all stored in Umbraco (in fact, using Archetype).

Questions?Questions?Questions?Questions?

So with that, we enjoy every bit of working on the project. Everything from design to development, and UaaS had a few challenges but we launched a large scale successful project on it, and learned quite a bit along the way; we hope we’ve given some useful tips on Umbraco as a whole.