Creación de sitios web para dispositivos móviles con Adobe Muse

Puede crear y diseñar sitios web para móviles mediante el diseño web adaptable en Adobe Muse. Con diseño adaptable, puede utilizar un solo archivo Muse para crear sitios web para todos los dispositivos, incluidos los móviles.

Primero debe determinar el ancho del navegador para el cual desea diseñar el sitio. A continuación, puede continuar con el diseño del sitio. Para obtener más información sobre la creación de sitios de dispositivos móviles mediante diseño adaptable, consulte Creación de sitios adaptables.

Si desea crear diseños alternativos para sitios únicamente para móviles, lea el siguiente artículo.

Gracias a Adobe Muse, podrá crear diseños de sitios para que el contenido web se muestre en ordenadores, smartphones y tablets. Con las funciones de diseño para móviles, puede crear diseños alternativos para móviles y tablets, así como para equipos de escritorio.

Adobe Muse incluye opciones de gran utilidad, como la conmutación del 100% de anchura y la funcionalidad Pie de página adhesivo, que permite garantizar que su diseño tenga siempre el aspecto correcto en las diversas pantallas de dispositivos que hay actualmente en el mercado. Con Adobe Muse, podrá utilizar flujos de trabajo conocidos para crear diseños adecuados para todas las dimensiones de pantalla.

Para crear un diseño alternativo para móviles:

Al crear un nuevo proyecto, puede diseñar cualquiera de los diseños antes para, a continuación, crear diseños adicionales, todos dentro del mismo archivo .Muse.  Al publicar o exportar un sitio, Adobe Muse genera automáticamente un archivo denominado sitemap.xml que contiene una lista de todas las páginas, para todos los diseños. El archivo sitemap.xml se carga junto con el resto de elementos del sitio. Este archivo mejora la optimización del motor de búsqueda (SEO) del sitio, puesto que ayuda a los buscadores a generar el índice del sitio para que las páginas se clasifiquen adecuadamente en los resultados de la búsqueda.

Para crear un nuevo diseño para móviles, una de las primeras cosas que tendrá que hacer con el sitio existente es revisar el contenido y determinar los elementos necesarios para la experiencia del usuario con un smartphone. Puesto que los usuarios de smartphone suelen utilizarlo bastante y visualizan el contenido en una pantalla más pequeña, es importante simplificar el diseño y mostrar solo el contenido que sea útil y que facilite la interacción en una pantalla táctil.

Adobe Muse le permite vincular fácilmente páginas externas, archivos descargables, secciones en páginas web, etc., mediante hipervínculos. Configurar una navegación adecuada en el sitio es importante para garantizar que el visitante se puede desplazar por las páginas del sitio web con facilidad. Una navegación del sitio bien diseñada también contribuye a optimizar el sitio web para los motores de búsqueda. Para obtener más información, consulte Creación de hipervínculos.

Las páginas con listas desplegables de hipervínculos o los vínculos de anclaje en las listas desplegables de hipervínculos agregados al mapa. Para buscar los vínculos correctos, comience a escribir el nombre de la página o el anclaje. Solo tiene que escribir las primeras letras y el menú Hipervínculos filtrará los resultados y los mostrará en una lista desplegable. Esto facilita el acceso a los vínculos que desea actualizar rápidamente.

Debe empezar por finalizar la página Inicio.

1. Haga clic en la ficha Interior (Móvil). Copie el grupo de cuatro botones numerados al completo.
2. Utilice la función Ir a página para ir a la página Inicio (Móvil) y pegue el grupo. Los vínculos que agregó en la sección anterior se conservan, por lo que ahora tanto la página Inicio como la página maestra Interior comparten la misma navegación.
3. Utilice la herramienta Selección para colocar el grupo en el centro de la página Inicio, cerca de la parte inferior del pie de página.
4. Haga clic en la ficha memoria virtual (Ordenador) para volver a la página de la memoria virtual. Copie el marco de texto en el apartado de la parte izquierda que dice: Hay más de una forma de resolver un problema.
5. Haga clic en la ficha Inicio (Móvil) y pegue el marco de texto. Utilice la herramienta Selección para colocar el marco de texto y que quede centrado sobre el grupo de botones.

A continuación, debe añadir el contenido de página de la página Sección 01.

