Umbraco Packages and Helping Content Editors - uWestFest '16
Download as PPTX, PDF
0 likes588 views
We really wanted to focus on the Content Editor experience and how we as Umbraco developers could make their lives easier. Some of the things we presented were out of the box in Umbraco and some were packages that enhance the Content Editor experience.
Umbraco Packages and Helping Content Editors - uWestFest '16
- 1. Umbraco Packages and Helping Content Editors Jason Prothero and Alan Ballard uWestFest 16 - San Diego, CA
- 2. Who are we? Jason Prothero Front-end, Back-end Technical Lead Alan Ballard Web Designer / Front-End Developer
- 3. 1.Content Editor Usability 2.Packages to Love 3.Q/A
- 4. Improve the Content Editors Experience Its the little things Add property descriptions DocTypes inheritance Use tabs wisely Pick icons that make sense Organize the Media Use the dictionary RTE stylesheets and toolbar Customize the List Views
- 5. Add property descriptions What the heck is this for?
- 6. DocTypes inheritance Why do I need all this?
- 7. Use tabs wisely hyenacub.deviantart.com Why is all this stuff mixed together? Where do I change that property again? Theres soo many tabs!
- 8. Pick icons that make sense Why is everything a folder?
- 9. Organize the Media This is a mess, I cant find anything.
- 10. Use the dictionary Why cant I change this text?
- 11. RTE stylesheets and toolbar This doesnt look anything like the site.
- 12. Customize the List Views Who cares about that field, I dont want to see it.
- 13. Give Them Help Custom Dashboard Bookshelf Inline Help
- 14. Packages to
- 17. Property Editors
- 18. Nested Content
- 19. Allows editors to create lists of complex data on a property. Document Types are the data definition. Trust me, this is cool.
- 20. nuPickers
- 21. Data Sources: SQL, XML, JSON, .NET Classes, Enums, Examine And thats not all! Custom Label Rendering using Macros
- 22. More Property Editors to Try: Archetype u7 Grid DataType Content Picker with Preview Extended Media Picker UrlPicker MultiUrlPicker Angular Maps Switcher Vorto
- 23. Packages to Help You
- 24. Diplo Trace Log Viewer
- 25. View the Umbraco Log files without logging in to the server.
- 26. More Packages to Help You: Core Value Converters uSync Hybrid Framework Ditto LINQ to Examine UmbracoFileSystemProvider.Azure MemberListView for Umbraco 7 UnVersion TheDashboard
- 27. Grid Packages
- 28. LePainter
- 29. Enhance the grid rendering to provide a hint at the front-end view.
- 32. More Grid Packages: DocType Grid Editor LeBlender Umbraco Grid Renderers AttackMonkey Grid Locker
- 33. Dont Reinvent the Wheel Dont Be Afraid To Ask
- 34. Where to Learn and Get Help: Learn Our.Umbraco.org uHangouts on YouTube Conference and Festival Videos Umbraco.tv Ask Our.Umbraco.org Twitter Slack
- 35. Questions?
Editor's Notes
- #3: History: Building Umbraco sites since 2009 (v4.0.3) We have seen a lot of Umbraco implementations (inherited several) We have been advisors on several implementations The Back-Office setup affects clients perception of the project and Umbraco
- #5: The build process is long and its easy to cut corners to get things done, we do it all the time. But after youve finished the site and its the Content Editors time to take over, its the little things you do that can end up creating a great user experience.
- #6: Being consistent with descriptions on your properties on docTypes goes a long way. Its like theres always someone there, helping out. Instead of it just saying image it could have crop sizes, image dimensions.
- #7: Use docType inheritance wisely to make sure the correct properties are shared. Avoid showing unnecessary fields or tabs. Compositions help with this. Un-check allowed docTypes for items only created once like Blog or Search Results
- #8: Avoid having all the properties in one tab. Avoid having too many unnecessary tabs.
- #9: ** show of hands ** who here has seen or made a site with all folders for icons? Yep we have too and were trying to make sure to pick icons that make sense Makes it easier to see at a glance where you are in the content tree.
- #10: Its common in our experience to see all the media just dumped into the root. You can start them off on the right foot by setting up folders. Makes it easier for content editors to find media
- #11: Common words or phrases can be made into dictionary items so if down the road they need to be changed you can easily site-wide. The word Submit is a good example. My friend Eric was working on a European project making web forms that were getting sent out to 6 different European countries. His client made him change Submit to something else because it could be offensive like being submissive
- #12: Add every kind of style you can think of to the RTE formats dropdown. H1 - H6, blockquotes, larger text, smaller text, for flexibility Bring basic styling into the RTE, fonts, titles, line-spacing, background colors. Enable all the icons you need from the RTE data type.
- #13: List views can help keep the content tree tidy But you can edit the properties shown on them
- #14: Dashboard-- If you want to be really cool make custom dashboards with instructions or how-to videos. Here we linked to screencasts. Bookshelf -- A package you can install to keep manuals and in-depth tutorials and help sections. Inline Help -- A package we created to keep in-depth help in context.
- #16: Sent out a tweet to the Umbraco community and got a great response
- #17: Top 3
- #20: FAQ example
- #22: Mention external APIs
- #30: examples coming up...