Content placeholder naming and the html5 data-* attribute

Named content placeholders probably is one of the most asked and voted omission with the transition from v3.7 to v4 but it hasn't been implemented yet. Probably because it's not just a matter of displaying <asp:placeholder> id's but with the introduction of the awesome region editor, things got way more complicated.

During the module builder webinar, responsive design and html5 doctype was hinted as being introduced with v5. So with those two in mind I came up with a blonde alternative approach as to named content placeholders by using the html5 data-* attribute.
 
As someone said last week, it is not as slick as Tim Williamson's workaround by using a jQuery plugin but still this approach wouldn't need to add code to your masterpage. The downside of it is that it can only be implemented by Telerik so I'm keeping my fingers crossed :)

The v5.0 release suggestion:
Telerik introduces the "data-sfplaceholdername" attribute to be used in masterpages to assign names to regions. The embedded templates get updated to use this feature. When in the design editor (template or page) an image gets always loaded inside the region. With a few lines of javascript the alt/title tag of that image gets substituted with the "data-sfplaceholdername". Hovering your mouse of the image will then display that regions name. 

This way the design won't get cluttered by adding text somewhere inside the region and since it's an unobtrusive enhancement, older browsers will only display the image.

The v5.1 release suggestion:
Since <asp:placeholder> tags are hardcoded and only shop up when a region is empty, Telerik enhances the region editor with a textfield. This textfield will populate the "data-sfplaceholdername" of regions (2 column design/3 columns etc). Telerik introduces an 'i' or '?' icon at the top of the region next to the "edit" and "more" commands. Hovering over that icon will display the regions name. Again an unobtrusive enhancement which won't clutter the wysiwyg style of the page editor.

Summary:
By using the "data-sfplaceholder" attribute, <asp:placeholders> get hardcoded names assigned. When it is empty, hovering over the image will display that name. 

If a region gets dropped inside a <asp:placeholder> space, that region name will override the asp:placeholder name.  By hovering over a small icon next to the edit/more buttons one can read the regions name, whether it is an empty region or if a content widget has been dropped in.


I realize that some people will complain that it's not fully backwards compatible with older browsers but I'm a firm believer of graceful degradation. If in today’s market you build the smoothest discman and add some mp3 capabilities to it, you’re simply doing it wrong…

Jochem.

Hi Jochem,

 Thank you very much for the suggestion. We are already thinking in this direction and collecting user ideas is very important for producing a great feature that would enrich the functionality of Sitefinity and improve the user experience with it. Your idea will be internally discussed, together with all other suggestions and I hope that we will come up with an amazing implementation in the end. 
I updated your Telerik points, thanks again!

Hey Svetoslav,

Thanks for the reply and the points! You guys always come with solutions which have usability up front so I'll look forward to the end result.

Jochem

P.S. Tim Williamson posted an update already which makes his plugin even better.