1. Haga clic en la ficha memoria virtual (Ordenador) para volver a la página de memoria virtual. Seleccione el rectángulo de fondo redondeado blanco y tres marcos de texto, en el segundo apartado de la izquierda. Los tres marcos de texto incluyen el círculo 01, el texto del marcador de la sección 01 y el botón naranja Móvil. Copie los elementos seleccionados.
2. Pulse Comando+J (Mac) o Control+J (Windows) y escriba las primeras letras de Sección 01. Haga clic en la tecla de flecha hacia abajo para seleccionar la página para móviles Sección 01 y, a continuación, pulse Retorno/Intro para abrirla en la vista Diseño.
3. Pegue los elementos de la página Sección 01 del diseño para móviles. Utilice la herramienta Selección para centrarlos en la página utilizando las guías que aparecen temporalmente.

El propósito de la página Sección 01 es proporcionar una breve introducción a la empresa y facilitar la llamada a los visitantes a través de móviles. Al diseñar sitios web para móviles, puede agregar un nuevo tipo de vínculo que permite al visitante tocar su pantalla y activar el marcador del teléfono para llamar a un número. Se trata de una estupenda función de los sitios para móviles, ya que permite a los clientes potenciales llamar al negocio muy fácilmente.

Para agregar un vínculo en un diseño para móviles a fin de marcar un número de teléfono, siga estos pasos:

1. Utilice la herramienta Selección para seleccionar el botón Móvil.
2. En el campo de menú Vínculos, escriba tel:+34 y, a continuación, un número de teléfono, como en este ejemplo:
   tel:+344155551234

Este es el formato que reconocen los navegadores móviles para los vínculos a números de teléfono.

3. Pulse la tecla Retorno o Intro para guardar el vínculo.

Nota: si prefiere para crear un vínculo de correo electrónico, puede introducir el siguiente formato en el campo de menú Hipervínculo:
mailto:designers@design-is-fun.com

Después de añadir el vínculo al botón Móvil, el diseño de la página Sección 01 se ha completado.

1. Haga clic en la ficha memoria virtual (Ordenador) para volver a la página de memoria virtual. Seleccione el rectángulo de fondo redondeado blanco, el círculo verde 02, el marco de texto Sección 02, el mapa incrustado y el botón verde Mapa. Copie los elementos seleccionados.
2. Pulse Comando+J (Mac) o Control+J (Windows) y escriba las primeras letras de Sección 02. Haga clic en la tecla de flecha hacia abajo para seleccionar la página para móviles Sección 02 y, a continuación, pulse Retorno/Intro para abrirla en la vista Diseño.
3. Pegue los elementos que ha copiado en el paso 1 de la página Sección 02 del diseño para móviles. Utilice la herramienta Selección para centrarlos en la página utilizando las guías de alineación.

La página Sección 02 contiene incrustado código HTML generado en el sitio web Google Maps para crear un mapa interactivo.

Si ha seguido el tutorial titulado Introducción a Muse, recordará que copió el código fuente del mapa de Google del sitio web de Google y utilizó la función de HTML incrustado de Muse para pegarlo en la página.

Afortunadamente, el código del mapa de Google ya incluye la compatibilidad con gestos dactilares en pantallas táctiles, para que los visitantes con estos dispositivos puedan interactuar con el mapa fácilmente. Para este proyecto de ejemplo, las dimensiones del mapa ya se han cambiado.

Sin embargo, si necesita cambiar las dimensiones del contenido de HTML incrustado en sus proyectos, puede hacer clic con el botón derecho en el contenido y elegir HTML para ver el código en la ventana HTML. Puede editar los valores de altura y anchura del código para cambiar el tamaño del mapa, a fin de adaptarlo a una pantalla más pequeña.

Si abrió la ventana Editar HTML, haga clic en OK para cerrarla sin realizar cambios.

4. Seleccione el botón Mapa.

Esta vez, debe añadir un vínculo a un sitio web externo (Google Maps) para facilitar a los visitantes móviles visitar la versión completa del mapa en una nueva ventana del navegador.

5. Copie el siguiente vínculo y péguelo en el campo del menú Vínculos:

https://maps.google.com/maps?q=adobe+systems,+san+francisco&hl=en&sll=37.269174,-119.306607&sspn=17.492546,19.160156&hq=adobe+systems,&hnear=San+Francisco,+California&t=m&z=14

6. Haga clic en la palabra Vínculos a la izquierda del menú Vínculos. En el cuadro de diálogo que aparece, seleccione la casilla de verificación: Abrir enlace en una nueva ventana o ficha. Además, en el campo Sugerencia, introduzca el siguiente texto: Mapa a Adobe Fremont.

