nl en en en nl en en nl en en nl nl nl nl nl nl nl nl nl nl en en en cs nl nl nl nl en nl en nl en en en nl nl nl en nl nl nl nl nl nl nl nl nl nl nl nl nl nl en tr ko en en yue en nl en tr ko ko ko yue en en nl nl nl fr en nl en nl en fr ar en en en es tr es en de pt nl en nl nl
Naar aanleiding van mijn presentatie voor de Nederlandse Umbraco vereniging DUUG op 22 februari 2018, hieronder een overzicht van een aantal van de besproken tips om Umbraco redacteur-vriendelijk in te richten. Dit zijn ‘quick-wins’ die vrij eenvoudig toe te passen zijn en het leven van de Umbraco redacteur net iets beter maakt dan het al is met zo’n prettig CMS 😊
Tip 1 - Beperk publicatie-rechten op belangrijke pagina’s zoals homepage en nieuwsoverzicht
In de praktijk kan het voorkomen dat redacteuren met minder ervaring per ongeluk op de knop ‘depubliceren’ klikken. Dit is bij een normale pagina ergens diep in de sitestructuur niet zo’n probleem. Maar als het de homepage betreft, heeft dit vaak tot gevolg dat de website volledig uit de lucht is. Dit is eenvoudig te voorkomen door in Umbraco te werken met verschillende beheersrollen, waarbij er een rol is met beperkte rechten. Deze rol heeft dan niet het recht om belangrijke pagina’s zoals de homepage te (de)publiceren, zodat je kunt voorkomen dat een stagiair in een onbewaakt ogenblik de website uit te lucht haalt. Permissies zijn eenvoudig met schuifjes in te stellen, zie onderstaand.
Tip 2 - Implementeer OpenGraph voor afbeeldingen
Dit is vrij eenvoudig te voorkomen door voor de Umbraco redacteur een extra invoerveld toe te voegen waarin de afbeelding opgegeven kan worden of hiervoor een aparte crop aan te bieden in de media sectie.
Deze afbeelding kan dan worden opgenomen in de OpenGraph tags in de   sectie van de HTML.
Je moet de hoogte en breedte van de afbeelding meegeven in de tags
De URL naar de afbeelding moet absoluut zijn en dus ook de domeinnaam bevatten
1024x512 is een aanbevolen resolutie waarop de afbeelding op verschillende platform en apparaten zo gunstig mogelijk worden getoond. Meer daarover lees hier.
Wil je testen of je alles juist hebt ingesteld en hoe je pagina wordt getoond op Facebook dan kun je hiervoor de Facebook Debugger tool gebruiken.
Tip 3  - Installeer Image PostProcessor
Je kunt op een vrij simpele manier de laadsnelheid van de pagina verbeteren door afbeeldingen die geüpload worden in de media sectie van Umbraco, automatisch te laten comprimeren. Dit is niet alleen zinvol voor de (mobiele) gebruiker die daarmee de pagina sneller op het scherm heeft, maar ook voor je de Google PageSpeed beoordeling. Installeren gaat eenvoudig via NuGet:
Voor meer tips over het verbeteren van je Google Page Speed voor een Umbraco site lees je deze drie blogs:
Boost the Google PageSpeed of your Umbraco website - part 1 /3
Boost the Google PageSpeed of your Umbraco website - part 2 /3
Boost the Google PageSpeed of your Umbraco website - part 3 /3
Tip 4 - Gebruik bij Nested Content zo min mogelijk verschillende type blokken
Als je “page-builder”-achtige functionaliteit aanbiedt door middel van Nested Content, kies dan voor zo min mogelijk verschillende type blokken, maak de blokken configurabel.
Simpel voorbeeld. Kies niet voor 2 blokken “Tekst met plaatje rechts” en “Tekst met plaatje links” maar kies voor “Tekst met plaatje” en laat de redacteur (bijvoorbeeld) via een vinkje instellen waar de afbeelding getoond moet worden ten opzichte van de tekst. Zie onderstaand.
Dit biedt de redacteur meer flexibiliteit, zonder dat hij opnieuw blokken hoeft aan te maken en de oude te verwijderen.
Tip 5 - Gebruik SEO checker voor het afvangen van dode links
Er zijn verschillende toepassingsmogelijkheden voor SEO Checker. Wij gebruiken met name de ‘Inboud link error” functionaliteit als we websites verhuizen van een ander CMS (zoals SharePoint of Typo3) naar Umbraco. Omdat een ander CMS nu eenmaal een andere URL structuur heeft, kan het bij live-gang van de nieuwe Umbraco website voorkomen dat bepaalde oude URLs (die bijvoorbeeld nog in Google staan) niet meer werken. De gebruiker krijgt dan de bekende 404-pagina niet gevonden melding. SEO checker registreert dit, en biedt de redacteur via een eenvoudige interface aan een doorverwijzing te maken naar de juiste pagina in het Umbraco CMS.
SEO checker is een commerciële package die eenvoudig geïnstalleerd kan worden in Umbraco.
Tip 6 - Bied verschillende invoervelden aan voor de naam van de pagina
De naam van een pagina in Umbraco kan op verschillende plekken terugkomen. Zo wordt de paginanaam vaak gebruikt als paginatitel die bovenaan de webpagina wordt getoond. Ook wordt de paginanaam getoond in de TITLE tag van de HTML structuur. Tot slot wordt de paginanaam gebruikt in verschillende navigatiemenu’s. In veel installaties die wij doen voor klanten, richten wij 3 aparte velden aan:
Navigation title: De tekst die wordt getoond als een pagina wordt gebruikt in een (top of footer) menu
Page title: De tekst die wordt getoond bovenaan een pagina
Meta title: De titel die wordt getoond in de   tag in de HTML structuur.
Om te voorkomen dat de redacteur dubbele invoer moet doen, maken we gebruik van een fall-back scenario, waarbij terug wordt gevallen op (een van de) andere velden mocht de redacteur besluiten een veld leeg te laten.
Tip 7 - Bied styling aan voor tabellen en tabelrijen
Tabellen opzetten in Rich Text editors wordt soms als lastig ervaren door redacteurs. Dit geldt niet alleen voor Umbraco, maar ook voor andere CMSen aangezien die vaak hetzelfde onderliggende Rich Tekst Editor (RTE) component gebruiken.  En eerlijk gezegd: heel gebruiksvriendelijk is dit inderdaad ook niet, zeker als je de gebruikerservaring op dit punt vergelijkt met bijvoorbeeld Word.
Je kunt een Umbraco redacteur in ieder geval op weg helpen door verschillende CSS klassen aan te bieden waarmee de tabel van stijl kan worden voorzien. De redacteur kan kiezen uit deze stijlen door te klikken op een tabel en dan voor ‘table properties’ te klikken. Zie onderstaand.
Standaard worden deze "class" keuzelijst niet getoond in Umbraco. Je zult hiervoor een aanpassing moeten doen in het configuratie bestand config\tinymce.config. Zie onderstaand.
{"title": "None", "value": ""},
{"title": "Table with border", "value": "border"},
{"title": "Table no border", "value": "noborder"}
Dit geldt ook voor eigenschappen van een rij:
{"title": "None", "value": ""},
{"title": "Red", "value": "red"},
{"title": "Blue", "value": "blue"}
Neem contact op met Gerben.
Waar kunnen we je mee helpen?
Even bellen? 033 432 30 38
Vacature C# .NET developer
Tel: 033 432 30 38
Om je beter en persoonlijker te helpen, gebruiken wij cookies en vergelijkbare technieken. Met de cookies volgen wij jouw internetgedrag binnen onze site.