Skip navigation

Responsive Layouting is a mechanism for realizing responsive web design. This allows the user to create web pages that have a layout and dimensions dependent on the devices their users use.

Note

This can be compared with the Mobile Web mechanisms, which use adaptive web design (primarily for the classic UI).

AEM realizes responsive layouting for your pages using a combination of mechanisms:

  • Layout Container component
    This component provides a grid-paragraph system to allow you to add and position components within a responsive grid. It can be used as the default parsys for your page and/or made available to authors in the component browser.

    • The default Layout Container component is defined under:
      /libs/wcm/foundation/components/responsivegrid
    • You can define layout containers:
      • As a component that the user can add to a page.
      • As the default parsys for the page.
      • Both.
        You can have the layout container as standard for the page, while allowing the user to add further layout containers within this; for example, to achieve column control.
  • Layouting Mode
    Once the layout container is positioned on your page you can use the Layouting mode to position content within the responsive grid.
  • Emulator
    This allows you to create and edit responsive websites that rearrange the layout according to device/window size by resizing components interactively. The user can then see how the content will be rendered using the Emulator.

https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/configuring-responsive-layouting.html

AEM Responsive Grid

http://www.slideshare.net/GabrielWalt/aem-responsive

Whats New in 6.1: Layouting Mode

http://labs.6dglobal.com/blog/2015-05-28/new-aem-61-layout-mode/

Change Viewpoer with Javascript

https://kaspars.net/blog/web-development/change-viewport-meta-window-size

Viewport Resizer

http://lab.maltewassermann.com/viewport-resizer/

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: