Diseño móvil y responsivo

Plantillas de sitios web móviles adaptables

Las plantillas responsivas son un enfoque popular en la industria del diseño web, ya que no todos los CMS ofrecen una opción específica para móviles. El diseño responsivo implica que la plantilla ha sido diseñada específicamente para adaptarse a diferentes anchos de navegador. Editar plantillas responsivas puede resultar difícil para los usuarios, ya que cada elemento requiere un diseño específico.

Por ejemplo, los menús podrían condensarse o reubicarse fuera de la página y desplegarse cuando sea necesario. Los sitios web adaptables suelen ser más lentos de descargar en dispositivos móviles, ya que estos necesitan descargar todos los estilos/temas utilizados en la versión de escritorio, incluso si no se utilizan en la versión móvil. Algunos diseñadores web se centran en crear plantillas atractivas, pero olvidan estos problemas de velocidad de descarga.

Si su sitio web está orientado al turismo, es posible que sus clientes se encuentren fuera de la cobertura móvil y tengan dificultades para descargar todas las bibliotecas de JavaScript y CSS adicionales que no son necesarias para la experiencia móvil. Las plantillas responsivas suelen tardar en descargarse, pero nos hemos esforzado para que nuestras nuevas plantillas responsivas sean lo más rápidas posible, y se renderizan aproximadamente tres veces más rápido que un tema promedio de WordPress. Nuestros sitios web responsivos se pueden personalizar con diferentes colores, fuentes e imágenes.

Plantillas de sitios web móviles dedicadas

Una plantilla web móvil dedicada es la forma tradicional en que hemos proporcionado retrocompatibilidad a todos nuestros sitios web de escritorio para ofrecer a sus clientes una experiencia móvil. La plantilla móvil utiliza el mismo mapa de navegación y el mismo contenido que su sitio web de escritorio. Sin embargo, eliminamos todo el desorden innecesario para garantizar que sus clientes puedan acceder rápidamente a la información que buscan. Por ejemplo, navegar a sus datos de contacto, ver un enlace a un mapa o ver sus productos y realizar una compra fácilmente en sus pantallas pequeñas. Con el tiempo, hemos añadido banners, logotipos y hemos adaptado automáticamente los colores a su plantilla de escritorio. Al ajustar el diseño de su plantilla móvil dedicada, sus clientes tendrán una experiencia increíble, ya que este método es el... opción más rápida para clientes que utilizan conexiones móviles rurales lentas.

Sitios web móviles completamente separados

Tener un sitio web completo diseñado exclusivamente para móviles puede ofrecer una excelente experiencia al principio, pero con frecuencia el webmaster se olvida de mantenerlo (o no puede hacerlo), y la información se desincroniza en cada sitio web. Si gestiona un sitio de compras en línea, es fundamental que tanto la experiencia móvil como la de escritorio se basen en el mismo motor de carrito de compras. Recomendamos a nuestros clientes no usar este enfoque.

Cómo convertir su sitio web existente en una plantilla adaptable

Tenemos muchas plantillas adaptables para que elijas. Actualizamos constantemente. Al cambiar a una plantilla adaptable, se actualizarán tanto tu diseño de escritorio como el de móvil.

1. En el CMS, vaya a la pestaña DISEÑO
2. Seleccione CAMBIAR TEMA
3. Revisa todos los temas y presta atención al botón RESPONSIVO o MÓVIL. Este botón te permite previsualizar el tema en ambos modos. Solo los temas con el botón RESPONSIVO son plantillas responsivas.
4. SELECCIONE un tema para continuar.
5. Desmarque las casillas para cambiar el banner, el logotipo, el fondo y los colores, si desea mantener los elementos de su marca existente iguales.
6. Marque la casilla para realizar una copia de seguridad de su antigua configuración de diseño, en caso de que algo salga mal.
7. Guardar el cambio de tema.
8. A veces, al previsualizar tu sitio web después de cambiar el tema, puede que no se vea bien debido a la configuración de caché del navegador. Quizás tengas que publicar y borrar la caché del navegador para que tu sitio web se vea correctamente.
9. A veces puede ser necesario volver a aplicar la configuración de color para los menús, etc., ya que algunas plantillas proporcionan los colores predeterminados y otras no, o quizás sus combinaciones de colores no sean inmediatamente compatibles con la plantilla y puedan necesitar algún ajuste fino.

Cómo seleccionar una nueva plantilla móvil dedicada

Tenemos 8 plantillas móviles diferentes, pero cada una utilizará los colores y la fuente del tema de su escritorio.

1. En el CMS, vaya a la pestaña DISEÑO
2. Seleccione PLANTILLAS MÓVILES
3. Haga clic en SELECCIONAR UN NUEVO TEMA MÓVIL
4. Revisa todos los temas y presta atención al botón RESPONSIVO o MÓVIL. Este botón te permite previsualizar el tema en ambos modos. Solo los temas con el botón RESPONSIVO son plantillas responsivas.
5. SELECCIONE un tema para continuar.
6. Desmarque las casillas para cambiar el banner, el logotipo, el fondo y los colores, si desea mantener los elementos de su marca existente iguales.
7. Marque la casilla para realizar una copia de seguridad de su antigua configuración de diseño, en caso de que algo salga mal.
8. Guardar el cambio de tema.
9. A veces, al previsualizar tu sitio web después de cambiar el tema, puede que no se vea bien debido a la configuración de caché del navegador. Quizás tengas que publicar y borrar la caché del navegador para que tu sitio web se vea correctamente.
10. A veces puede ser necesario volver a aplicar la configuración de color para los menús, etc., ya que algunas plantillas proporcionan los colores predeterminados y otras no, o quizás sus combinaciones de colores no sean inmediatamente compatibles con la plantilla y puedan necesitar algún ajuste fino.

Cómo ajustar su CSS para que sea adaptable a dispositivos móviles

Si tienes conocimientos técnicos, es posible que quieras modificar tu plantilla existente para que tenga un modo responsivo CSS.

Busque líneas en su hoja de estilos con las dimensiones más grandes de 600 px, 750 px o 900 px:

#contenedor { ancho: 750px; margen: 0 automático; }

Y cambiarlos para que queden así, donde ocupe el 90% del ancho de la pantalla hasta un máximo de 960.

#container { ancho: 90%; ancho máximo: 960px; margen: 0 automático; }

Luego, busque las columnas y cambie su ancho o márgenes de anchos fijos a anchos porcentuales, pero aplique estos anchos solo cuando el ancho de la pantalla lo permita. Cuando el ancho de la pantalla sea inferior a 600 px, las columnas se apilarán a lo largo del ancho del navegador.

@media (ancho mínimo: 600px) { .leftColumn { ancho: 20%; flotante: izquierda; }