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 APPROACHUse multinode tree pickerAdd a doctype filter if possible

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

COMMON APPROACH : TEXT FIELDSAdd a text field for titleAdd a text field for description

COMMON APPROACH : PROBLEMSNo validationNo previewNo feedback

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

QUESTIONS ?

THE END