Diseño web responsivo vs. adaptativo | Serie de 5 minutos
Nunca me había encontrado con un sitio móvil diseñado completamente en Adobe Muse, así que me lo tomé como un reto. Mi primer paso fue buscar las dimensiones en píxeles del tamaño del sitio que quería construir: un iPhone en formato vertical. Mientras que la resolución de la pantalla del iPhone es de 320 x 480, decidí construir el sitio a 320 x 356, con el fin de adaptarse mejor a la ventana interior del safari móvil. NOTA ADICIONAL #1: Parece que hay un error en Muse (¿me dan un premio por encontrarlo primero?) Cuando creas un nuevo sitio con las dimensiones 320 x 356, Muse se bloquea si el tamaño de la miniatura en la vista PLAN es mayor que esas dimensiones. Antes de crear ese nuevo sitio, deberá abrir un sitio web de tamaño “normal” y, en la vista de plano, reducir el tamaño de la miniatura a uno muy pequeño. Entonces podrá crear su sitio para móviles sin ningún tipo de colapso.
Si diseñaras tu sitio móvil en el tamaño mostrado arriba y lo publicaras en la web, no se vería del todo bien cuando lo vieras en tu teléfono. El fondo sería ancho, y todavía tendrías que pellizcar para acercar y alejar el contenido para que se ajuste a la pantalla.
Cómo construir un sitio web responsivo con Adobe Muse
Si desea volver a crear el sitio web con capacidad de respuesta, abra la biblioteca de Creative Cloud de diseño web con capacidad de respuesta (Muse). Haga clic en Guardar en Creative Cloud para crear una copia de la biblioteca en su propia cuenta. Si desea consultar los archivos de inicio, abra el enlace Responsive Web Design Starter Files para descargarlos en su ordenador.
Si tiene problemas para acceder a la carpeta de la biblioteca de Creative Cloud, puede descargar los activos en forma de biblioteca de Muse en su ordenador. Haga doble clic en el archivo Responsive Web Design (Muse).mulib para abrirlo automáticamente en Muse. A continuación, acceda a estos archivos desde el panel Biblioteca de Muse (Ventana > Biblioteca) durante el resto del curso.
Cree y estilice el pie de página del sitio web con propiedades responsivas. Añada iconos para las redes sociales y defina los estados de rollover para proporcionar una señal visual cuando los usuarios pasen el ratón por encima de los iconos. Asocie los iconos del pie de página con hipervínculos para abrir otras páginas web de su sitio. Utiliza el widget de menú para definir la navegación de tu sitio. Por último, utilizarás otro widget para añadir un formulario al pie de página.
Creación de un sitio web responsivo en Adobe Muse CC 2017
Para realizar este curso es necesario descargar Adobe Muse, un programa de diseño web creado por Adobe. En marzo de 2018 Adobe anunció el fin del servicio de este programa, cuya funcionalidad será sustituida por otros programas de Creative Cloud. Adobe seguirá ofreciendo soporte técnico a los usuarios de Muse hasta el 26 de marzo de 2020. Actualmente, Adobe Muse se puede descargar de forma gratuita en la web oficial de Adobe.
Con la ayuda de Arturo Servín “Monky”, diseñador gráfico especializado en diseño web y cofundador y director general de La Constelación -estudio dedicado al marketing digital, el comercio electrónico y el diseño web- aprenderás a desarrollar una web con una interfaz totalmente visual y amigable , desde cero y sin tocar una sola línea de código utilizando Adobe Muse.
Seguirás el flujo de trabajo recomendado por Adobe Muse, optimizando tiempos y procesos. A continuación, elaborarás la ficha de Muse, en la que establecerás los parámetros generales que utilizarás en tu proyecto final.
Diseño receptivo de Adobe Muse
Una definición de w3shools.com: El diseño web responsivo hace que su página web se vea bien en todos los dispositivos (ordenadores de sobremesa, tabletas y teléfonos). En palabras sencillas, un sitio web que puede adaptarse a todos los tamaños de pantalla, todos los dispositivos y todos los navegadores.
El diseño web responsivo es muy importante porque hoy en día todo el mundo utiliza teléfonos móviles. Así que casi todos los clientes quieren un sitio web móvil primero. Quieren que su sitio web se pueda ver muy bien en un teléfono móvil. Esa es la razón por la que el diseño web responsivo es tan importante. La mayoría de las empresas de desarrollo web de hoy en día trabajan con bootstrap.
El diseño web responsivo es una gran solución a nuestro problema de multipantalla, pero no hay tamaño de página fijo, no hay milímetros o pulgadas, no hay restricciones físicas es parte difícil en el diseño de un sitio. En el diseño web responsivo, los píxeles y los porcentajes son parámetros importantes a seguir mientras se diseña.
Unidades relativas vs absolutas: El lienzo tal vez sitio web es diferente vienen un escritorio para móviles o cualquier cosa en el medio. La densidad de píxeles también puede variar, por lo que necesitamos unidades que sean flexibles y funcionen en todas partes. Ahí es donde las unidades relativas, como los porcentajes, resultan útiles.