7. Haga clic fuera del cuadro de diálogo Vínculos para cerrarlo.

A continuación, debe añadir el contenido de página de la página Sección 03.

1. Haga clic en la ficha Memoria virtual (Ordenador) para volver a la página de memoria virtual. Seleccione el rectángulo de fondo redondeado blanco, el círculo púrpura 03, el marco de texto Sección 03, el formulario de contacto y el botón enviar. Copie los elementos seleccionados.
2. Pulse Comando+J (Mac) o Control+J (Windows) y escriba las primeras letras de Sección 03. Haga clic en la tecla de flecha hacia abajo para seleccionar la página para móviles Sección 03 y, a continuación, pulse Retorno/Intro para abrirla en la vista Diseño.
3. Pegue los elementos que ha copiado en el paso 1 en la página Sección 03 del diseño para móviles. Utilice la herramienta Selección para centrarla en la página utilizando las guías de alineación. Los estilos aplicados en el widget para ordenadores Formulario de contacto se mantienen cuando se copian en el diseño para móviles. El único cambio introducido para preparar el formulario para un diseño de dispositivos móviles implica el redimensionar el formulario y los elementos de formulario para que se ajusten a una pantalla más pequeña.

La página Sección 03 contiene un widget Formulario de contacto que utiliza la base de datos y los scripts de parte del servidor de Business Catalyst para procesar los datos del formulario. Cuando haga clic en Publicar y cargue los archivos del sitio de Muse, la funcionalidad del formulario se activa automáticamente.

Nota: aunque es posible utilizar otros proveedores de servicios para alojar su sitio web de Muse terminado, tenga en cuenta que tendrá que realizar alguna codificación adicional para que los formularios funcionen si no se alojan en los servidores de Business Catalyst.

En este proyecto de ejemplo, el formulario de contacto no tiene activada la opción de CAPTCHA. El CAPTCHA es un ajuste del menú Opciones de los widgets de Formulario de contacto que puede agregarse cuando quiera confirmar que el formulario lo ha enviado una persona y no una secuencia de comandos ni se haya enviado forma automatizada (spam). La interfaz del CAPTCHA muestra una imagen con una serie de caracteres que el visitante tiene que escribir correctamente para enviar su mensaje a través del formulario. Aunque los envíos no deseados del formulario pueden ser una molestia, también es importante tener en cuenta la usabilidad del sitio en un teléfono móvil. Si el formulario es demasiado complicado de rellenar, los visitantes pueden decidir no enviar su mensaje.

La página Sección 03 ya está completa. No es necesario agregar un vínculo al botón Enviar porque el botón ya está configurado como parte del widget Formulario de contacto.

La página final del diseño para móviles, la Sección 04, contiene un widget de proyección de diapositivas. Los widgets de Muse se han diseñado y probado para que funcionen en todos los navegadores modernos de ordenadores y móviles, por lo que no es necesario cambiar nada para hacer que la proyección de diapositivas funcione en una pantalla táctil.

Siga estos pasos para copiar el contenido de la página de memoria virtual del diseño de ordenadores a la página Sección 04 del diseño para móviles:

1. Haga clic en la ficha Memoria virtual (Ordenador) para volver a la página de memoria virtual. Seleccione el rectángulo de fondo redondeado blanco, el círculo rojo 04, el widget Proyección de diapositivas y el marco de texto Sección 04. Puede utilizar la herramienta Selección para hacer clic y arrastrar el cursor para seleccionar todos los elementos a la vez. Copie los elementos seleccionados.
2. Pulse Comando+J (Mac) o Control+J (Windows) y escriba las primeras letras de Sección 04. Haga clic en la tecla de flecha hacia abajo para seleccionar la página para móviles Sección 04 y, a continuación, pulse Retorno/Intro para abrirla en la vista Diseño.
3. Pegue los elementos que ha copiado en el paso 1 en la página Sección 03 del diseño para móviles. Utilice la herramienta Selección para centrarla en la página utilizando las guías de alineación. Los estilos aplicados en el widget Formulario de contacto para ordenadores se mantienen cuando se copian al diseño para móviles. El único cambio introducido para preparar el formulario para un diseño de dispositivos móviles implica que se redimensione el formulario y los elementos de formulario para que se ajusten a una pantalla más pequeña. Cuando añada widgets con funciones interactivas (como los de Proyección de diapositivas) para los diseños para móviles que cree en Muse, verá que el panel de opciones incluye la opción: Activar Barrido. Esta opción está activada de forma predeterminada, por lo que cualquier widget que añada a sus diseños para móviles se configurará automáticamente para permitir a los visitantes tocar y utilizar gestos dactilares en las pantallas táctiles. La página Sección 04 contiene un widget de proyección de diapositivas que muestra la imagen correspondiente cuando se toca una miniatura. La proyección de diapositivas está configurada para utilizar una transición horizontal al cambiar las imágenes de la galería. Este ejemplo requiere interacción con el usuario para visualizar las fotografías aunque, si lo desea, puede establecer el widget de proyección de diapositivas para que se reproduzca automáticamente, lo que hará que aparezca entre las imágenes cuando se cargue la página.

Nota: si configura el widget de la proyección de diapositivas para utilizar las transiciones Suavizar, Horizontal o Vertical, el código de Muse activa automáticamente el gesto de barrido con el dedo para permitir a los visitantes realizar dicho gesto en su pantalla táctil para pasar las imágenes de la proyección de diapositivas.

En la sección siguiente, Creación de diseños para móviles en Muse, aprenderá a actualizar con facilidad los recursos en todas las plataformas móviles y a publicar el sitio de Muse para cada diseño para dispositivos móviles.

En comparación con los ordenadores, los smartphones y tablets tienen un procesador mucho más limitado, velocidades de conexión más lentas y menor capacidad de almacenamiento. Como resultado, se necesita una consideración especial a la hora de diseñar y mostrar los diseños de sitio en dispositivos móviles.

Muse incluye funciones que pueden ayudarle a optimizar los gráficos de los diseños para móviles a fin de asegurarse de que el sitio se carga de manera rápida y funciona de manera aceptable.

1. Pulse la tecla Comando/Control+7 para mostrar el diseño para ordenadores y, a continuación, haga doble clic en la página maestra A del archivo para ordenadores a fin de abrirlo en la vista Diseño.
2. Abra el panel Activos haciendo clic en su ficha del conjunto de paneles para que se active. O bien, si está cerrado, elija Ventana > Activos.
3. Seleccione la imagen de fondo de gran tamaño de las montañas. El recurso se resalta en el panel Activos.
4. Haga clic en el nombre del activo, background.jpg, para desplegar la lista de instancias usadas en el sitio. Tenga en cuenta que el archivo de imagen de fondo se muestra tres veces, con dos iconos distintos, lo que indica que se utiliza en diseños tanto para móviles como para ordenadores.

En este sitio pequeño de ejemplo, la lista de activos es bastante manejable, pero cuando se crean sitios más grandes, la lista de activos puede ser mayor y examinarla puede resultar más complicado.

Para que sea más fácil navegar por la lista de activos, puede seleccionar el primer elemento de cada activo y hacer clic en la flecha situada a la izquierda para contraer el conjunto. Vuelva a hacer clic en ella cuando desee desplegar la lista completa de las instancias en las que se utiliza el activo en el proyecto del sitio.

Si desea localizar los activos utilizados por un diseño específico, haga clic en la parte superior de la columna a la derecha del panel Activos que muestra el los iconos Ordenador, Tablet o Móvil. Esto hace que la lista de activos se ordene por diseño y se muestre en un conjunto consolidado.

Si desea realizar un cambio en un gráfico que actualice todas sus instancias (en todos los diseños) puede hacer clic con el botón derecho del ratón en el nombre del activo y seleccionar Editar original en el menú que aparece.

El archivo original seleccionado se abre en Photoshop, Fireworks o el programa de edición de imágenes que haya utilizado para crearlo, de forma que pueda efectuar cambios rápidamente.

Al guardar el archivo original revisado y volver a Muse, el elemento del panel Activos mostrará el icono Desincronizado para indicar que la versión del gráfico del sitio ya no coincide con el archivo de origen. Haga clic con el botón derecho en el archivo y seleccione Actualizar para actualizar todas las iteraciones del gráfico para utilizar la nueva versión.

Existen varias opciones que puede utilizar para obtener la previsualización del diseño del sitio que ha creado:

