AUTHORING EXPERIENCES CREATING GREAT AUTHORING EXPERIENCES Denise Duncan, Director Enablement Services October 28, 2014

CREATING GREAT AUTHORING EXPERIENCE - AGENDA Creating Great Authoring Experiences What makes a great experience?  Resources  Your Feedback  Labs & Demos 

What makes a great experience?

creating great authoring experiences - WHAT MAKES A GREAT EXPERIENCE? Content Organization Enable users to easily find, create and edit content based on type and site. Input Configuration Take advantage of various input template fields and best practices. Preview Configure preview to match the published site. This usually only requires a few steps.

creating great authoring experiences - WHAT MAKES A GREAT EXPERIENCE? In Context Editing (ICE) Enable users to edit content from preview by verifying the ICE configuration Models Enable users to create pages, sections, and sites based on site and role

creating great authoring experiences - WHAT MAKES A GREAT EXPERIENCE? Template Performance Make sure templates are configured to perform well for a small or large group of assets.

creating great authoring experiences - WHAT MAKES A GREAT EXPERIENCE? Examples and guidelines are available on Connect Forum open for discussion https://connect.crownpeak.com/human_interaction_guidelines New Powerpoint Template Keynote https://connect.crownpeak.com/developers_and_partners/forums/authoring_experience

Labs & Demos

Follow along Training Instance Hands on instructions https://cms.crownpeak.com/TrainingAndDemos/UI/

Make the content Easy  to Find

Structure automatically generated by Site builder tool - CONTENT ORGANIZATION Demo Structure automatically generated by Site builder tool Provides the most flexibility to add additional sites, sub-domains or sites for device types Site collection: sites related by domain name (i.e. locale, device) or common groupings (microsites, BU) [[SHOW]] Domain: *.domainname.* Package: Configured by Domain [[Show packages]] Provides… Available in [urls] Show folder, Click into US-EN https://cms.crownpeak.com/TrainingAndDemos/UI/ /Demo Site - Folder Structure

Design a Great  Editing Experience

Autocomplete //List used for radio button and list controls HANDS-ON - INPUT CONFIGURATION //List used for radio button and list controls Dictionary<string, string> buttons = new Dictionary<string, string>(); buttons.Add("California", "CA"); buttons.Add("Nevada", "NV"); buttons.Add("Mississippi", "MI"); Input.ShowAutoCompleteBox("Autocomplete", "auto_complete", buttons, 40); Autocomplete /Samples by Type/Input Fields Example/Input Fields Example

Horizontal Panel HANDS-ON - INPUT CONFIGURATION //Horizontal wrap container Input.StartControlPanel("Horizontal Panel"); Input.StartHorizontalWrapContainer(); Input.ShowTextBox("First name", "fname_2"); Input.ShowTextBox("Last name", "lname_2"); Input.ShowTextBox("Telephone", "telephone_4"); Input.EndHorizontalWrapContainer(); Input.EndControlPanel();

List panel HANDS-ON - INPUT CONFIGURATION //Horizontal wrap container Input.StartControlPanel("Horizontal Panel"); Input.ShowMessage("Creates a container that arranges the contained controls horizontally. If the controls can't fit in one row, they wrap to a new row below the first."); Input.StartHorizontalWrapContainer(); Input.ShowTextBox("First name", "fname_2"); Input.ShowTextBox("Last name", "lname_2"); Input.ShowTextBox("Telephone", "telephone_4"); Input.EndHorizontalWrapContainer(); Input.EndControlPanel();

Render CSS and JSS correctly in Preview Main Header - Sub Header Confirm that CSS and JS are editable by adding them to the CMS as assets and linking them to developer templates. Create links in navigation wrappers using ServicesOutput.RenderScriptLink or ServicesOutput.RenderCssLink Test the Preview in CrownPeak Show how this looks broken Preview Configuration Example

ICE and the .Raw method Main Header - Sub Header ICE and .Raw Example In Context Editing (ICE) enables content authors to edit their content from preview mode. ICE is applied automatically to fields using WYSIWYG, text, and image inputs. ICE can be added or disabled manually. For conditionals, .Raw is used to obtain the values you may need. ICE and .Raw Example

Make it easy to Create  Content With Models.

Model exercise available on Connect MODELS We’ll look at an intermediate model configuration, providing content authors with the ability to create a new folder prepopulated with two content assets. We’ll also examine a model configuration that is recursive and includes references to several other model types. Model exercise available on Connect  

Resources

Demos and Documentation RESOURCES Demos and Documentation Code samples are available in the training instance Reference documents and articles available on Connect https://cms.crownpeak.com/TrainingAndDemos/UI/ https://connect.crownpeak.com/conference_2014/agenda/day_one/creating_authoring_experience

New Powerpoint Template RESOURCES Demos and Documentation Examples and guidelines are available on Connect Forum open for discussion https://connect.crownpeak.com/human_interaction_guidelines New Powerpoint Template Keynote https://connect.crownpeak.com/developers_and_partners/forums/authoring_experience

Before we go… Your Feedback 

We are here to hear your ideas and requests. PARTNER SUMMIT - FeedBACK We want your feedback! We are here to hear your ideas and requests. You have our ear - here at the conference, through support, through Connect. We want to open a dialogue that starts here and continues well beyond So please share your feedback cos we are always looking for ways to improve our product. Product improvements come from 3 channels- Product Management Innovations from Customer Success team- And of course Feedback and contributions from Developers like you Through conversation at the conference or by posting on Connect Product Management Customer Success Community Feedback Developers

Twitter Forums on Connect - FeedBACK Template development PARTNER SUMMIT - FeedBACK Twitter @CrownPeak #CrownPeakPartners For ongoing discussions with the CrownPeak community on Template development User & Developer Experience Solutions and Extensions Product features & roadmap Hosting & Publishing Integrations Forums on Connect Twitter hashtag and QR Code <a href="https://twitter.com/intent/tweet?button_hashtag=CrownPeakPartners" class="twitter-hashtag-button" data-related="CrownPeakHelp,CrownPeak">Tweet #CrownPeakPartners</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> <img src="http://qrfree.kaywa.com/?l=1&s=8& d=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DCrownPeakPartners" alt="QRCode"/> Forums QR code <img src="http://qrfree.kaywa.com/?l=1&s=8&d=https%3A%2F%2Fconnect.crownpeak.com%2Fdevelopers_and_partners%2Fforums" alt="QRCode"/>

    Access to Customer Success and Product Teams - FeedBACK PARTNER SUMMIT - FeedBACK Access to Customer Success and Product Teams You have access the Product and Customer Success teams to give direct feedback on features and best practices Meet the team during the presentations and Q&A sessions Make suggestions – we are capturing it. Team members are armed with Post-its! Ask questions – We want to start a conversation that last well beyond the summit Any Questions?  MEET THE TEAM  MAKE SUGGESTIONS  ASK QUESTIONS  Partners and Developers

Partners and Developers PARTNER SUMMIT - FeedBACK FEEDBACK?  Partners and Developers

CrownPeak + Web Experience Management  CrownPeak + Web Experience Management