Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Sites on DNN's Liquid Content: From Content Modeling to Front-End UX

704 views

Published on

BlueBolt Solutions, a Chicago-based interactive agency, has built client websites on DNN for over 10 years. BlueBolt has implemented a number of client websites on DNN’s Liquid Content, a new capability in Evoq that makes content available when and where customers need it.

In this presentation, Jason Lichon, Chief Solutions Officer, will detail how BlueBolt leverages key capabilities in Liquid Content to deliver engaging experiences for customers, while providing a content model that’s easy to manage and facilitates re-use.

Jason shows how a content model must precede wireframes and mock-ups, and demonstrates how BlueBolt’s content models facilitate content re-use and multi-channel publishing.

In addition, Jason shares a few Liquid Content tips and tricks, which you can apply to your own sites.

Published in: Technology
  • If you just broke up with your Ex,you have to follow these steps to get her back or risk ruining your chances. Click here ●●● http://t.cn/R50e5nn
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Building Sites on DNN's Liquid Content: From Content Modeling to Front-End UX

  1. 1. Building Sites on DNN's Liquid Content Agenda 1. Introduction to Jason 2. What is “Liquid Content?” 3. Evolution of website content publishing > dawn of headless CMS 4. Building with liquid content – process overview 5. The importance of a content model 6. Taxonomy considerations 7. UX Considerations 8. Tips and Tricks!
  2. 2. 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
  3. 3. 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
  4. 4. What is Liquid Content?
  5. 5. 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!
  6. 6. Real World Example: Financial Services Firm Building Sites on DNN's Liquid Content
  7. 7. Real World Example: Financial Services Firm Building Sites on DNN's Liquid Content Staff: Bob Smith Jane Patterson Tom Tennyson Susan Jones Sam Barker Etc. Show contact info for all staff. Executives and sales team need detailed bios. Services: Mortgages Auto Loans Insurance Lines of Credit Etc. Services to display in a list, and each also has a templated detail page.
  8. 8. Real World Example: Financial Services Firm Building Sites on DNN's Liquid Content Service A Heading Sub-heading for Service The detailed description goes here, with whatever text is necessary. Praesent posuere sed odio vel ultricies. Praesent consectetur aliquet elit sed bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac turpis tincidunt, blandit justo non, accumsan ligula. Donec interdum dui eget nibh tristique, et pharetra orci bibendum. Curabitur molestie, turpis id ullamcorper blandit, sapien dolor scelerisque ante, sed aliquet massa neque vitae justo. Duis eget massa scelerisque, efficitur erat et, ultricies leo. Fusce sed tellus tortor. Contact: Bob Smith Sales for Service A (312) 236-4509 bsmith@acmefinancial.com View Bob’s Bio Rule Based Dynamic Content: Get list of staff related to “service A” Benefits Content automatically linked Content automatically formatted One dynamic page vs. dozens of static Awesome author experience
  9. 9. Dawn of the Headless CMS Page Based CMS > Rule Based CMS > Headless Building Sites on DNN's Liquid Content
  10. 10. 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
  11. 11. 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.
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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.
  16. 16. Real World Example: Parent Brand with Local Affiliates Building Sites on DNN's Liquid Content
  17. 17. Real World Example: Parent Brand with Local Affiliates Building Sites on DNN's Liquid Content Parent Hub Well defined content Spoke B Get prods and events Spoke A Get prods only Spoke C Get blogs from cat X Spoke D Auto publish everything Benefits: content re-use, platform adoption, easy training w/o 3rd party modules
  18. 18. Building with Liquid Content: Process Overview
  19. 19. Building Sites on DNN's Liquid Content Liquid Content Process 1. Plan: Model content 2. Plan: Develop global taxonomy 3. Plan: Validate content model and taxonomy with use cases 4. UX: Create wireframes and designs 5. Develop: configure content types 6. Develop: build visualizers (HTML templates) 7. Deploy: Enter content and launch
  20. 20. Content Modeling Building Sites on DNN's Liquid Content
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. Building Sites on DNN's Liquid Content Content Modeling
  26. 26. Real World Example: Resource Library Building Sites on DNN's Liquid Content
  27. 27. 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
  28. 28. 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 …
  29. 29. 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
  30. 30. Building Sites on DNN's Liquid Content Content Modeling Setting up content types in EVOQ is similar to building a form.
  31. 31. Real World Example: Audience Specific Portals Building Sites on DNN's Liquid Content
  32. 32. 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
  33. 33. Taxonomy Considerations Building Sites on DNN's Liquid Content
  34. 34. 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
  35. 35. 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.
  36. 36. UX Considerations Building Sites on DNN's Liquid Content
  37. 37. 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.
  38. 38. Tips, Tricks, and Pitfalls to Avoid Building Sites on DNN's Liquid Content
  39. 39. 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.
  40. 40. 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.
  41. 41. 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.
  42. 42. 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.
  43. 43. 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).
  44. 44. 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.
  45. 45. 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.
  46. 46. Building Sites on DNN's Liquid Content Contact Jason Questions, ideas, training or service needs: Jason Lichon Chief Solutions Officer, BlueBolt 312-236-4509 jlichon@blueboltsolutions.com www.blueboltsolutions.com

×