tackling umbraco: case study on nfl ops website design

USUS

SHOLASHOLADEVELOPERDEVELOPER

MATTMATTDESIGNERDESIGNER

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

OUR COMPANYOUR COMPANY

OverviewOverviewOverviewOverview

Intro to Project

Design Challenges

Under the Hood: Tips & TricksArchetype

UaaS Deployment

External Data

and more!

OUR CLIENTOUR CLIENT

"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."

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

Look & FeelLook & FeelLook & FeelLook & Feel

NavigationNavigationNavigationNavigation

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

UX Testing OptionsUX Testing OptionsUX Testing OptionsUX Testing Options

Responsive DesignResponsive DesignResponsive DesignResponsive Design

DesktopsDesktopsDesktopsDesktops

LaptopsLaptopsLaptopsLaptops

TabletsTabletsTabletsTablets

SmartphonesSmartphonesSmartphonesSmartphones

Template StructureTemplate StructureTemplate StructureTemplate Structure

Content BlocksContent BlocksContent BlocksContent Blocks

ArchetypeArchetypeArchetypeArchetype

ArchetypeArchetypeArchetypeArchetype

An alternative to the Grid for creatingcontent blocks

Newer sites should try both methods tosee what’s comfortable

Archetype NestingArchetype NestingArchetype NestingArchetype Nesting

Great for complex layouts

Place repeatable, modular structuresanywhere in a page

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'); });

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

UaaS DeploymentUaaS DeploymentUaaS DeploymentUaaS Deployment

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

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); }

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

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

Speed Up EditingSpeed Up EditingSpeed Up EditingSpeed Up Editing

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> } }}

Speed Up Editing: DeleteSpeed Up Editing: DeleteSpeed Up Editing: DeleteSpeed Up Editing: DeleteOld RevisionsOld RevisionsOld RevisionsOld Revisions

-- BACKUP FIRST!!! DELETE FROM cmsPropertyData WHERE versionId NOT IN (SELECT versionId FROM cmsDocument WHERE updateDate > @oldest OR published = 1 OR newest = AND contentNodeId IN (SELECT DISTINCT nodeID FROM cmsDocument) DELETE FROM cmsPreviewXml WHERE versionId NOT IN (SELECT versionId FROM cmsDocument WHERE updateDate > @oldest OR published = 1 OR newest = AND nodeId IN (SELECT DISTINCT nodeID FROM cmsDocument) DELETE FROM cmsContentVersion WHERE versionId NOT IN (SELECT versionId FROM cmsDocument WHERE updateDate > @oldest OR published = 1 OR newest = AND ContentId IN (SELECT DISTINCT nodeID FROM cmsDocument) DELETE FROM cmsDocument WHERE versionId NOT IN (SELECT versionId FROM cmsDocument WHERE updateDate > @oldest OR published = 1 OR newest = AND nodeId IN (SELECT DISTINCT nodeID FROM cmsDocument)

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

FakeControllerFakeControllerFakeControllerFakeController

using (var writer = new StringWriter()){ var routeData = new System.Web.Routing.RouteData(); routeData.Values.Add("controller", "UpdatesApi"); var fakeControllerContext = new ControllerContext( new HttpContextWrapper(new HttpContext( new HttpRequest(null, "http://google.com", null), new HttpResponse(null))), routeData, new Umbraco.Forms.Web.Helpers.FakeController());

var razorViewEngine = new RazorViewEngine(); var razorViewResult = razorViewEngine.FindPartialView(fakeControllerContext, "~/Views/Partials/UpdateList.cshtml", false

var viewContext = new ViewContext( fakeControllerContext, razorViewResult.View, viewData, new TempDataDictionary(), writer); razorViewResult.View.Render(viewContext, writer); result = writer.ToString();}return this.Request.CreateResponse(HttpStatusCode.OK, new { result });

External DataExternal DataExternal DataExternal Data

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

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

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

Questions?Questions?Questions?Questions?