En la vista Diseño del diseño para ordenadores, haga clic en Previsualizar para ver el emulador de interpretación basado en Webkit incorporado del código HTML, CSS y JavaScript. La previsualización le permite ver el aspecto de los diseños en el navegador antes de publicar un sitio y comprobarlo en línea con un dispositivo.

Cuando se encuentre en la vista de Diseño de la vista Móvil, haga clic en Previsualizar para ver el diseño para móviles. Utilice el menú Tamaño de previsualización para seleccionar entre iPhone 4, iPhone 5, Samsung Galaxy S III y Nokia Lumia 920 para ver el diseño en diferentes tamaños de pantalla.

Haga clic en el icono situado a la derecha de la ventana Tamaño de previsualización para cambiar de ver el diseño en modo vertical u horizontal.

La función Tamaño de previsualización incluye proporciones de altura y anchura predefinidas que cubren los tamaños de pantalla más comunes de los móviles.

Algunas pantallas de smartphones son más amplias, como la del Motorola Droid. Si un visitante tiene una pantalla amplia, la función Puerto de visualización de Muse escala automáticamente el diseño para móviles a fin de que se ajuste a la pantalla disponible.

Mientras esté en el modo de previsualización, puede hacer clic en los vínculos y navegar por el sitio. Puede desplazarse, lo que simula un barrido realizado con los dedos, aunque para probarlo correctamente, debe hacerlo en el dispositivo.

Si hace clic en el botón "i" junto al menú Tamaño de previsualización del modo Previsualización, verá una nota con un vínculo que describe una herramienta de Adobe denominada Edge Inspect. Edge Inspect permite utilizar una extensión del navegador Chrome para conectar dispositivos móviles a su equipo y sincronizarlo con el contenido que se visualiza en el explorador Chrome del ordenador.

Con Edge Inspect, puede usar Chrome y la opción Previsualización en el navegador de Adobe Muse para ver un sitio en el ordenador, la misma página también se muestra automáticamente en los dispositivos conectados. (Asegúrese de establecer Chrome como navegador predeterminado).

Si lo desea, también puede adquirir una herramienta de terceros denominada Reflection, que le permite ver una emulación del dispositivo (conectado con la misma conexión de red) que aparece en la pantalla del ordenador. Al utilizar el smartphone o tablet para navegar por un sitio, el emulador refleja la pantalla táctil del dispositivo.

Pies de página adhesivos

Al igual que en las versiones anteriores de Muse, puede arrastrar las guías para definir el área que se encuentra bajo la página y definir la zona del pie de página. También puede definir cualquier elemento de contenido como un elemento de pie de página, lo que hace que se muestre debajo de la altura de página mínima establecida en las Propiedades del sitio o debajo del contenido de la página existente (lo que sea más largo).

Definir el contenido del pie de página es muy útil cuando un sitio tiene páginas de longitudes distintas, ya que la colocación del pie de página se ajusta verticalmente para que se muestre de modo más uniforme en la parte inferior de las páginas sin superponerse al contenido de la página.

La opción Pie de página adhesivo está activada de forma predeterminada. Esta función está diseñada especialmente para los visitantes con monitores de ordenadores grandes. En la mayoría de los casos es conveniente mantener activada la opción Pie de página adhesivo para los sitios web. Esta opción permite que el pie de página permanezca siempre en la ubicación deseada, incluso cuando la ventana del navegador es significativamente más grande que el diseño de la página web, tal y como ocurre en los monitores Cinema Display de Apple.

Para ver su funcionamiento, el sitio de Muse se puede previsualizar en un navegador y reducir la página. Tenga en cuenta que si el contenido de página es demasiado pequeño con respecto a la ventana del navegador, el área situada debajo del pie de página muestra la ventana del navegador en lugar de mantener el pie de página alineado en la parte inferior.

Al crear nuevos sitios en Muse verá que la opción Pie de página adhesivo aparece activada en el cuadro de diálogo Nuevo sitio.

Por lo general, es preferible utilizar esta función al diseñar sitios. Sin embargo, si observa que la longitud de las páginas se muestra con una longitud mucho mayor de la deseada (porque un sitio tiene un contenido de página menor y las páginas son bastante cortas), siempre se puede desactivar la casilla en el cuadro de diálogo Propiedades de la página.

Elementos fijos

El código generado por Muse se prueba para garantizar que se muestra y se comporta como se espera en todos los navegadores y plataformas web modernos.

