Diseño móvil y responsivo

Responsive Mobile Website Templates

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.

For example, menus might be condensed, or relocated off page, and pulled in when needed. Responsive websites tend to be slower to download on mobile devices, as the mobile device needs to download all the styles/themes that are used in the desktop version, even if not used in the mobile version. Some web designers focus on making great looking templates, but they forget about these download speed issues. 

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.

Dedicated Mobile Website Templates

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 for customers using slow rural mobile connections. 

Completely Separate Mobile Websites

Having a whole website crafted just for mobile might give a really good mobile experience at first, but more often than not, the webmaster forgets to maintain it (or cannot maintain it) , and the information become out of sync in each website. If you are running an online shopping site, you really need to have both your mobile experience and your desktop experience powered by the same shopping cart engine. We advise our customers not to use this approach. 

How to Convert Your Existing Website to A Responsive Template

We have lots of different responsive templates that you can choose from. We are updating more all the time. When you change to a responsive template, it will update both your desktop and mobile layouts. 

1. In the CMS, go to the DESIGN tab
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. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
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. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

How to Select A New Dedicated Mobile Template

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

1. In the CMS, go to the DESIGN tab
2. Select MOBILE TEMPLATES
3. click SELECT A NEW MOBILE THEME
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. Untick the boxes for changing banner, logo, background and colours, if you want to keep your existing brand elements the same. 
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. Sometimes you may need to reapply your colour settings for menus etc, as some templates provide the default colours, and others don't, or perhaps your colour combinations are not immediately compatible with the template, and may need some fine adjusting.  

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

If you are technically minded, you might like to just hack your existing template into CSS responsive mode. 

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

#container { width: 750px; margin: 0 auto; }

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

#container { width: 90%; max-width: 960px;  margin: 0 auto; }

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; }