Tener una versión móvil de su sitio web es una necesidad hoy en día y la única forma segura de hacer que su proyecto web sea accesible desde dispositivos móviles. Por lo tanto, si está en lo correcto a punto de lanzar un sitio web, está obligado a tener en cuenta este problema para que sea un éxito. ¿Ya tienes un sitio web y deseas actualizarlo para que sea compatible con dispositivos móviles? La información proporcionada a continuación también le será útil.
Hay varias maneras de iniciar un sitio web móvil hoy mismo. La elección de la solución más adecuada depende de varios factores, como el tipo de sitio web, la edad y las características, sus propios objetivos de diseño web, habilidades y requisitos. Las soluciones más extendidas son las siguientes:
- Creación de diseño adaptable, cuando un usuario visita el mismo sitio web (que se muestra de manera diferente con respecto a las reglas especiales relacionadas con CSS) desde dispositivos de escritorio y móviles;
- Versión de sitio web móvil separada basada en el enfoque solo para dispositivos móviles, cuando tiene dos interfaces que funcionan de manera consistente e incluso se pueden alojar en diferentes dominios/subdominios;
- Aplicación móvil completa, que puede ser un producto independiente con una arquitectura prediseñada desarrollada para una plataforma determinada o una herramienta de vista previa separada (como un navegador web) que solo se aplica a un sitio web.
Cualquiera de estas opciones funciona muy bien para la creación de sitios web móviles. Depende del propietario solo elegir la solución más adecuada. Echemos un vistazo a las formas más extendidas (y más convenientes) de desarrollo de proyectos móviles ahora.
Cómo crear una versión móvil de un sitio web (Creador de sitios web)
Si aún no tienes un sitio web, tiene sentido elegir un servicio que incluya soporte de diseño adaptable y/o tenga un editor móvil integrado independiente. Un creador de sitios web funcionará mejor para este propósito, ya que estas plataformas se crean principalmente para el desarrollo de sitios web amigables para dispositivos móviles y, por lo tanto, inicialmente hacen que todos sus bloques, widgets y elementos de interfaz sean responsivos de forma predeterminada. Como resultado, los proyectos creados con ellos se muestran muy bien en pantallas de escritorio y móviles sin la necesidad de crear una versión móvil separada. Revisemos esta opción a través del uso de Wix website builder.
Wix es el creador de sitios web SaaS todo en uno popular en el mundo que permite iniciar / administrar cualquier tipo de proyecto web, ya sea un blog, una cartera, una página de destino, un sitio web empresarial o incluso una tienda web. Todas las plantillas disponibles en su extensa galería (ya hay más de 550 aquí), así como las páginas web que los usuarios crean desde cero, se adaptan automáticamente a la navegación móvil.
Es posible configurar por separado una versión de sitio web para escritorio y móvil aquí, pero todavía no hay opción de vista previa de tableta. Lo que puede hacer aquí es ocultar los bloques y elementos de interfaz seleccionados y modificar/configurar fondos únicos aquí. Además, Wix tiene funciones específicas relacionadas con dispositivos móviles, como:
- Visualización del panel de inicio rápido (puede agregar un botón de llamada telefónica, enlaces a redes sociales / mensajeros, etc. aquí);
- El botón «Subir»;
- Pantalla de bienvenida (una especie de pantalla de carga animada que permite mostrar saludos emocionales o introducir una marca / marca comercial antes de acceder a un sitio web);
- Combinación de colores personalizada para el panel del navegador Chrome;
- El servicio de optimización automatizada de contenido y diseño de páginas web para dispositivos móviles (esta es una opción bastante conveniente para páginas web creadas por diseñadores inexpertos).
Wix también tiene una aplicación móvil que le permite administrar un sitio web, si obtiene una suscripción que incluye acceso a herramientas profesionales de negocios.
Cómo hacer una versión móvil de un sitio Web CMS (WordPress)
Al igual que cualquier otro CMS, WordPress no presta atención a un dispositivo utilizado para llegar a un sitio web. La plataforma solo proporciona la variante de diseño especificada en la configuración predeterminada.
Todavía tiene sentido destacar los servicios de los desarrolladores web aquí, ya que WordPress es uno de esos CMS, cuyo diseño del panel administrativo se puede adaptar a dispositivos móviles (esto significa que un sitio web será conveniente no solo para los visitantes, sino también para su propietario, que podrá editarlo, configurarlo y llenarlo con contenido desde un dispositivo móvil). Además, hay aplicaciones para teléfonos inteligentes que son aplicables no solo para un CMS clásico, sino para una nube WordPress.com plataforma también.
Como resultado, una versión de sitio web móvil demuestra ser un mérito de una plantilla en sí en el 99% de los casos. La única excepción son los complementos o scripts especiales que pueden redirigir a los usuarios a un tema móvil separado (en función de la resolución de pantalla o el modelo de dispositivo, por ejemplo).
Cómo crear una versión de sitio web móvil con WordPress desde Cero
Si solo está planeando lanzar un sitio web, el problema no es tan agudo, solo tiene que elegir la plantilla correcta. La variedad de temas responsivos es más que suficiente incluso en el catálogo oficial de CMS. Debe asegurarse de que el diseño seleccionado se adhiere absolutamente a las funciones declaradas. Lo mismo ocurre con las plataformas alternativas como ThemeForest o TemplateMonster.
Si la velocidad de carga y los parámetros de información de alta velocidad de página realmente le importan, entonces hay plantillas especiales que garantizan hasta 100 puntos en pruebas de perfil como el tema Neve, por ejemplo. Sin embargo, los diseños que no pueden adaptarse a las pantallas de los teléfonos inteligentes, no están muy extendidos en estos días.
Cómo Reemplazar una plantilla de WordPress por una adaptable
Si ya posee un sitio web durante un período de tiempo bastante largo y su plantilla está desactualizada y se creó inicialmente para que coincida con formatos de pantalla a gran escala, debe considerar la posibilidad de reemplazar un diseño de sitio web antiguo por uno nuevo. Este enfoque tiene varias ventajas, a saber::
- La versión de escritorio y la versión móvil del sitio web tendrán el mismo estilo;
- Se eliminará la necesidad de administrar dos tipos de interfaz;
- No tendrá que escribir funciones y algoritmos complejos para definir la resolución de pantalla y el tipo de dispositivo que un usuario tiene para redirigirlo al diseño separado;
- Los temas comerciales con frecuencia vienen con soporte técnico y, por lo tanto, podrá obtener respuestas a todas sus preguntas y configurar un nuevo tema no peor que el anterior.
Las desventajas también están disponibles aquí. Las plantillas a menudo vienen con códigos escritos de análisis, contadores, bloques de anuncios, etc. Algunos de ellos incluso introducen tipos de materiales separados, lo que desencadena la necesidad de transferir todos estos elementos a una nueva plantilla. Todos los errores potenciales pueden tener un impacto negativo en los resultados de los motores de búsqueda. Si tiene usuarios regulares, es posible que no les guste la idea e incluso se nieguen a visitar su sitio web. Por lo tanto, debe analizar a fondo el próximo cambio de diseño para considerar todos los matices posibles.
Cómo hacer que una plantilla obsoleta Responda
La idea de hacer que una plantilla obsoleta responda no es tan complicada como puede parecer al principio. Sin embargo, realmente no tiene sentido probarlo, si careces de habilidades de nicho o al menos de conceptos básicos de diseño web. De todos modos, siempre hay una posibilidad de contratar a un diseñador web para que lo ayude con eso.
La idea principal es agregar consultas de medios CSS, en función de las cuales se agregarán estilos en cascada especialmente para las resoluciones de pantalla requeridas. Echa un vistazo al ejemplo ahora:
@media screen and (max-width: 479px) {...These are style sheets that will be applied exclusively for screens,the width of which does not exceed 479 pixels, that is, for smartphonesin the portrait format... }@media screen and (min-width:480px) and (max-width:800px) {...CSS styles here will be developed for screens with the width from480 up to 800 pixels, for example, on smartphones with horizontal screen position...}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {...These are styles for tablets in vertical and horizontal positions...}
Por ejemplo, si su cuadrícula principal se veía así:
Tendrá el siguiente aspecto en HTML:
<div class="main page box"> <div class="profile box">Guest profile</div> <div class="article box">Main article</div> <div class="sidebar box">Sidebar</div></div>
Los estilos para estos cuadros se colocan en archivos de plantilla CSS con el punto parado al principio, lo que significa que esta es la clase CSS:
.main web page box {width: 1280px; (or any other meaning, which can be provided in percentage form - width: 100%;)}.profile box {width: 280px; (the width may also be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}.article box {width: 600px; (the width may be provided in percentage form - width: 50%;)float: left; (left-edge wrap) }.sidebar box {width: 400px; (the width may be provided in percentage form - width: 25%;)float: left; (right-edge wrap)}
Si reemplazamos el ancho fijo o relativo por el 100% para la resolución de pantalla sugerida, la cuadrícula se verá de la siguiente manera:
Para alcanzar dicho resultado, basta con agregar la consulta de medios a las hojas de estilo (el ejemplo que se proporciona a continuación es aplicable a todos los dispositivos con un ancho de pantalla de 1024 píxeles o inferior):
@media only screen and (max-device-width: 1024px) {.main web page box {width: 100%; (full width)}.profile box {width: 100%; (full width)float: left; (right-edge wrap)}.article box {width: 100%; (full width)float: left; (right-edge wrap)}.sidebar box {width: 100%; (full width)float: left; (right-edge wrap)}}
Tenga en cuenta que los comentarios proporcionados entre paréntesis se mencionan exclusivamente como muestra, no se pueden transferir al código CSS real.
¿Qué dificultades pueden surgir con una realización de diseño tan sensible? Desafortunadamente, hay muchos de ellos:
- Todo el diseño de la página web puede ser violado, ya que no solo los bloques de claves disponibles en una página pueden tener un ancho fijo. Estos también pueden ser imágenes, bloques de noticias en una página de inicio / en una categoría, bloques de descripción del autor y otros elementos. Es imposible identificarlos a todos a la vez. Cada uno de ellos tendrá que ser editado tan pronto como se identifique.
- El volumen de la página web no cambiará, lo que tendrá un impacto negativo en la velocidad de descarga con una conexión a Internet lenta (no será posible la optimización en tales condiciones).
- De acuerdo con las recomendaciones de los motores de búsqueda, las fuentes en los dispositivos móviles deben ser fácilmente legibles sin reducir el zoom. Esto desencadenará la necesidad de redefinir todos los tamaños de fuente para encabezados, textos de cuerpo, citas, listas (numeradas y sin numerar), etc.
- Un encabezado y un menú complejo deben rehacerse por completo. Tiene sentido dejar solo un pequeño logotipo de sitio web, un icono de búsqueda (si tiene esta opción) y un icono de perfil (si se utiliza un sistema de autorización). Es mejor ocultar un menú de escritorio y reemplazarlo con un icono de» sándwich » (icono de menú). En la mayoría de las plantillas adaptativas populares, esto se implementa mediante dos menús paralelos: el primero está destinado a pantallas de escritorio y se muestra solo en PC, mientras que el segundo está destinado solo para dispositivos móviles (se muestra sobre la base de las mismas consultas de medios solo en dispositivos móviles).
- Si la estructura de los cuadros principales difiere, por ejemplo, la barra lateral se muestra a la izquierda pero no a la derecha, mientras que todos los widgets se mostrarán frente al contenido principal, aunque es más lógico colocarlos más abajo.
- Aparte de los archivos CSS, los estilos de sitios web se pueden reemplazar con scripts JS, será más difícil encontrarlos y editarlos.
Estos son solo algunos de los posibles escollos. Por lo tanto, tiene sentido contratar a un experto en diseño web para completar la tarea.
Las ventajas de media queries permiten eliminar el código incorrecto en cualquier momento. Estos estilos no se muestran en el sitio web principal.
Cómo Agregar una versión de sitio web adaptable con complementos
Algunos CMS usan sus propios conjuntos de extensiones, mientras que otros no los tienen en absoluto. WordPress coed con los complementos más notables para la creación de sitios web receptivos, a saber:
- Jetpack: la función de creación automatizada de versiones móviles se ha suspendido desde marzo de 2020;
- WPtouch: está disponible en versiones gratuitas y de pago, la extensión tiene sus propios complementos y temas como complemento de organización de caché separado, complemento de creación de aplicaciones web, complemento de optimización de imágenes, complemento de creación de AMP, etc. El proceso de cambiar de tema de escritorio a móvil con WPtouch se completa sin cambiar las URL de la página web, lo que importa mucho para el SEO;
- Menú WP Mobile – menú sensible para dispositivos móviles (le será útil, si necesita reemplazar un menú voluminoso y complejo de la versión del sitio web de escritorio con un menú sensible y compacto para dispositivos móviles);
- WP Mobile Detect: el complemento define inicialmente que una persona usa un dispositivo móvil y proporciona el resultado como un valor verdadero/falso. Esto lo hace aplicable para la implementación de la opción de cambio de plantilla o para la visualización de ciertos bloques de interfaz;
- WP Mobile Edition – el plugin puede convertir sitios web de WordPress en aplicaciones web con todas las funciones. Los usuarios pueden agregar un icono de sitio web a los escritorios de sus teléfonos inteligentes/tabletas para usarlo en formato de pantalla completa (sin marcos ni pestañas del navegador);
- Mobile Smart: un complemento identifica que el dispositivo se refiere a la clase móvil y luego cambia los temas a la alternativa, que es compatible con dispositivos móviles. Una versión Pro viene con soporte integrado de menús móviles, widgets especiales, opción de administración de complementos (se puede proporcionar un conjunto separado para dispositivos móviles), interruptor de dominio (para la implementación del trabajo correcto de dos versiones de sitios web independientes), etc.
Los desarrolladores web se han asegurado de que las extensiones no se reclamen, ya que muchos propietarios de sitios web han decidido cambiar a versiones de plantillas adaptativas. Por lo tanto, la mayoría de estos complementos no se han actualizado durante un período de tiempo bastante largo, lo que puede resultar en incompatibilidad con la versión actual de la plataforma. La única excepción es WPtouch.
El trabajo con cada plugin tendrá sus propias peculiaridades. Algunos de ellos ofrecen plantillas móviles listas para usar, mientras que otros recomiendan descargar extensiones de terceros o crear las propias.
Si da preferencia a trabajar con una versión de sitio web móvil en el subdominio/dirección alternativa, estos son los matices que debe tener en cuenta:
- Estos son sitios web diferentes para los motores de búsqueda y es realmente malo que su contenido no sea único;
- Para hacer que los motores de búsqueda «peguen» la URL y entiendan que este es el mismo sitio web, todos los atributos de enlace deben estar organizados correctamente:
-
- Attribute link re rel = «alternate» href = «URL-página móvil» – para versiones de escritorio;
- Attribute link re rel=» canonical»href=» URL-páginas web de escritorio » – para plantillas móviles.
- Si el contenido de las diferentes versiones de la página web difiere, corre el riesgo de recibir sanciones por encubrir (por reemplazo de contenido).
Cómo hacer una versión móvil de un sitio web HTML
En la medida en que los sitios web HTML no tengan funciones dinámicas, no podrá analizar la resolución de pantalla de un dispositivo ni cambiar de una plantilla de escritorio al tema móvil en función del resultado. Todo lo que necesita es rediseñar completamente la cuadrícula de diseño y los estilos de los elementos problemáticos.
Ya hemos revisado cómo hacerlo, esto se hace a través de consultas de medios. Los diseños más difíciles de adaptar son aquellos con ancho fijo y posición de los elementos.
Nada funcionará sin habilidades especializadas de nicho e inmersión en código CSS/HTML. Tiene sentido contratar a un profesional del diseño web desde el principio o cambiar el diseño a otro que pueda comprar u ordenar, o simplemente desarrollar una nueva página web desde cero, por ejemplo, utilizando Mobirise, creador de sitios web sin conexión, por ejemplo. Finalmente, puede ser el momento de pasar a la infraestructura en la nube y elegir uno de los creadores de sitios web en línea.
Sitios separados para Dispositivos móviles y de Escritorio o Un Solo Sitio Web: ¿Qué Es Mejor?
Como se mencionó anteriormente, tener un sitio web móvil es una necesidad para cualquier propietario de negocio. Esta es una forma segura de garantizar una presentación empresarial de calidad en la web, generar tráfico y garantizar una experiencia de usuario insuperable. La pregunta es: ¿tiene sentido crear dos versiones de sitios web separadas para pantallas móviles y de escritorio o crear un sitio web receptivo que se muestre genial en ambos tipos de dispositivos?
En general, iniciar un sitio web adaptable es una solución más efectiva y práctica. Elimina la necesidad de crear dos sitios web diferentes con diversos dominios/subdominios, URL y estructura interna. Tales sitios a menudo confunden a los visitantes y pueden desencadenar problemas, cuando se trata de optimización SEO, marketing en Internet y otros métodos de promoción relacionados. En su lugar, obtienes un proyecto que se mostrará igual de bien en pantallas de escritorio y móviles.
¿Cuánto Cuesta una Versión Móvil de un Sitio Web?
El costo de la versión móvil de un sitio web generalmente depende de la plataforma con la que lo inicie. Si elige un creador de sitios web en línea como Wix, puede ser absolutamente gratuito, ya que el sistema le permite crear sitios web que están listos para dispositivos móviles de forma predeterminada. Sin embargo, el plan Wix gratuito no le permite conectar su propio nombre de dominio, lo que hará que sea imposible aprovechar al máximo el rendimiento de su proyecto.
En la medida en que Wix tiene una política de precios bastante distintiva y versátil, puede elegir cualquiera de sus planes para lanzar un sitio web. Solo considere sus objetivos de diseño web, tipo de proyecto y especialización, así como el presupuesto que está listo para invertir en él, mientras elige la suscripción más preferible. Cada plan Wix viene con una amplia gama de características y términos especiales que afectan el costo final. La suscripción más barata al sitio web le costará 1 13/mes, mientras que el precio del plan Business Basic más asequible comienza a partir de 2 23 / mes.
¿Has decidido usar WordPress para crear sitios web responsivos? Entonces, el costo del proyecto eventualmente dependerá del precio de los complementos que elija. Las extensiones de WordPress generalmente se posicionan como gratuitas, pero una parte de sus funciones aún está disponible después de actualizar a la versión Pro. Por ejemplo, el costo de WPtouch Pro oscilará entre $79 y 3 359 por año. Eso es exactamente por qué, parece razonable cambiar a una plantilla de respuesta. Estos temas se compran una vez, mientras que su costo ronda los 4 40-80. En caso de que aún decida contratar a un desarrollador web profesional para rediseñar un tema obsoleto para usted, el costo se discutirá individualmente dependiendo de la complejidad del proyecto.
Línea de fondo
No es ningún secreto que cualquier sitio web debe tener una versión móvil para mantenerse en demanda con el público objetivo hoy. Casi hay personas que no usan sus dispositivos móviles para navegar por la web, en busca de los servicios y productos que necesitan. Por lo tanto, el proceso de optimización móvil de su sitio web eventualmente dependerá de la plataforma seleccionada.
Si solo está planeando lanzar un sitio web, tiene sentido dar preferencia a uno de los creadores de sitios web en línea más populares. Wix funcionará mejor para este propósito. En caso de que ya ejecute un sitio web impulsado por el CMS como WordPress, entonces es mejor reemplazarlo con un tema receptivo. Sin embargo, los complementos que ofrecen soporte móvil pueden ser bastante caros, mientras que un rediseño completo de la plantilla será un verdadero desafío, especialmente si tiene la intención de hacer frente a la tarea de forma independiente.
De todos modos, no tiene sentido crear una versión móvil separada de su sitio web. Se enfrentará a problemas relacionados con el desarrollo del proyecto y su apoyo adicional. Una solución mucho más simple y razonable es hacer que su sitio web sea receptivo para dispositivos móviles desde el principio.