Uno de los estándares web que difiere entre exploradores de ordenadores y móviles es la compatibilidad para los elementos fijos de la página. Al diseñar sitios para navegadores de ordenadores, puede seleccionar un elemento y utilizar la opción del panel de control para fijarlo a la ventana del navegador. La fijación de elementos es útil para crear una navegación coherente. También resulta útil en los casos en los que se desea conservar un elemento en la misma región de una página más larga, independientemente de la distancia a la que el visitante se desplace hacia abajo en la página.

Cuando se escribió este documento, los navegadores móviles no contaban con la misma compatibilidad ante objetos fijos. Como resultado, es necesario establecer estrategias alternativas para los objetos fijos al realizar diseños para móviles y tablets.

Al realizar diseños para móviles o tablets, verá que las opciones de fijación se muestran atenuadas e inactivas.

Puede publicar sitios web con varios diseños en Muse mediante el mismo método que se utiliza normalmente para publicar sitios con diseños para ordenadores. Resulta muy útil publicar sitios web de prueba y utilizar los dispositivos móviles para ver la versión en directo y probar los diseños en las pantallas más pequeñas.

Haga clic en Publicar o seleccione Archivo > Cargar en servidor FTP para cargar los archivos del sitio en el servidor de alojamiento.

Al publicar un sitio de Muse con varios diseños, se activa con una única URL. Por ello solo tiene que registrar un nombre de dominio, tal y como se muestra a continuación:

http://www.mi-sitio.com

Al publicar un sitio con dos o tres diseños distintos, Muse genera el código del sitio que incluye la detección de scripts que identifican el tipo de equipo o dispositivo y el tipo de navegador que está utilizando el visitante para acceder a la página.

El código de detección determina la plataforma y versión del explorador y, después, muestra automáticamente el diseño correcto. No tiene que hacer nada para garantizar que los visitantes con tablet vean el diseño para tablets y para que aquellos con smartphones vean el diseño correspondiente. Todo se realiza en segundo plano.

Las nuevas funciones de los diseños para móviles de Muse le permiten optimizar sus diseños para que los usuarios de dispositivos móviles no descarguen los archivos más grandes innecesariamente. La funcionalidad de diseño alternativo solo presenta los archivos de imagen redimensionados más pequeños, de modo que el sitio funcione correctamente en todas las plataformas y navegadores.

Para obtener más información sobre cómo trabajar con Muse, consulte los artículos y tutoriales de la página de ayuda de Adobe Muse.

Haga clic en la ficha de página maestra (Ordenador) para que se active la página maestra para ordenadores en la vista Diseño.

Muse facilita el cambio entre diseños con la herramienta de navegación Ir a página. Este botón aparece en la vista Diseño de cualquier proyecto que cuente con varios diseños.

1. Haga clic en el botón Ir a página.

Al trabajar con varios diseños, resulta de gran utilidad poder saltar adelante y atrás rápidamente entre dos o más páginas, de forma que se pueda copiar y pegar el contenido fácilmente.

Nota: además de hacer clic sobre el botón Ir a página, también se puede utilizar el método abreviado de teclado Comando+J (Mac) o Control+J (Windows).

Aparece el cuadro de diálogo Ir a página. Contiene un campo de texto que puede utilizar para escribir las primeras letras del nombre una página del sitio, así podrá pasar fácilmente a dicha página sin tener que volver a la vista Plan continuamente.

2. Introduzca las tres primeras letras del nombre de la página que desee buscar. Para este ejemplo, escriba las tres primeras letras de la palabra (página) maestra: mae.

El campo explora el sitio en busca de los nombres de páginas que coincidan y los muestra en la lista que figura a continuación.

3. Pulse la flecha hacia abajo dos veces para seleccionar la A-Página maestra (móvil) y, a continuación, pulse Retorno/Intro para abrirla.

Se abre la página maestra (móvil) en la vista Diseño, lista para su edición.

Otra buena manera de desplazarse entre los diferentes diseños de un sitio es utilizar los nuevos métodos abreviados de teclado:

• Comando/Control+7 muestra el diseño para ordenadores.
• Comando/Control+8 muestra el diseño para tablets.
• Comando/Control+9 muestra el diseño para móviles.

Estos métodos abreviados solo se activan al editar un con el diseño correspondiente. Experimente con estos nuevos métodos abreviados para desarrollar el flujo de trabajo que prefiera al cambiar entre diseños y páginas específicas.

A continuación, debe crear una segunda página maestra para móviles y agregar los elementos de diseño.