Editing EPiServer 7 content on a mobile device

I can't quite put my finger on it..

Back in 2010, EPiServer released Mobile Center for CMS 6 - an iPhone/iPad native app which allowed editors to "gain control over their online presence", as it were. Essentially, the app connected with CMS 6 dashboard gadgets and allowed basic functions like publishing a new page, viewing reports etc.

With over 10,000 views, the press release for Mobile Center still ranks as one of the most popular articles on EPiServer World. 

Mobile Center press release back in 2010.
 

While innovative for its time, it really wasn't all that useful for editors. The functions were too limited, the installation was clunky and while available for the iPad, the app didn't scale well visually and failed to take advantage of the iPad's bigger screen. An Android version was planned, but ultimately scrapped.

But clearly, mobile content editing was in demand.

EPiServer 7 has the right touch

Jump to 2012, and sites now serve content to mobile devices using responsive web design. Web development has changed more towards a "mobile first" approach. However, until recently, editors were largely stuck working in a desktop environment.

In EPiServer 7, the UI has been redesigned with touch screen devices in mind. The right-click context menus are gone, and all functions are available at your fingertips. Now that tablets are mainstream and smart phone touch screens are becoming larger, this is great news for editors and a long-awaited feature.

Pointing out the good and the bad

I played with the release version of the Alloy templates to see how efficient mobile content editing is. EPiServer version was 7.0.586.1. Devices used were an iPad 2 and iPhone 4S, both with iOS 6 and Safari browser in landscape mode.

