When building a new site using SCORE, are you paying attention to the styling of the Experience Editor view?
Some project team members may consider this a waste of time, especially for projects that are low on budget and/or need to be finished very quickly. But neglecting Experience Editor has meaningful consequences – and your Content Administrators will be the ones who suffer. A frustrating authoring and editing experience can make it impossible to leverage the full power of even the best website.
Our ultimate goal with Brainjocks, now Perficient, projects is to style Experience Editor to look as close to the front end of the site as possible, optimizing the admin experience. I’ll explain two types of Experience Editor styling that we address when we build websites.
A Fast Path to Functional
The first is a component that is unusable in Experience Editor without some additional CSS. A common scenario is when some components are utilizing absolute positioning or floats that break the component (or part of it) outside of its placeholder. Here is an example from our BrainJuice demo site:
These components are SCORE Highlights that were manipulated with CSS. The image (wine mark) is a foreground image, so it had to be absolutely positioned to appear behind the value for temperature or rain. This achieves the following look in Experience Editor:
Not horrible, right? It looks pretty close to the front end. At first glance, you might think all you need to do is fix the cut-off image. However, if you try to edit the information in the component, you will see that the value for temperature is not editable because the image is in the way. You can see in the image below that hovering over the Highlight body field only gives you an editing box for the image.
The solution in this scenario is very simple: it’s actually only one line of code. All you have to do is just “reset” the position of the image. In this case, I used “position: initial,” but there are several values that will achieve the desired result.
You’re probably already addressing these issues in your current projects because they’re blockers that your administrators will definitely bring up.
Setting Up for User Efficiency
So let’s talk about the next scenario, which is a component that would be easier to use with the help of additional Experience Editor styling. For this scenario I will use our SCORE Slider component on BrainJuice:
This Slider has 10 panes in it. As you probably know, JavaScript components need to be “flattened out” in Experience Editor, so every pane needs to be shown at the same time. This results in the following look:
I could only fit one entire pane and part of the next in the above screenshot. Could you imagine what 10 of these looks like? The Content Administrator will have to scroll for ages to get to the content below this Slider. Since Sitecore throws you back up to the top of your page every time you click “Save,” this is going to make your admins feel very frustrated, very quickly!
It’s also quite obvious that each pane does not need to stretch to 100% of the page width. We can improve this experience by simply floating each item and giving them a set width for Experience Editor, as follows:
I don’t know of anyone who would prefer to work with the first option. It may look fine and every field can be edited, but it makes for a poor admin experience. Floating the Slider panes and giving them a set width makes the Experience Editor view look a lot closer to the front end view — and that makes the page much easier to work with.
I have seen many sites that have not gotten any special Experience Editor attention. The result is not pretty. Spending some extra time styling your components in Experience Editor will be well worth it at the end of your project. You may be surprised at how little time it actually takes to make the administrator side of your site look great.
