Tridion User Expectations for the HTML Design (and beer metaphors)

I'm wrapping up my most recent visit to the Amsterdam office. One of my colleagues had a prompt from a client on what to request from the creative agency in terms of the markup. Of course we had to compare notes.

We gathered our "best practices" but needed non-technical descriptions for the business user communicating their preferences to the creative design agency (if you really want the technical details take training and/or read this post by Frank M Taylor).

So let's look at some user stories for those using an in-context CMS editor:

"As a CMS user I need the ability to add content to and from the page. I should be able to add, re-order, or remove content in the in-context or form-based editing interfaces."

This translates into movable elements. Lists and “flat” markup are preferred where possible—especially on a page. This lets editors add, move, or remove in the Content Manager and Experience Manager.

You don't need markup to see which is easier to manage. Here's an example from our CMS Design Principles training: perhaps your presentation looked like a box of sorts:

A B C

D E F

G H I (that's the end of the training example, the rest is my metaphor)

Would you prefer a list that automatically displays in rows?

Does Experience Manager work with Responsive Web Design?

This question was posed to my team recently: "Do you get a responsive view scaled to your screen in [SDL] Experience Manager?"

My response had three points:

1. This has more to do with the HTML and styles than Experience Manager (XPM).
2. XPM only adds borders on the wrapping container element (tag) for the Component Presentation and fields.
3. As the borders resize and move, the XPM borders should move.

Of course "should" wasn't enough. So let me further qualify the answer to "does XPM work with Responsive Web Design?" with "yes, to the extent that your mark-up keeps the borders and the XPM field comments intact."

Luckily I had an environment to "prove" my point.

My colleagues had already set up this environment, a relative to Electridion Training (not to be confused with the Reference Implementation), based on a Bootstrap responsive template.