Optimizing Content Authoring with Image Renditions and Device Channels – Part I

One of the biggest additions in SharePoint 2013 is the ability to use Device Channels and Image Renditions to deliver targeted content to mobile devices.  In this two-part article series I’ll walk you through how you can combine these technologies and make life easy on your content authors.

There are two things to consider when you use Device Channels and Image Renditions together.  The first thing to consider is how your content authors will create content that uses both of these technologies, and the second thing is how you implement the technologies from a technical point of view.

The Content Authoring Experience

To start, let’s discuss how content authors create content delivered via Device Channels and Image Renditions.

Content Authors typically create content in SharePoint web sites by placing SharePoint pages into edit mode, adding content, then saving and publishing the page.  This is a straightforward process which content authors are accustomed to.

When Device Channel and Image Renditions enter the picture, the content-authoring process could get overly complicated and cumbersome if you don't plan ahead to think about how you design the content authoring experience.

For example, if the SharePoint web site you are building includes three Device Channels, and you plan to use Image Renditions to target images at each channel differently, you will most likely create the following artifacts to support this solution:

• 3 Master Pages (1 per Device Channel)
• 3 CSS Files (1 per Device Channel – linked in Master Page)
• 3+ Image Renditions (1 per image for each Device Channel – used in Page Layouts)
• 3 Page Layouts (Home Page, Secondary Page, Tertiary Page)

Now, let’s think about the page-editing experience.  One way to organize Page Layouts is to create three Device Channel Panels and place them in each Page Layout. 

The content inside a Device Channel Panel is only rendered for a given Device Channel.  You can read more about Device Channel Panels and how to create them here.

The Implementation

Here’s a diagram which illustrates this pattern.

In such a scenario, each Device Channel Panel contains a Publishing Image Field Control whose RenditionID property is set to ensure the Publishing Image Field Control displays the appropriate Image Rendition of the image associated with the Device Channel Panel it is placed inside.

For example, in the diagram above, RenditionID 2 correlates to the Image Rendition used in a Device Channel named iPad, and the code to implement it looks like this:

Although this pattern is very easy to implement from a development point of view, it makes things very cumbersome for content authors because they have to use different devices to edit the Publishing Image Field Controls inside each Device Channel Panel.   

That approach isn’t feasible.  How would you like to be a content author and have to open the same web page three times in edit mode, from three different devices, to create and update content?  No thanks!

Another way to do this is to add the DeviceChannel QueryString parameter to the URL inside a web browser to force the web browser to render the view of a page for a given Device Channel. 

You could also use developer tools like the IE Developer Tools to send a different User Agent string from the web browser to the web pages in SharePoint to target particular Device Channels and subsequently edit the Publishing Image field controls.

No matter which option you pick, this is a cumbersome and tedious option which will slow down the productivity of your content authors (and probably makes them dislike you too).

This brings us to the million dollar question…  Can we make it possible for content authors to modify the Publishing Image Field Controls which allow them to set the images (and their Renditions) for all Device Channels all from the default Device Channel? 

The answer is, yes!  I bet you saw that coming from a mile away. 

To accomplish this task and provide content authors with an easy editing experience, use a combination of Device Channel Panels and Edit Mode Panels in your page layouts.  Stay tuned--in my next post, I’ll show you exactly how to do it.