Responsive & Mobile Design rules out-of-the-box

Here we go again. Started using this feature and have a lot of ideas on how to make it work better.

1) There should be 4 default rules out of the box

  - Tablets and small screens  landscape
  - Tablets and small screens portrait
  - Smartphones landscape
  - Smartphones potrait

 I think its a common scenario that you will transform different on land and portrait mode.

 2) Editing a rule, saving and try to change it will reset it -> must be a bug not a feature
      www.marktold.com/screencast/sf_responsive_edit.swf

 3) You can choose from 3 settings that will create default rules. This will not add to custom rules but replace them. Also if you use none of them they will show anyhow which is very confusing.

www.marktold.com/screencast/sf_responsive_selection.swf

 -> There should be a button next to add custom that reads add defaults or so.

-> add default would then add the 3 rules you have today and (even while its bad design) could help us target sepcific devices.

-> Kind of Galaxy S3, iPhone 4, iphone5 or Galaxy S3 up, iphone 5 up.

4) the dialog does not let you add many rules that you would need. If you look at the some of the default you would see that you could not create them with the menu.

www.marktold.com/screencast/sf_responsive_not_settable.swf

5) Preview in responsive should have more common phones 
    Galaxy S3 is one of the most sold phones
    iPad mini with and without retina

 6) On my site the real actuall smartphones and pads showed the correct transition while the sitefinit preview failed.

 7) There should be an option in Layout not only to specify column is visible for this and that rule but also This layout region does not respond to rules. 

 8) It should be possible to copy rules 

9) activating deactivating should be possible out of the actions menu

 10) I would love a page action addition Edit, Change, VIEW with two entries. Preview (as view next to action) and Preview for Mobile devices)

 11) Next to action there is an Applied to. Have no idea what that should do or show?

 12) It might be helpfull if you could set the order of the rules. I guess sometime they can bit each other if we are not carefull.

13) When you choose the behavior to peon a special page the section is under the Navigation transformation, which was open when I first time used it so I had to look for were to put it..

Also as in other part I would have expected a button right under it to choose the page from not an extra section. But if an extra section at least move it above navigation transformation.

14) It would be super cool if you could add a css simplet which would be injected. Sometimes you might not want a total new css to be loaded but just one minor thing to be changed.

15) Delete inconsistent. In pages, page templates, images, blog post and so on you have the delete button next to the create. You can select multiple items by checking the checkboxes and then hit delete. Not with responsive design. You have checkboxes but must delete from action.

Inconsistent to other parts of SF

16) one of the default tablet rules displays empty when looking a details (at least in my chrome)

www.marktold.com/screencast/sf_responsive_rule_empty.swf

 -----------------

 Since mobile is out of the box now with standard 999 USD worth or add ons I would expect that some of these ideas (if they make sense) would make it to the product. 

Markus

Just got the following feedback from Telerik Support:

QUOTE

I would like to give you some light about the rules, devices and simulator.
Rules like the following one:

screencast.com/.../dtaT1RFr

where you have device-width and device-height and est. are applied only to
devices and are not simulated by the simulator because we could not simulate
the rendering of the device.



The simulator works with rules like the following one:

screencast.com/.../rR6Ty6Pj9qLH

where you have specified min-wight and min-height.

Wight and Height media feature
describe the width and the height of the targeted display area of the output
device.

Device width and
Device height media
feature describe the width of the rendering surface of the output device.

More information could be found in our documentation:

www.sitefinity.com/.../displaying-pages-on-mobile-devices



This is the reason why the menu is not transformed on the simulator and it is
transformed on the device.

 UNQUOTE

So the simulator is kind of usefull if you do simple max-width and so on. Everything fancy it is not able to handle :-(

 So back to your real iPhone, Galaxy and iPad for testing :-)

 Markus

#7) 100% +1 vote...you dont always globablly want a 3 col layout to follow the "rules".  Sometimes you just want the parent and first children to respond.

#14) Terrible idea, it's not serverside rendered...so every single page would get this inline style even if it only applied to 2% of your visitors.  There's already this functionality in the external CSS option so you can put custom css for specific rules in an external file.  This lets the browser download that if it's within that size instead of it just always being there for everyone.

Also yeah, the "simulator" is just a resize, there's no true way to test retina as you would want it.  Seriously dont even bother with the SF simulator anyway, use this:
lab.maltewassermann.com/.../

Hello Markus,

I would like to add to the answers below that the simulator is rendered in iframe and provides the respective screen resolution of the device chosen. It do not simulates the device behaviour.

Regards,
Svetoslav Manchev
Telerik

Dear Svetoslav

 Any feedback on the ideas (besides #14 :-))

Some seem to be bug rather then feature request.

 Markus

17) layout-transformations.css  not minimized?
       I get an /Sitefinity/Public/REsponsiveDesign/layout_transformation.css which seems not to be minified. If so it would be nice if it ware sinze it could save about 40 KB. 

 Markus