Enhancing the Page Editor with a radsplitter

Currently the Backend page editor has some form of Radsplitter with a collapse/expand region for the widgets. When designing content for 'fluid/responsive/adaptive' pages, it would be useful if a content writer could edit a page at a certain width.

Some media query might kick in at 640px width and currently the only way to experience that in page edit is to resize your entire browser to aprox 640px. But by doing so the entire Sitefinity UI gets scaled/resized along with it.

By adding an extra splitter between the page and the widgetpanel, which has the 'LiveResize' functionality enabled, a content writer could easily edit a page at a custom width.

An extra advantage of doing this in edit as apposed to on 'preview' is that media queries don't just alter floats and widths but also allow for dom elements being shown/hidden at certain widths which makes this approach basically the only viable solution.

Since the UX thread seems to be about wireframes, I've attached 2 mock-ups. The first being the 'current' state with the page having a width of 90% and the second with a slider that shows what would happen if it got dragged to say 640px (instead of 4 columns 25% the latter 2 columns fall down and all columns would have 50% width).

Jochem.

Very cool idea!

+1

It'd be nice to jQueryify it too to show the visible screen width somewhere (in the header?)

Check!

Hi Jochem,

Thank you for the suggestion and the wireframes.

I will forward this request t our UX team. In the past there was an internal discussion about this and the oppinions were quite different and controversial. Thanks to you the discussion will be restarted.

Regards,
Antoaneta
the Telerik team

Hey Antoaneta,

Thanks and feel free to send the ones who one last time my way :)

Jochem

Hello Jochem,

Sure. Thank you once again.

All the best,
Antoaneta
the Telerik team