I’ve got one project that must be deployed in two different size & shape layouts, online running in a 760 x 700 box (almost square) and also on a wide screen kiosk running 1120 x 700 (wide rectangular). Maintaining two separate layouts has been time consuming and thus costly.
The compromise solution is to design a 1120 x 700 layout with the core functional elements placed on the right side of the stage, branding, supporting data, and eye candy filling the left. The idea is to crop the stage in the online version showing only the right most 760 x 700 content (all the core elements) while showing the complete stage for the kiosk. Branding for the online version is provided by the html container. I know how to use masks and edit the html to show only the left side of the stage but I’m not sure how to show only the right side of the stage since moving the mask does not change the (0,0) point of the stage.