Responsive Design has been a must have since the web was accessible on the go.  Normally Responsive Design calls for many layers of CSS or a premade javascript based framework. In AEM 6.1, Adobe has added a new feature in an effort to reduce design induced headaches. 

Layouting Mode is the proposed feature that allows authors to have control over the responsiveness of components and pages.  There are three pieces play an integral part in providing authors to easily design a responsive page; Layout Container, Layouting Mode, and the emulator.

The Layout Container is a newly added component that can now be added to your pages through Design Mode. Simply put the Layout Container is a paragraph system, which can contain other components. When added to a page, the Layout Container provides a grid which can be used to position, and resize, components added into it.

The Layout Container may also be used as the default container, taking place the place of the default parsys containers.

Layouting mode is used after a Layout Container has been populated with content, and permits resizing and re-ordering of the content inside. Additionally, through the use of layout mode breakpoints can be defined for any number of layouts relative to screen width.

The final element to be utilized by authors is the Emulator.  The emulator toolbar allows the author to choose a device with premade measurements, rotate the device, or select custom widths. Using this tool while authoring a page, the content in the Layout Container can be arranged as desired. The emulator also allows the author to view the content and breakpoints decided earlier are displayed and rendered on the page.

Layout Mode Emulator

These additions in 6.1 will pave the way for easier responsive design from an authors point of view.