Umbraco Packages and Helping Content Editors - uWestFest '16
•Download as PPTX, PDF•
0 likes•587 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.
Recommended
More Related Content
Similar to Umbraco Packages and Helping Content Editors - uWestFest '16
Similar to Umbraco Packages and Helping Content Editors - uWestFest '16 (20)
Recently uploaded
Recently uploaded (20)
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 Editor’s Experience It’s 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? There’s soo many tabs!”
- 8. Pick icons that make sense “Why is everything a folder?”
- 9. Organize the Media “This is a mess, I can’t find anything.”
- 10. Use the dictionary “Why can’t I change this text?”
- 11. RTE stylesheets and toolbar “This doesn’t look anything like the site.”
- 12. Customize the List Views “Who cares about that field, I don’t 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 that’s 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. Don’t Reinvent the Wheel Don’t 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
- 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
- The build process is long and it’s easy to cut corners to get things done, we do it all the time. But after you’ve finished the site and it’s the Content Editor’s time to take over, it’s the little things you do that can end up creating a great user experience.
- Being consistent with descriptions on your properties on docTypes goes a long way. It’s like there’s always someone there, helping out. Instead of it just saying “image” it could have crop sizes, image dimensions.
- 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
- Avoid having all the properties in one tab. Avoid having too many unnecessary tabs.
- ** show of hands ** who here has seen or made a site with all folders for icons? Yep we have too and we’re 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.
- It’s 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
- 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
- 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.
- List views can help keep the content tree tidy But you can edit the properties shown on them
- 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.
- Sent out a tweet to the Umbraco community and got a great response
- Top 3
- FAQ example
- Mention external APIs
- examples coming up...