2
votes

My problem is that we are creating a responsive site and we are going to effectively render two renderings of the same item on one view. The current markup is too complex to refactor to be common across all devices. We do not want to do 'adaptive' with device detection since our clients feel that window resizing is a valid use case.

We want to maintain the same presentation details across both of these and my solution is to attempt to render the placeholder multiple times? Is this possible? Is there a better solution?

To be clear:

  • I realize a separate rendering targeted by device is best, but not an option
  • we are rendering two versions of the same control in one rendering.

from the comments, for clarity

I think the crux of the problem is that MyComponent and MyMobileComponent both have dynamic content inside, let's call it 'MyPlaceHolder'. So how do I have only 1 MyPlaceholder, but render it for both MyComponent and MyMobileCompenent. Having 2 unique placeholder is a horrible authoring flow and possibly unachievable.

1

1 Answers

0
votes

I know you said it is not an option, but the best responsive implementation in my opinion would be to have a single markup that uses CSS media queries to alter the look and feel for different sizes.

Barring that, I think the second-best recommendation for responsive is to have a single rendering with two versions of the control, as you did already.

While you can use placeholders and have two separate renderings (MyComponent and MyMobileComponent) added to the same placeholder, I'm not sure if this benefits you much. You may be binding to the same datasource for both, which isn't necessarily the easiest authoring flow. If the only reason you have two is to have different markup for different resolutions, I don't think you need to duplicate the Sitecore data model to support this.

The one benefit I see is that by separating the components you allow an author to put the mobile version in a completely different place on the page than the non-mobile version. However, this is probably more confusing to the author than helpful.

As a side note, you mentioned the markup is 'too complex to refactor'. This is probably an indication that it indeed needs to be refactored. If you will be building and maintaining a site that needs to support responsive, you should be trying to simplify your design and markup. The cost of refactoring will be lower than your ongoing maintenance costs of maintaining a highly complex markup structure that is duplicated (or triplicated, depending on if you need alternative tablet versions in the future).