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.

Changing the browser size kept the same markup, just a different visual presentation. Editing in Experience Manager worked.

Why Would You Do That?

I was tempted to challenge the idea that authors would want to edit a site in the mobile view. But I've been recently working on CMS designs based on wireframes and creative mockups that take mobile-first approaches that also include Experience Manager (as well as SmartTarget, but let me save that for another post). The impact to the website and Tridion content model means changes to the design process and documentation.

"Mobile-First" CMS Documentation

Here's a flavor of how I'm documenting the elements on these page types.

TridionWorld is just a handy example that went responsive a few years ago.

This page type overview doesn't include the specifics for each element or content type (that's in another section in the Functional Design), but notice a few things:

1. Minimum and maximum numbers are important in mobile views in terms of structure, page length, and layout. Understanding these quantities improve your content modeling skills and improve your Experience Manager (XPM) implementations (I'll explain in a follow-up post).
2. The screenshot examples are free of boxes, numbers, and other manually "drawn" changes. This means faster documentation and more time for working out the relationships in the content model.
3. With the images all set to the same width, notice how you can see the structure of the page type just by looking at the last column.

So I'm quite enjoying the challenge and elegance in a mobile-first CMS implementation.

When mobile really is first, of course CMS authors will want to create, test, and maybe even edit within a mobile view, or at least a preview of that experience.

That'll be when we'll ask "what about desktop?" and really consider what "click" means to a mobile-first experience.

Last year*, I started sharing my thoughts on contextual CMS design based on a prompt from SDL product manager Nuno Linhares when he asked us to think about and promote more than just mobile. Rather, it's about context.

And of course context applies to the visitor as well as to the CMS authors.

*Since then, Nuno, SDL Product Management, and team released a "service pack," ran bootcamps, "updated" the UIs, updated SmartTarget, and even took the time to tell the World what they were up to at the various SDL Innovate conferences (of which, I was lucky enough to plug "contextual CMS designs" in the San Francisco Innovate). On top of all of that, and most exciting for the Tridion community, is a new "extension" simply referred to as the SDL Tridion Reference Implementation. Congrats to everyone that worked on it. I'm sure you'll be hearing a lot more about it and maybe a post or ten from yours truly.