Diseño interactivo
Con un diseño interactivo, las mismas experiencias se pueden mostrar de forma eficaz en varios dispositivos y en varias orientaciones.
TIP- Para los autores de contenido, los detalles de cómo utilizar las características de diseño adaptables en una página de contenido están disponibles en el documento Diseño adaptable.
- Para los administradores del sitio, los detalles sobre cómo configurar el contenedor de diseño para sus sitios se describen en el documento Configuración del contenedor de diseño y el modo de diseño.
Información general
Diseñe sus experiencias para que se adapten a la ventanilla del cliente en la que se muestran. Con un diseño interactivo, las mismas páginas se pueden mostrar de forma eficaz en varios dispositivos en ambas orientaciones. La siguiente imagen muestra algunas formas en que una página puede responder a los cambios en el tamaño de la ventanilla móvil:
- Diseño: utilice diseños de una sola columna para las ventanillas más pequeñas y diseños de varias columnas para las ventanillas más grandes.
- Tamaño de texto: utilice un tamaño de texto más grande (cuando corresponda, como encabezados) en las ventanillas móviles más grandes.
- Contenido: incluya solo el contenido más importante al mostrarlo en dispositivos más pequeños.
- Navegación: se proporcionan herramientas específicas del dispositivo para acceder a otras páginas.
- Imágenes: se muestran las representaciones de imágenes apropiadas para la ventanilla del cliente según las dimensiones de la ventana.
Desarrolle aplicaciones de Adobe Experience Manager AEM () que generen HTML5, que se adapta a múltiples tamaños y orientaciones de ventana. Por ejemplo, los siguientes intervalos de anchuras de ventanilla móvil se corresponden con varios tipos de dispositivos y orientaciones
- Anchura máxima de 480 píxeles (teléfono, vertical)
- Anchura máxima de 767 píxeles (teléfono, horizontal)
- Anchura entre 768 píxeles y 979 píxeles (tableta, vertical)
- Anchura entre 980 píxeles y 1199 píxeles (tableta, horizontal)
- Anchura de 1200 px o superior (escritorio)
Consulte los siguientes temas para obtener información sobre la implementación del comportamiento de diseño interactivo:
A medida que diseñe, use el Emulador de la barra de herramientas para obtener una vista previa de las páginas para diferentes tamaños de pantalla.
Antes de desarrollar
AEM Antes de desarrollar la aplicación que admite sus páginas web, se deben tomar varias decisiones de diseño. Por ejemplo, necesita tener la siguiente información:
- Los dispositivos a los que está dirigiendo
- Tamaños de las ventanillas móviles de destino
- Diseños de página para cada uno de los tamaños de ventanilla móvil de destino
Estructura de aplicación
AEM La estructura típica de la aplicación de la comunidad admite todas las implementaciones de diseño interactivo:
- Los componentes de página residen debajo de
/apps/<application_name>/components - Las plantillas residen debajo de
/apps/<application_name>/templates
Uso de consultas de medios
Las consultas de medios permiten el uso selectivo de estilos CSS para el procesamiento de páginas. AEM Las herramientas y características de desarrollo de la le permiten implementar de forma eficaz y eficiente las consultas de medios en sus aplicaciones.
El grupo W3C proporciona la recomendación Consultas de medios que describe esta característica CSS3 y la sintaxis.
Creación del archivo CSS
En el archivo CSS, defina consultas de medios basadas en las propiedades de los dispositivos a los que está dirigiendo. La siguiente estrategia de implementación es eficaz para administrar estilos para cada consulta de medios:
- Use una carpeta de la biblioteca de cliente para definir el CSS que se ensamblará cuando se represente la página.
- Defina cada consulta de medios y los estilos asociados en archivos CSS independientes. Es útil utilizar nombres de archivo que representen las características del dispositivo de la consulta de medios.
- Defina estilos que sean comunes a todos los dispositivos en un archivo CSS independiente.
- En el archivo css.txt de la carpeta Biblioteca de cliente, ordene los archivos CSS de lista como se requiere en el archivo CSS ensamblado.
El tutorial de WKND utiliza esta estrategia para definir estilos en el diseño del sitio. El archivo CSS utilizado por WKND se encuentra en /apps/wknd/clientlibs/clientlib-grid/less/grid.less.