(And yes, I know advanced content editing on a smartphone is probably not the most common use case. But hey, 75% admit to using their mobile phone in the bathroom. While they're producing rubbish output at one end, they might as well produce quality output at the other end, right?)

Logging in

Manually typing the cmsui path URL on mobile devices is slow and error prone. Help your mobile editors by having a clearly visible login button or link, like the Alloy templates have.

Entering username and password using softkeyboard works like a charm. (Most will probably check "Remember me" to avoid the typing next time.)

QuickNavigation toolbar

QuickNavigation toolbar in the upper right has a dropdown menu with links to Edit mode and Dashboard, and an Edit icon which opens On-page-edit. 

• iPad: All toolbar links are easy to tap accurately with the finger, with no zoom.
• iPhone:  All toolbar links are easy to tap accurately with the finger (the UI actually zooms in on the toolbar for better accuracy.)

• Bug: Tapping the yellow arrow does not toggle dropdown collapse/expand - it just stays expanded. Does not collapse when losing focus (e.g tapping on page).

Dashboard tab

The black arrow icon which collapses/expands the EPiServer ribbon is a bit hard to tap accurately. Sometimes leads to tapping the URL field, which brings up the softkeyboard (iPhone in particular). Ideally this could be a little bigger without compromising the esthetics.

Adding tabs and gadgets both work great. Many links and buttons have to be tapped twice (once to get focus, once more to execute the action), but this is no biggie.

• Quirk: In each gadget's settings menu, the "remove gadget" option is disabled. I have to activate "Rearrange gadgets" from the gadget settings in the top ribbon to be able to delete gadgets.
  
• Bug: With the Dashboard tab active, clicking the Globe icon leads to a faulty URL containing just the server hostname (this is a single-site setup). Note: this might be a config error on my demo site. On alloy.demo.episerver.com (with several sub-sites) however, the Globe correctly leads to the site selected in the dropdown. 
• Bug: Some minor positioning error in gadget header when minimizing/maximizing gadgets. 
• Bug: Rearranging gadgets by drag-n-drop doesn't work (results in dragging the underlying page).
• Bug: The upper right X does not close the Add Gadgets dialog. Must tap Done to close.

Must activate "Rearrange gadgets" to be able to delete gadgets.

On-page edit

Navigating the page tree works fine, as does creating new pages. 

Editing existing blocks and content properties works great. As long as you're writing pure text. See, the TinyMCE editor controls don't appear in the editor on a mobile device. Which means you can't insert images, change formatting or insert links. Bummer.

• Quirk: When editing the XHTML MainBody property of a default page, often a tiny editor window appears, making it very hard to work with longer texts. Editing other LongString properties like Heading and TeaserText opens a normal size editor window. 
• Quirk: Sometimes the text editor window won't appear. It's a bit inconsistent so not always able to reproduce this.
• Suggestion: A toggle option to make the text editor go full-screen.
• Quirk: The "expand node"/plus icon is a bit small on iPad (let alone iPhone). Often leads to selecting the node instead.
  
• Bug: TinyMCE controls not available in editor! (neither LongString nor XHTML properties)
• Bug: HTML tags are rendered as text in the editor window.
• Bug: Drag-n-dropping existing blocks to a page doesn't work on a mobile device.
• Bug: After creating a new page, opening the asset pane before the page is published will ask if you want to create a new pagefolder. This dialog won't go away even if you tap Global Files or Documents. It's a bit inconsistent though, can't always reproduce this behaviour.

No TinyMCE when editing MainBody property.

Forms editing

This is probably the most comfortable way to do mobile editing. Properties are neatly laid out as expected, and don't rely on an editor window popup (which during my testing has been a bit inconsistent). 

Still, disappointing that TinyMCE editor controls are unavailable in text properties.

• Quirk: Several dialog window (select categories, manage access rights) are too big for iPad landscape mode, so buttons end up outside the visible area. No way to drag or zoom to view the whole window, other than going to portrait mode.
• Bug: TinyMCE controls not available in editor (neither LongString nor XHTML properties)
• Bug: Closing the manage access rights window using the X doesn't work, neither does tapping outside the window. There is no other way to close this window other than reloading the page, or making a random access change and then tapping Save (which obviously has to be reverted afterwards).

Unable to close the access rights dialog.

Assets pane - Blocks

• Quirk: If you use the zoom gesture while the assets pane is open, the pane will automatically be closed. 
• Quirk: Rearranging blocks folders by drag-n-drop doesn't work. No biggie, since we can cut and paste using the folder context menus.
• Quirk: After deleting a blocks folder, the Global Library folder will be highlighted by default. Tapping any other existing folder will make that folder selected (context menu appears),  
  but the row is not highlighted with color.
• Quirk: When creating a new block of a blocktype that has an Image property (e.g. TeaserBlock), the Select Image dialog has the CMS6-style yellow color icons instead of the new blue/white ones.
• Bug: When renaming a blocks folder, the softkeyboard automatically closes after the first keypress (regardless of key). The name of the folder is saved though, so you end up with truncated folder names like "New folde ".

Problems renaming folder name.

Asset pane - Files

This is probably the UI feature that is least comfortable to work with. There are quite a few niggling UI bugs, especially related to creating and using new items.

• Quirk: When renaming a files folder, the Save and Cancel buttons are overflowing outside the visible area.
• Quirk: When searching for files, the input fields, radio buttons and Cancel button are overflowing outside the visible area.
• Quirk: iPad/iPhone only allows access to Camera Roll folder, which means you currently can't upload files from Dropbox etc. Probably by design in iOS.
• Bug: All files uploaded from iPad/iPhone end up in the root folder (of either Global Files or PageFiles). There is no way to upload files to another folder.
• Bug: All files uploaded from iPad/iPhone are given the name "image.jpg" and since they are all uploaded in the same location, they will overwrite each other.
  
• Bug: There is no way to create a folder within a folder. All folders are created at root level.
• Bug: There is no way to move or copy an uploaded file to another location. Files don't have context menus when selected, the menu has no Cut/Copy/Paste icons, and drag-n-drop doesn't work.
• Bug: There is no way to add a folder to Favorites. This requires right-clicking on a files folder, which is kinda hard to do on a mobile device.
• Bug: There is no way to rearrange folders. No Cut/Copy/Paste functionality, and drag-n-drop doesn't work.

"Search files" controls overflowing outside the visible area.

Classic edit mode

By going to mysite.com/mycmsuipath/cms/edit, I can normally enter classic edit mode. On iPad/iPhone however, this view is only shown briefly while the page loads, then disappears leaving only the EPiServer ribbon visible.

• Bug: Edit mode disappears once page has loaded completely. Only ribbon is visible.

Classic edit mode disappears when viewed on an iPhone/iPad.

Admin mode

Admin mode loads without problems and functions as expected. All links, tabs and buttons are easy to tap accurately, and all are within the visible area (or the page can be scrolled into view).

Reports open in a new tab/window and work as expected.

Visitor groups however, are a problem. To define a Visitor Group, pre-defined critera must be drag-n-dropped from the right column into a placeholder, which doesn't work on iOS.

• Quirk: Unable to define Visitor Groups because drag-n-drop of criteria doesn't work on iOS.

Defining Visitor Groups using drag-n-drop not possible on mobile device to to conflict with swipe gestures.

The verdict

Functionality that depends on drag-n-drop (file management, visitor groups etc) is pretty crippled on iOS, but with all the different mobile devices out there with their own quirks, perhaps that's the tradeoff that we must accept. 

While editing works in iPhone as well, tiny UI elements on the screen are often frustrating to tap accurately. The iPad seems like the perfect size for mobile editing. On a side note, it will be interesting to see if smaller tablets are equally capable to work with.

I completely understand that perfecting the mobile editing experience has not been top priority during the massive rebuild that is EPiServer 7. I find it impressive that mobile editing works as well as it does after all. I hope this doesn't break the hearts of too many sales people who see this as a major selling point.

That being said, fixing a few of the key bugs listed above will raise the experience A LOT. Right now, mobile editing in EPiServer 7 is mostly useful for quickfixing existing text, not creating new pages or working with pagetypes or blocks.

I hope EPiServer will take a look at the bugs listed here (they probably already know about most of them), and I'm looking forward to seeing mobile editing further improved in an upcoming servicepack.