building sites on dnn's liquid content: from content modeling to front-end ux

Building Sites on DNN's Liquid Content

Agenda

1. Introduction to Jason2. What is “Liquid Content?”3. Evolution of website content publishing > dawn of headless CMS4. Building with liquid content – process overview5. The importance of a content model6. Taxonomy considerations7. UX Considerations8. Tips and Tricks!


About Jason

• Chief Solutions Officer at BlueBolt• Working with DNN since 2005• BlueBolt provides UX/design, implementation, and training

services related to DNN/EVOQ• Core offering: enterprise search solution with DNN connector


Goal Today

• Explain what Liquid Content is• Highlight benefits• Show how to plan and approach implementation• Give real world examples• NOT going to give a demonstration of the interface

What is Liquid Content?


What is Liquid Content?

DNN’s Foray into Headless CMS Publishing• Sometimes also called “Structured Content”• Brought into EVOQ through a “microservice”• Content Authoring – tools to define content types, and to enter

the content according to permissions and workflow.• Content Delivery – Displaying content: once visualizers are

created, content editors can add liquid content to EVOQ pages without having to involve a programmer.

• API – or, deliver to external channels

Key Benefits: Outstanding author experience, Publish content everywhere,Goodbye 3rd party modules!

Real World Example:Financial Services Firm




Staff:Bob SmithJane PattersonTom TennysonSusan JonesSam BarkerEtc.

Show contact info for all staff.Executives and sales team need detailed bios.

Services:MortgagesAuto LoansInsuranceLines of CreditEtc.

Services to display in a list, and each also has a templated detail page.



Service A HeadingSub-heading for Service

The detailed description goes here, with whatever text is necessary. Praesent posuere sed odio velultricies. Praesent consectetur aliquet elit sedbibendum. Lorem ipsum dolor sit amet, consecteturadipiscing elit. Etiam ac turpis tincidunt, blandit justonon, accumsan ligula. Donec interdum dui eget nibhtristique, et pharetra orci bibendum. Curabiturmolestie, turpis id ullamcorper blandit, sapien dolor scelerisque ante, sed aliquet massa neque vitae justo. Duis eget massa scelerisque, efficitur erat et, ultriciesleo. Fusce sed tellus tortor.

Contact:

Bob SmithSales for Service A(312) [email protected]

View Bob’s Bio

Rule Based Dynamic Content:Get list of staff related to “service A”

BenefitsContent automatically linkedContent automatically formattedOne dynamic page vs. dozens of staticAwesome author experience

Dawn of the Headless CMS

Page Based CMS > Rule Based CMS > Headless



Evolution of Website Content Publishing

Stage 1: Page Based Content Management• Web sites were an island of content• Content and platform highly coupled – high switching costs• Key challenge: arrange pages so content easy to find• Key challenge: enable non-tech content admins• Page content was free-form• PAINFUL to create relationships > manual linking



Stage 2: Rule Based Content Management• Multiple sites to manage. Needed to share and re-use content.• Taxonomy becomes a buzzword.• Key challenges: efficient content re-use, efficient mgmt.• Advanced – rules based dynamic pages.• Pain point: content still locked in web platform … how to use for mobile app?• Pain point: Even higher switching costs.



Today: Content Freed from the Website, Published Everywhere – Headless• Content planners think in terms of content types and taxonomy - not web pages.• Goal: the creation of an enterprise content store• Serve all channels and devices from unified content repository• Content delivery is rules based. Rules are channel based. • Lower costs to switch display platforms



Today: Content Freed from the Website, Published Everywhere

• Headless CMS – authoring tools only, roll your own presentation• De-Coupled CMS – authoring tools, presentation layer, API for external publishing• C.O.P.E: Create Once, Publish Everywhere




C.O.P.E. Use Cases:• Multi-channel: web, mobile, print• Publishing to partners, affiliates, or chapters – hub and spoke model• Future devices – car, toaster, wearables




C.O.P.E requires more rigor:• Content types must be defined.• Taxonomy exercise – highly recommended.• Consider future use cases.• Content must be stored independent of display rules – whether in a headless or a

de-coupled CMS.

Real World Example:Parent Brand with Local Affiliates


Real World Example:Parent Brand with Local Affiliates


Parent HubWell defined

content

Spoke BGet prods and

eventsSpoke A

Get prods only

Spoke CGet blogs from

cat X

Spoke DAuto publish everything

Benefits: content re-use, platform adoption, easy training w/o 3rd party modules

Building with Liquid Content:Process Overview


Liquid Content Process

1. Plan: Model content2. Plan: Develop global taxonomy3. Plan: Validate content model and taxonomy with use cases4. UX: Create wireframes and designs5. Develop: configure content types6. Develop: build visualizers (HTML templates)7. Deploy: Enter content and launch

Content Modeling



Content Modeling

First step: start listing the kinds of content your organization

needs to publish.

News Releases

People*

White Papers

Case Studies

Testimonials

Articles

Product Descriptions

Events*Videos*

Blogs Recipes Image Galleries


Content Modeling

