tackling umbraco: case study on nfl ops website design
TRANSCRIPT
![Page 1: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/1.jpg)
![Page 2: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/2.jpg)
![Page 3: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/3.jpg)
USUS
SHOLASHOLADEVELOPERDEVELOPER
MATTMATTDESIGNERDESIGNER
![Page 4: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/4.jpg)
REINGOLD, INC.REINGOLD, INC.ALEXANDRIA, VAALEXANDRIA, VA
OUR COMPANYOUR COMPANY
![Page 5: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/5.jpg)
OverviewOverviewOverviewOverview
Intro to Project
Design Challenges
Under the Hood: Tips & TricksArchetype
UaaS Deployment
External Data
and more!
![Page 6: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/6.jpg)
OUR CLIENTOUR CLIENT
![Page 7: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/7.jpg)
"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."
![Page 8: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/8.jpg)
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
![Page 9: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/9.jpg)
Look & FeelLook & FeelLook & FeelLook & Feel
![Page 10: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/10.jpg)
![Page 11: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/11.jpg)
![Page 12: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/12.jpg)
![Page 13: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/13.jpg)
![Page 14: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/14.jpg)
![Page 15: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/15.jpg)
NavigationNavigationNavigationNavigation
![Page 16: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/16.jpg)
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
![Page 17: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/17.jpg)
![Page 18: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/18.jpg)
UX Testing OptionsUX Testing OptionsUX Testing OptionsUX Testing Options
![Page 19: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/19.jpg)
![Page 20: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/20.jpg)
![Page 21: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/21.jpg)
![Page 22: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/22.jpg)
![Page 23: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/23.jpg)
Responsive DesignResponsive DesignResponsive DesignResponsive Design
![Page 24: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/24.jpg)
![Page 25: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/25.jpg)
![Page 26: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/26.jpg)
![Page 27: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/27.jpg)
DesktopsDesktopsDesktopsDesktops
![Page 28: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/28.jpg)
LaptopsLaptopsLaptopsLaptops
![Page 29: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/29.jpg)
TabletsTabletsTabletsTablets
![Page 30: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/30.jpg)
SmartphonesSmartphonesSmartphonesSmartphones
![Page 31: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/31.jpg)
Template StructureTemplate StructureTemplate StructureTemplate Structure
![Page 32: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/32.jpg)
![Page 33: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/33.jpg)
![Page 34: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/34.jpg)
![Page 35: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/35.jpg)
![Page 36: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/36.jpg)
Content BlocksContent BlocksContent BlocksContent Blocks
![Page 37: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/37.jpg)
![Page 38: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/38.jpg)
![Page 39: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/39.jpg)
ArchetypeArchetypeArchetypeArchetype
![Page 40: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/40.jpg)
ArchetypeArchetypeArchetypeArchetype
An alternative to the Grid for creatingcontent blocks
Newer sites should try both methods tosee what’s comfortable
![Page 41: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/41.jpg)
Archetype NestingArchetype NestingArchetype NestingArchetype Nesting
Great for complex layouts
Place repeatable, modular structuresanywhere in a page
![Page 42: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/42.jpg)
![Page 43: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/43.jpg)
![Page 44: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/44.jpg)
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'); });
![Page 45: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/45.jpg)
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
![Page 46: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/46.jpg)
UaaS DeploymentUaaS DeploymentUaaS DeploymentUaaS Deployment
![Page 47: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/47.jpg)
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
![Page 48: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/48.jpg)
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); }
![Page 49: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/49.jpg)
Courier: Global SettingsCourier: Global SettingsCourier: Global SettingsCourier: Global Settings
![Page 50: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/50.jpg)
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
![Page 51: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/51.jpg)
Speed Up EditingSpeed Up EditingSpeed Up EditingSpeed Up Editing
![Page 52: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/52.jpg)
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> } }}
![Page 53: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/53.jpg)
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)
![Page 54: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/54.jpg)
API ControllersAPI ControllersAPI ControllersAPI Controllersand Infinite Scrolland Infinite Scrolland Infinite Scrolland Infinite Scroll
![Page 55: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/55.jpg)
![Page 56: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/56.jpg)
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 });
![Page 57: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/57.jpg)
External DataExternal DataExternal DataExternal Data
![Page 58: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/58.jpg)
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
![Page 59: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/59.jpg)
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
![Page 60: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/60.jpg)
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
![Page 61: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/61.jpg)
![Page 62: Tackling Umbraco: Case Study on NFL Ops Website Design](https://reader034.vdocument.in/reader034/viewer/2022042701/55a5cc581a28ab374e8b4841/html5/thumbnails/62.jpg)
Questions?Questions?Questions?Questions?