Umbraco Show & Tell, London 2017
âąAls PPTX, PDF herunterladenâą
2 gefĂ€llt mirâą1,027 views
Presentation given by Ben Pilgrim and Andy Butland of Zone at the Umbraco "Show & Tell" event held in London, on 31st March 2017. The theme of the day was the Umbraco editorial experience.
Empfohlen
Empfohlen
Weitere Àhnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ăhnlich wie Umbraco Show & Tell, London 2017
Ăhnlich wie Umbraco Show & Tell, London 2017 (20)
KĂŒrzlich hochgeladen
KĂŒrzlich hochgeladen (20)
Umbraco Show & Tell, London 2017
- 1. UMBRACO: THE GREAT EDITORIAL EXPERIENCE Andy Butland â Head of .NET development Ben Pilgrim â Senior account manager
- 2. WHAT WEâRE TALKING ABOUT TODAY 1. Introduction to Zone 2. What makes a website tick? 3. Including the editor 4. One feature, six ways 5. The backoffice: Umbracoâs secret sauce 6. Zoneâs show and tell
- 3. ZONE 1
- 4. We help ambitious businesses win in a world where digital is mission critical
- 5. SOME OF OUR CLIENTS
- 6. WHAT MAKES A WEBSITE TICK? 2
- 7. 80% say they deliver a superior customer experience. â âClosing the delivery gapâ by Bain & Co
- 8. 8% of customers agree they get a superior experience. â âClosing the delivery gapâ by Bain & Co
- 9. How do we bridge that gap?
- 10. Focus on the unsung hero of website success
- 11. Website editor
- 12. Content is a service â a differentiator that provides a reason to choose one brand/retailer over another. And by adding value to the customer experience, content helps differentiate premium brands from discounters. When combined with great products and genuine utility, content can turn functional transactions into brand experiences.
- 13. Brands that put content first and are prepared to adapt to their customersâ needs are rewarded âWe've done research on our content, and we get 30% extra value for every dollar spent.â â Beth Comstock, vice chair, GE â56% of people buying IBM technology had engaged with content during the buying cycle, whereas only 21% had spoken to a sales person.â â Andrea Ames, content experience strategist, IBM
- 14. MISSION CRITICAL DIGITAL INCLUDING THE EDITOR 3
- 15. INCLUDING THE EDITOR Discipline barriers â content, user experience and technical â are coming down though the use of agile, inter-disciplinary, customer- focused teams. Optimising the experience for the site visitor. But we also need to include the editor in these design discussions.
- 16. FOUR QUESTIONS âą What content will we make available on our site? âą How will it be presented to the user? âą How will we make that happen? âą How will it be managed â created, updated and refreshed?
- 17. CONTENT UX DEVELOPER EDITOR TRANSFORMING THE CONVERSATION
- 18. CONTENT UX DEVELOPER EDITOR TRANSFORMING THE CONVERSATION
- 19. ONE FEATURE: SIX WAYS 4
- 20. The same front-end feature can be managed in Umbraco in many different ways. The ârightâ approach can only be found by considering how the content is to be created and maintained by the editors. To consider: âą Where is the content sourced from? âą How often will it be updated? âą How flexible is the presentation? âą Is there a need to reuse the content in other places of the website?
- 21. THE BACKOFFICE: UMBRACOâS SECRET SAUCE 5
- 22. Umbraco lacks an in-page, visual editing option. But perhaps this is a good thing. UMBRACO BACKOFFICE
- 23. For most websites, editors will spend much longer working with Umbraco than developers will! EDITOR EXPERIENCE BASICS
- 25. Umbraco is a portal for managing all content related to a website, not just the page content. NOT JUST FOR CONTENT
- 26. ZONEâS SHOW AND TELL 6
- 27. EXAMPLE: FLEXIBLE PAGE CONSTRUCTION
- 28. EXAMPLE: CONTENT REUSE WITH CUSTOM DISPLAY
- 29. EXAMPLE: CONTENT REUSE WITH CUSTOM DISPLAY
- 30. EXAMPLE: INTEGRATED EMAIL CAMPAIGNS
- 31. Start fast. Build fast. Learn fast. Get your products into your customersâ hands, listen and start tailoring it more to their needs.
- 32. THANK YOU Andy Butland â abutland@zonedigital.com Ben Pilgrim â bpilgrim@zonedigital.com
Hinweis der Redaktion
- The sweet spot, is creating something that uses insights, technology and creates experiences that we feel are mission critical to our clientâs businesses
- We work with clients who are large and reach a wide variety of people, so keeping up with the connected consumerâs speed is a difficult task that we need to help with.
- Here we are showing the typical conversations that go on during a website development project, and indicating the additional role that needs to be included.
- In many case the âcontentâ strategist and âeditorâ role may be the same person â but they are quite different roles. One is focused on what the site visitor sees and interacts with, the editor is responsible to updating and maintaining that content.
- Show demo here, simple feature for promotional âspotlightâ content items implemented as: - Rich text editor - Fixed set of fields - Child notes - MNTP - Nested content - Nested content with picker for re-use The key point to keep in mind is that whilst some of these options may be considered better than others, thereâs no right way â it all depends on questions around the nature of the content and how it needs to be updated.
- We work with some other CMS platforms at Zone and often have to consider, with our clients, which is most appropriate for a given project. One feature Iâve noticed a number of other platforms focus on is what I would call the âvisual editingâ experience. This is when itâs possible to browse the actual website or an interface that looks very like it, and, with appropriate permissions, click and edit content in place. It looks impressive, and is intuitive for casual editors. Umbraco doesnât have this feature â it did in the past, but was quite some time ago and fell out of use, likely for the reasons Iâll describe. But Iâd actually turn this around, and make the case that the absence of this feature is a plus point for Umbraco. The reason is that in practice, particularly for anything more than simple âbrochureâ sites, thereâs a number of areas where the visual editing experience falls down â links, images, hidden elements, aggregated content. In summary, if designing an interface for editing, it would likely look quite different to one optimized for site visitors and read-only display. In Umbraco, thatâs what we have with the back-office. Other platforms do to, but often this is a secondary consideration, both for the vendor and the implementer. Itâs anticipated that editors will spend less time in this âformsâ view, so it gets less attention. With Umbraco itâs the primary means of updating content, so itâs intuitiveness and features are uppermost in the mind both of the HQ and contributors developing the product and the developers of the website project. Visual editors are initially impressive and useful for casual site editors. But have some issues when considered as the primary editing interface for focused editors: Elements like images and links are not so easily managed Hidden elements â SEO elements, configuration, settings â arenât obvious or are inaccessible Aggregated page content is edited elsewhere Interface is designed for display and user interaction, not content editing With Umbraco, the âformsâ based editing environment is the first class citizen â both for the core product and site implementers.
- A key consideration is âwho is the back-office forâ. Although developers spend a fair bit of time there, itâs not for them. For any reasonably long lived Umbraco site, itâs the editors that spend the most time there. Thereâs a few simple best practices to look for when putting together a site, and for evaluating how a site is being built if your role is a commissioner or stakeholder.
- Some extra care, along with a number of simple guidelines and approaches will greatly improve their editorial experience: Balance providing sufficient flexibility with âjust enoughâ choice Use tabs and compositions for organisation and consistency Use icons and descriptions for visual clarity and instruction Select (or build) the right property editor: From the core From community packages Build custom
- The Umbraco back-office can be a portal for managing all content related to a website, not just the content. Related information can be managed in a secure, consistent manner. E-commerce CRM Custom data One aspect of Umbracoâs flexibility is that it can be extended for management of related functions and not just website content. Additional sections can be created, custom dashboards and screens allowing secure access for example to reports, analytics and custom data management â in a familiar interface, with a single sign-on.
- Iâd like to talk about where I work for a secondâŠ.
- This screen shows an example of a flexible page weâve created for the website of the Slater & Gordon law firm. The challenge here was creating a modular interface, that could include a range of different content types in whatever order the editor chose. We choose to do this using the ânested contentâ package demonstrated earlier, which nicely represents in the back-office what the visitor will see on the site front-end and can be managed from a single page.
- Here we see a feature from the Tesco âEat Happyâ project website that utilizes an Umbraco extension developed by our colleague Neil Cumpstey â one we have open-sourced and made freely available to others should they wish to use it. His insight was that within a site a single piece of content is often surfaced in a number of ways â take a blog post, it will have a full-page itself, but also appear in listing pages, search results, as related content perhaps in a side-bar, even within another post if referenced. In each case presenting a sub-set of the content fields, in a different visual display. The package he developed allows this to be implemented very easily by the developer â in the above screen shot we can see different types of pages rendering in different ways as appropriate for them in the listing, including in the back-office editor so the editor can see a true WYSIWYG experience.
- Another colleague Ali Taheri put together this website â itâs actually a side project so I promised I would plug it - www.bestiranian.com â itâs a search and listings site for the best Iranian restaurants, bars and companies in London. The reason I asked him if we could include it here was from a nice feature he implemented where, in the back-office, he integrated a Google API to aid the editor in populating the contact details of each organization. As youâll see you can complete them one at a time, but an easier way is to obtain the Google âplace Idâ, enter that, and then the rest of the fields will be automatically populated following retrieval from that API. The same mechanism can then be used to present other information, not-CMS managed, on the website front-end, such as reviews and working hours.
- This slide shows a last example of the idea of integrating non-content, but related, site functions, within the CMS â from a website weâve built for Greene King. Itâs implemented as a custom section that we can restrict appropriate users to have access to. And a dashboard from which the editor can prepare email campaigns, select groups and send out email newsletters to subscribers using a MailChimp API.
- Any questions?