Building Sites on DNN's Liquid Content: From Content Modeling to Front-End UX
-
Upload
dnn -
Category
Technology
-
view
286 -
download
2
Transcript of 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!
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
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?
Building Sites on DNN's 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
Building Sites on DNN's Liquid Content
Real World Example:Financial Services Firm
Building Sites on DNN's Liquid Content
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.
Real World Example:Financial Services Firm
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
Evolution of Website Content Publishing
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.
Building Sites on DNN's Liquid Content
Evolution of Website Content Publishing
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
Building Sites on DNN's Liquid Content
Evolution of Website Content Publishing
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
Building Sites on DNN's Liquid Content
Evolution of Website Content Publishing
Today: Content Freed from the Website, Published 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
Building Sites on DNN's Liquid Content
Evolution of Website Content Publishing
Today: Content Freed from the Website, Published Everywhere
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
Building Sites on DNN's Liquid Content
Real World Example:Parent Brand with Local Affiliates
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
Content Modeling
Other Content Type Considerations• List and detail views• Combine like content into single type?• Don’t get too granular or complex
Building Sites on DNN's Liquid Content
Content Modeling
Real World Example:Resource Library
Building Sites on DNN's Liquid Content
Real World Example:Resource Library
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
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 …
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
Content ModelingSetting up content types in EVOQ is similar to building a form.
Real World Example:Audience Specific Portals
Building Sites on DNN's Liquid Content
Real World Example:Audience Specific Portals
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid 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
Building Sites on DNN's Liquid Content
Building Sites on DNN's Liquid Content
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
Building Sites on DNN's Liquid Content
Building Sites on DNN's Liquid Content
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.
Building Sites on DNN's Liquid Content
Tips, Tricks, and Pitfalls to Avoid
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.
Building Sites on DNN's Liquid Content
Tips, Tricks, and Pitfalls to Avoid
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.
Building Sites on DNN's Liquid Content
Tips, Tricks, and Pitfalls to Avoid
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.
Building Sites on DNN's Liquid Content
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).
Building Sites on DNN's Liquid Content
Tips, Tricks, and Pitfalls
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.
Building Sites on DNN's Liquid Content
Tips, Tricks, and Pitfalls
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.
Building Sites on DNN's Liquid Content
Contact Jason
Questions, ideas, training or service needs:
Jason LichonChief Solutions Officer, [email protected]
www.blueboltsolutions.com