ArcGIS Experience Builder le permite configurar y crear distintos diseños de página para sus experiencias web, para que se rindan bien en todos los tamaños de pantalla. La configuración de cada diseño se basa en un diseño adaptable, en el que puede crear diseños únicos para tamaños de pantalla grandes, medianos y pequeños. Cada diseño es una adaptación de la experiencia, que proporciona mayor flexibilidad para una mayor personalización de la aplicación y un mejor uso del tamaño de pantalla y distinto contenido.
Las plantillas se crearon para funcionar con varios tamaños de pantalla. Cuando selecciona una plantilla de aplicación a pantalla completa en blanco o una de página de desplazamiento en blanco, cuentan con el diseño Automático habilitado para dispositivos con pantalla pequeña y mediana. Así se mantienen todos los widgets sincronizados con los widgets del diseño del dispositivo de pantalla grande y también se ordenan automáticamente.
Para crear un diseño por separado para un dispositivo de pantalla pequeña o mediana, haga clic en el botón Personalizar junto al diseño de la página o pantalla. A continuación, puede ordenar y redimensionar manualmente los widgets y las ventanas del dispositivo de pantalla seleccionado.
Cuando edita diseños para dispositivos de pantalla pequeña, los siguientes paneles de configuración grandes que aparecen de otro modo en el lienzo aparecen ahora en los márgenes del builder:
- El panel Estilo rápido en los widgets Botón, Divisor y Navegación por vistas
- El panel Contenido dinámico
- El panel Agregar widget de los widgets Marcador de posición y Cuadrícula
- Los paneles Seleccionar plantilla para páginas, encabezados, pies de página, bloques y cuadrículas
Sugerencia:
Para probar los diseños para distintos dispositivos y tamaños de pantalla, haga clic en Vista en directo en la barra de herramientas del builder. Vista en directo le permite confirmar que el contenido se adapta correctamente antes de guardar y publicar el contenido. También puede experimentar adecuando algunos ajustes y manipulando los widgets interactivos y dinámicos para comprobar cómo van a funcionar.
Lista de pendientes
Para retirar un grupo de widgets o de pantallas del diseño de dispositivo, haga clic en el botón Mover a la lista de pendientes 
en su barra de herramientas. Con ello se elimina el widget del lienzo del dispositivo actual y se guarda su configuración en caso de que necesite agregarlo de nuevo al diseño. Una vez que habilita la opción de diseño personalizado, si se agrega algún otro widget en otros modos de dispositivo, no se agregan al dispositivo actual. Puede agregarlos manualmente desde la lista de pendientes.
Nota:
Los widgets de la lista de pendientes guardan la mayoría de sus ajustes, incluidos todos los ajustes de contenido, sus propios ajustes de estilo, como el fondo y el borde, y todos los ajustes de acción. Los widgets no conservan los ajustes generales de diseño de la pestaña Estilo, como los ajustes de tamaño y posición.
La lista de pendientes aparece en la pestaña Pendiente del panel Insertar widget. Los widgets que están en la aplicación en al menos un modo de dispositivo aparecen en una lista en Otros dispositivos utilizados. Los iconos siguientes indican qué modos de dispositivo tiene cada widget:
: se utiliza en dispositivos de pantalla mediana y grande.
: se utiliza en dispositivos de pantalla grande y pequeña.
: se utiliza en dispositivos de pantalla mediana y pequeña.
: se utiliza en dispositivos de pantalla grande.
: se utiliza en dispositivos de pantalla mediana.
: se utiliza en dispositivos de pantalla pequeña.
Los widgets que actualmente no están en el lienzo en ningún modo de dispositivo aparecen en Todos los dispositivos no utilizados. Haga clic en Eliminar para eliminar estos widgets de la lista de pendientes.
Acciones de mensaje y la lista de pendientes
Los widgets que se pasan a la lista de pendientes no pueden ser objeto de acciones de mensaje.
Al agregar acciones de mensaje en la pestaña Acción de la configuración de un widget, los widgets de la lista de pendientes no aparecen como objetivos disponibles.
Si mueve un widget que ya es el objetivo de una acción de mensaje a la lista de pendientes, esa acción de mensaje se desactiva solo para los modos de dispositivo en los que pasó el widget a la lista de pendientes. En la pestaña Acción de la configuración del widget de origen aparecen iconos que indican el modo de dispositivo en el que está configurada y activa la acción.
En el modo rápido, solo puede ver las acciones de mensaje para la disposición de modo de dispositivo actual que está visualizando.
Sugerencia:
Para obtener más información sobre la configuración de optimización para móviles de Experience Builder, realice el tutorial Optimizar un diseño de aplicación para móviles.
Prácticas recomendadas para crear diseños adaptables
A la hora de crear el diseño de sus experiencias, tenga en cuenta las siguientes prácticas recomendadas:
- Elija un tipo de diseño apropiado.
- Los diseños fijos son adecuados si desea que los elementos permanezcan en su sitio y no fluyan en función del tamaño del contenido. Son apropiados para diseños de cuadros de mando y diálogos modales.
- Los diseños de flujo permiten que el contenido se apile y desplace automáticamente en función del tamaño de la pantalla. Son ideales para contenidos adaptables y desplazables, como páginas largas con mucho texto, imágenes y mapas.
- Los widgets de diseño, incluidos los widgets de fila, columna y cuadrícula, son adecuados para diseños estructurados complejos. Cada uno de estos widgets permite una colocación y alineación flexibles de los widgets en un contenedor.
- Comprenda las opciones para fijar el tamaño y la posición y aplicarlas estratégicamente.
- Los píxeles (px) son mejores cuando se desea un tamaño preciso, como en el caso de encabezados, pies de página y otros elementos que deben mantener el mismo tamaño en distintos tamaños de pantalla. Se trata de una unidad apropiada para elementos en diseños de escritorio y elementos de tamaño fijo.
- Porcentaje (%) es mejor cuando se desea que la altura y la anchura sean relativas a los contenedores padre. El uso de porcentajes da flexibilidad a sus elementos en diferentes tamaños de pantalla. Se trata de una unidad adecuada para tamaños de pantalla adaptables que se escalan en tabletas y teléfonos.
- Automático permite que Experience Builder decida el tamaño y la posición de los widgets en función de su contenido. Es apropiado para texto o imágenes dinámicos en los que la cantidad de espacio necesario para que quepa el contenido puede cambiar. Utilice Automático si espera que el tamaño de un elemento cambie.
- Extender hace que un elemento llene todo su espacio contenedor. Es apropiado para imágenes de fondo, mapas y cualquier otro contenido que deba ocupar todo el espacio disponible. Tenga cuidado al utilizar esta opción con diseños de pantalla pequeña. Extender muchos widgets puede saturar las pantallas pequeñas.
- Empiece con el diseño de pantalla grande y luego trabaje con diseños más pequeños.
- Tras crear un diseño para pantalla grande, utilice la herramienta de modo de dispositivo para verlo en dispositivos de pantalla mediana y pequeña.
- Si es necesario, utilice la opción de diseño Personalizado para cambiar el diseño para dispositivos de pantalla mediana y pequeña.
- Los diseños automáticos sincronizan los elementos en todos los tamaños de pantalla, pero puede que no gestionen bien las disposiciones complejas de widgets.
- Los diseños personalizados permiten reposicionar, ocultar o redimensionar los widgets para que sean más manejables en pantallas más pequeñas.
- Mantenga la coherencia del diseño.
- Utilice un espaciado y una alineación coherentes para crear una experiencia visual cohesiva.
- Aplique estilos de fuente y colores uniformes, y rellene y separe los widgets en todos los diseños.
- Configure los encabezados y pies de página mediante las herramientas Encabezado y Pie de página de los ajustes de página para que se comporten de forma coherente en todas las páginas.
- Obtenga una vista previa y realice una prueba.
- Utilice la herramienta Vista en directo para probar su diseño en el builder.
- Utilice la herramienta Vista previa para obtener una vista previa de su aplicación en una ventana del navegador. Puede cambiar el tamaño de la ventana del navegador para previsualizar la aplicación en distintos tamaños de pantalla.
- En pantallas pequeñas, asegúrese de que los elementos no se desborden ni se superpongan, que los widgets sean utilizables y legibles, y que las regiones desplazables no bloqueen la navegación o los botones críticos.