| 1. Preferable maximum width of mockups is 940px. Up to a width of 1030px an attempt is made to generate Html with fixed width layout. For mockups exceeding a width of 1030px, a fluid layout will be used. |
Mockup designed in prefered width.  |
Html uses fixed layout of 940px width.  |
Mockup designed in more than prefered width.  |
Html uses fluid layout with 100% width of your screen.  |
| 2. Avoid overlap of any two controls. Any overlaps between controls will make the converted html look different from the mockup. |
Controls overlapping with other controls.  |
Html does not look as expected.  |
Re-ordered the controls so that they do not overlap.  |
On re-ordering the controls, html looks as expected.
 |
| 3. All child controls of a parent control should lie completely within the parent control. |
Controls falling beyond the container control.  |
Controls rendered outside the container in Html.  |
Re-sized the controls width so that they fall in container.  |
Controls rendered inside the container in Html.  |
| 4. No ungrouped control should lie within the range of the grouped control. |
Ungrouped control falling in the grouped controls region.  |
Ungrouped control rendered after the group controls.
 |
Regrouped the controls so that there in no ungrouped control in grouped region.  |
On Regrouping properly, controls rendered as expected in the html.
 |
| 5. Rectangle/Canvas should not be used as background styles. |
Canvas used as background.
( Not Preferred )  |
Background style not set as expected in html.
 |
Canvas used as background. ( Preferred )  |
Controls rendered as expected in the html.
 |