How fine grained?

• Are different attributes required per type? (e.g. one requires an image, while the other does not)

• Will the content need to be displayed separately or in the same list?

Use cases will help answer these questions, and the UX will also help to validate the model.

Webinars

Conferences

Trade Shows

Job Fairs


Content Modeling

Use Case Examples

• Master calendar with all events• Individual listings• Webinars start as events, become resources• Some events need to be shared with a WordPress

micro site• Webinars require registration through Citrix.• Training events have limited space • Some events need to display a map.

Webinars

Conferences

Trade Shows

Job Fairs


Content Modeling

Other Content Type Considerations• List and detail views• Combine like content into single type?• Don’t get too granular or complex


Content Modeling

Real World Example:Resource Library


Real World Example:Resource Library


Pool of Liquid Content

videos, white papers, articles, case studies, image galleries, pod

casts, publications, and on and on

Filter and Winnow by:- Content type- Category- Date- Keyword search

Rich User Interface- Single page app (SPA)- Media viewing- Content preview- Bookmarking- Sharing

Liquid content makes this possible:- Structured content authoring tools- Flexible API to accomplish any UI


Content Modeling

Determine attributes (fields) per type

News Releases

• Date• Headline• Location• Short description• Body• Image

White Papers

• Title• Subtitle• Short description• File location• Author• Author image• White paper image

Testimonials

• Client name• Client contact name• Client contact title• Client contact image• Headline• Quote• Product

Potential field types: single line text, multiline text, HTML, number, date, multiple choice, asset (image, video, etc.), reference type …


Content Modeling

Complex Example – types which reference other types

Webinar

• Date• Title• Description• Image• Registration link• Presenter (type: staff) >

Staff

• First name• Last name• Job title• Department (selector)• Employment start date• Bio• Picture• Phone• Email


Content ModelingSetting up content types in EVOQ is similar to building a form.

Real World Example:Audience Specific Portals


Real World Example:Audience Specific Portals


Liquid Content makes this possible:- Multi-tenant with single content pool- Rules based content sharing- No 3rd party modules- Authors create and tag content > it automatically displays

Public

Industry

Partners

Taxonomy Considerations



Taxonomy Considerations

• DNN has had taxonomy for a while now via tagging• Good taxonomy enables sophisticated content selection rules• Bad habit of the past: taxonomy via 3rd party modules• Taxonomy is best used to define subject matter ACROSS all types of content


Don’t Forget to Validate

• Go back to the use cases and confirm that your content types and taxonomy can be used to segment content as needed to support your needs.

• Validate again after wireframes.

UX Considerations



UX Considerations

• Content model provides a head start• UX designers should have understanding of EVOQ Visualizers vs. API• There will still be parts of the every site which consist of static HTML.• UX designer should focus on documenting RULES for content display.• Pages can be built according to taxonomy themes, or recency, or content type.

Tips, Tricks, and Pitfalls to Avoid




Try to avoid use of the HTML field type when creating content types

• Break content into pieces – example: recipe• The template should apply formatting rules instead of relying on the author.• This makes it easier on the author and improves consistency.• It better supports future use cases and display needs.



The API allows you to combine different kinds of content in a single list

• The standard Content Visualizer module won’t (yet) combine multiple content types – use the API in this case.

• Work around – the Visualizer can combine by tags.• Common scenario – different kinds of events.



UX designers should become familiar with capabilities of the Visualizer Module

• You will want to know which things can be done with the standard module vs. a custom module which calls the API.

• Consider a proof-of-concept exercise to really bring everyone up to speed.



Taxonomy / tag management will require training for authors

• Taxonomy is currently “free form.” The system will not enforce a standardized taxonomy.

• The EVOQ tag selecting function does provide type-ahead suggestions, and you should train content creators select from existing tags if you want to maintain a standard taxonomy.


Tips, Tricks, and Pitfalls

Visualizer Code Management

• The EVOQ UI allows you to input code. You should probably also store a copy in your preferred source control.

• Consider packaging up content types and visualizers so that they can be re-used (also a good source control technique to manage releases).



Content Migration

• Liquid content improves the portability of content in both directions.• If you have an existing structured content source, you can use the Liquid Content API

to migrate.



Do Not Be Swayed by People Who Don’t Want to Change

• Anyone who has used DNN and EVOQ for a while has established their own implementation patterns – 3rd party or custom modules.

• 3rd party modules lead to horrible author experience, low adoption.• Many will resist change, and justify it by finding shortcomings or saying that they can

implement faster using some other technique.• DNN has been aggressively improving the functionality.• DNN has welcomed input.• The feature set will continue to improve and evolve.• The benefits of having a unified interface for managing all your content (vs. 3rd party

modules) outweighs any current shortcomings.• Be strategic, not tactical.


Contact Jason

Questions, ideas, training or service needs:

Jason LichonChief Solutions Officer, [email protected]

www.blueboltsolutions.com

mailto:[email protected]

http://www.blueboltsolutions.com/

building sites on dnn's liquid content: from content modeling to front-end ux

Technology