I am used to designing the layout in Android, using mostly the Relative Layout, which provides all sort of intuitive ways to design. For example:
- Set the width of an element dynamically by simply stating that you want it on the left of this element and on the right of some other element
- Alignment options to place an object wherever you want in the screen below, above, on the left or on the right of another object
- Layout options are strictly separated from the options to change the view in the inside and beautify it they way you want
...and many more
This way of designing a layout by code seems much more natural.
I know that the DOM works very differently and you need to wrap everything and there is no sense of objects that take over some real estate on the screen. Any div can fall on top of any other div without respecting its neighbours.
Are there any tools out there that, probably with the help of some javascript magic, that could setup/create the html layout by a more simple and sane markup?
WYSIWYG tools are not good for the job because I would still need to have this "language" of describing the html layout of the page to be saved on runtime. This is because you would like to ask for an animation, let's say a translation from x=50 to x=70, and you would like to maintain dynamically the rules of this relative layout so the rest of the objects on the page would respond accordingly.
Of course someone could claim that such a tool would be a heavy process in terms of efficiency but let's not take it into consideration for now
in my humble opinion the ultimate goal is to follow the principles of direction manipulation in interaction design which is how anyone would want to interact with a machine to create (at least) 2D graphics. While coding html/css by hand at the year 2015 with all the browser incompatibilities still present for anyone to re-learn seems far from ideal
