Responding to feedback - Auto Position feature has been added to the designer

  • Article

After hearing a lot of support for the idea of automatically positioning controls, I got the go ahead to implement the feature. The fact that we are able to respond to what customers ask for is very encouraging - I hope that this and other examples (such as Mikhail's) will help to create a positive feedback loop where we implement more suggestions, so people are more likely to communicate with us, and therefore we get more data, which allows us to even better implement suggestions, and so on.

Here are some screenshots of the feature - one shot shows the new menu item that allows you to quickly go to the options page where autoposition settings are made. The other shots show you what this new options page looks like.

I hope that this provides good discoverability for users - anybody who positions something the first time will notice that there are options, and if they decide that they want everything positioned from now on they can choose to do so.

What we tried to do with the feature was give back automatic positioning in a similar way to what we had in previous product versions, but to do it in a way that did not go against how CSS works. This feature does not rely on any custom attributes, and it is turned off by default. So if this feature sounds like something that you hate, don't worry, because if you never click the switch in the options then you will never be affected by it. Even if you turn it on it will not generate anything that will not validate (it only uses CSS attributes).

The way that this automatic positioning works is by looking at whatever is pasted/dropped onto the design surface, and automatically doing one of the following (depending on your settings):

  • Nothing (if you turn the feature off)
  • Making it absolutely positioned
  • Making it relatively positioned
  • Making it statically positioned
  • Removing all positioning

The setting only affects new stuff that is added to the page (it does not change anything that you already added to the page).

We also added some snapping functionality back. There is still no grid (because CSS has multiple coordinate systems, a grid that did the right thing would have been too costly for us at this stage), but turning on the snapping allows you to still have behavior similar to previous versions where the size/position changes in jumps of 8 pixels (or whatever you set it to). Again, because of time constraints this will only work on elements that have sizes in pixels.

So let me know what you think!