MAKE YOUR EDITORSHAPPY
by Dave Woestenborghs / codegarden 15 / @dawoe21
INTRODUCTIONDave WoestenborghsWork at Colours in Den Bosch ( )Been using Umbraco since 2008MVP-nominee in 2014 and 2015
http://colours.nl
CONTENT IS KINGSo adding content should be easyBut the editor experience is often neglected duringdevelopmentWith frustated editors as a result
IMPROVING THE BACKEND EXPERIENCECan be done with out of the box componentsOr use the power of the communitySmall changes can make a big difference
TIP : ORGANIZE YOUR PROPERTIESGroup them in tabs by functionalityPut them in the order they appear on the front end
TIP : OPTIMIZE YOUR RTEOnly provide the options neededApply the same styling as front endCreate formatting optionsSet dimensions of editor and images
TIP : USE THE IMAGE CROPPERNo need for photoshop croppingNo need to upload in correct dimensionsNo unwanted results by cropping in code
TIP : PROVIDE HELPAdd a description to propertiesFor extended help use Or create documentation using
uEditorNotesBookshelf
TIP : USE THE "CORRECT" PROPERTYEDITOR(S)
Improves editor workflowReduces the number of properties to editReduces the number of tree items
EXAMPLE ONE : RELATING CONTENTWe a have company site with articles and employeesEmployees are created under multiple departmentnodesOn a article we need to select one or more employees asauthor
COMMON APPROACH : PROBLEMSMultiple locations for employees,so not possible to setstart nodeNeed to navigate a content treeNo context on what your picking
ENTER NUPICKERShttps://our.umbraco.org/projects/backoffice-
extensions/nupickersUse prefetchlist or typeaheadlistNo more need to navigate a content treeEasy (de-)assigning itemsBut not a lot of context on what's being picked
APPLY CUSTOM LABELSCustom label : macro to render your itemsAllows for displaying more informationApply styling to match your front end
EXAMPLE 2 : CONTENT LISTSIn our company site each can have their own FAQoverviewThis will show a list of questions and answersThe FAQ items are not displayed as seperate pages
COMMON APPROACH : CONTENT ITEMSWe create a FAQ page doctypeWe create a FAQ item doctypeFaq items are real items in content tree
COMMON APPROACH : PROBLEMSItems are real pages with URLItems are visible in tree (can be solved with listview)Items can be linked
ENTER NESTED CONTENThttps://our.umbraco.org/projects/backoffice-extensions/nested-
contentEditing is done "inline"FAQ items are not longer part of the treeItems can not be linked tooReuse of doctype
ALTERNATIVESArchetype :
U7 Grid data type :
https://our.umbraco.org/projects/backoffice-extensions/archetype
https://our.umbraco.org/projects/backoffice-extensions/u7-grid-data-type
EXAMPLE 3 : SEO META DATAIn our company site we need to add meta data for search engines
on all our pages
ENTER SEOCHECKERhttps://our.umbraco.org/projects/website-utilities/seo-checker
WARNING: Commercial packageRealtime preview of goolge snippetValidation on lengthPossiblity to add focus keywordsValidates page against focus keywords by followingGoogle recommendations
ALTERNATIVESWARNING: These alternatives are only for meta data. SEO
checker comes with a bunch of other SEO related functionalitySEO visualizer :
SEO Metadata for Umbraco :
uSEO Pro :
https://our.umbraco.org/projects/collaboration/seo-visualizer
https://our.umbraco.org/projects/backoffice-extensions/seo-metadata-for-umbraco
https://our.umbraco.org/projects/developer-tools/useo-pro