Hoy en día, la mayoría de las personas se conectan en línea a través de dispositivos móviles: tabletas, teléfonos, en este sentido, la optimización de sitios web también está alcanzando un nuevo nivel. Si un usuario entra y ve que el sitio no está optimizado para dispositivos móviles: la imagen no se puede ver, los botones se han movido, las fuentes son pequeñas e ilegibles, el diseño está torcido: el 99% de 100% saldrá. y empezar a buscar otro más conveniente. Y el robot de búsqueda marcará la casilla de que el recurso es irrelevante, es decir, no coincide con la consulta de búsqueda. Por lo tanto, el diseño de la página debe adaptarse a varios dispositivos móviles. ¿Qué es una versión móvil del sitio, cómo hacerla y cuál es la mejor manera de aplicarla? Lea más en este artículo.
Así que hay cuatro formas clave de hacer que su sitio sea compatible con dispositivos móviles.
Método uno - Diseño receptivo
Las plantillas receptivas cambian la imagen del sitio según el tamaño de la pantalla. Como regla general, se configuran en 1600, 1500, 1280, 1100, 1024 y 980 píxeles estándar. Para la implementación, se utilizan consultas de medios CSS3. El diseño del sitio en sí no cambia.
Las ventajas de este método incluyen:
- desarrollo conveniente,ya que la propia estructura se adapta a los parámetros de la pantalla, y cualquier actualización no requiere desarrollar el diseño desde cero, basta con retocar el CSS y el HTML;
- una URL: el usuario no necesita recordar varios nombres, no es necesario un redireccionamiento (redireccionamiento de una dirección a otra), lo que puede complicar el trabajo de un webmaster, y es más fácil para una búsqueda motor para ordenar y clasificar un recurso con una sola dirección.
Por supuesto, las plantillas adaptables tienen sus inconvenientes, que, por cierto, son más que ventajas. Sin embargo, muchos desarrolladores se adhieren a este concepto, por ejemplo, Google Corporation, cuya versión móvil del sitio tiene un diseño adaptativo. Entonces, desventajas:
- El diseño receptivo no admite las mismas tareas en dispositivos móviles que en PC. Si se trata, por ejemplo, de una versión móvil del sitio web de un banco, donde es más probable que la información sobre el tipo de cambio o los cajeros automáticos más cercanos sean importantes para el usuario, entonces este diseño es suficiente. Pero si se trata de un recurso estructurado complejo con muchas secciones y subsecciones, a los visitantes difícilmente les gustará el diseño adaptable.
- La carga lenta convierte un sitio favorito en uno odioso. Esto es especialmente cierto para los recursos donde abundan las animaciones, los videos, las ventanas emergentes y otros elementos activos. Debido al alto peso, la página simplemente se ralentizará, el usuario se enojará y se irá, y las posiciones de búsqueda del sitio caerán.
- La imposibilidad de desactivar la versión móvil es otro inconveniente importante. Si algún elemento está oculto por tal diseño, ustedno hay nada que pueda hacer para abrirlo, a diferencia de los sitios donde puede desactivarlo y cambiar a un dominio normal.
Sin embargo, esta versión móvil del sitio rápidamente, sin habilidades ni costos especiales, le permite adaptar el recurso a cualquier dispositivo. Pero, en vista de las deficiencias enumeradas, se adaptará a recursos pequeños y simples con un mínimo de información y multimedia, sin navegación ni animación complejas. Para un sitio complejo, son adecuados otros 2 métodos.
Segundo método: una versión separada del sitio
Este método es muy común y, a menudo, logra que el sitio sea más legible en un dispositivo móvil. Su esencia es crear una versión separada de la página, dibujada para la aplicación y ubicada en una URL o subdominio separado, por ejemplo, m.vk.com. Al mismo tiempo, se conserva la funcionalidad principal, el diseño del sitio simplemente se ve diferente. Las ventajas de este método son obvias:
- interfaz fácil de usar;
- fácil de cambiar y editar ya que la versión existe por separado del recurso principal;
- debido al bajo peso, una versión separada del sitio funciona mucho más rápido que una plantilla adaptable;
- la mayoría de las veces es posible ir a la versión principal de la página desde el móvil.
Pero aquí también hubo algunos inconvenientes:
- Direcciones múltiples: versión de escritorio y móvil del sitio. ¿Cómo hacer que el usuario recuerde dos opciones? Los maestros web a menudo prescriben una redirección (redireccionamiento) de la versión de escritorio a la versión móvil, pero al mismo tiempo, si esta página está en el móvilversión no existe, el usuario recibirá un error. Aquí surgen dificultades con los motores de búsqueda, a los que les cuesta clasificar 2 recursos idénticos, y esto afecta directamente a la promoción.
- La versión móvil del sitio desde una computadora, si el usuario lo visita por error, se verá ridículo, lo que también puede afectar el tráfico.
- Esta versión suele ser muy restringida, escritorio, por lo que el usuario obtendrá una funcionalidad muy limitada. Pero al mismo tiempo, si f alta algo, el visitante puede ir a la versión completa de la página.
En general, un sitio móvil independiente se justifica y es la forma más común de adaptar un recurso para dispositivos móviles. Es popular entre las grandes tiendas en línea como Amazon.
Tercera vía - diseño RESS
El motor de búsqueda de Google apoya activamente esta dirección del diseño móvil. Este es el método más complejo, costoso pero efectivo para adaptar el sitio a un teléfono o tableta. Se llama RESS. Esto apunta a un recurso en una aplicación móvil que se puede descargar para cada dispositivo por separado. Para Android - con GooglePlay y para Apple - con iTunes.
Estas aplicaciones son rápidas, gratuitas, convenientes, tienen la capacidad de acomodar varios tipos de información, mientras que la memoria del teléfono y el tráfico de Internet no se consumen como cuando se visita un sitio a través de un navegador. Son de fácil acceso, ya que el enlace siempre estará en la pantalla y no es necesario ingresar un nombre complejo en la barra de direcciones del navegador.
Hay, por supuesto, aquí ysus deficiencias, como la complejidad en el desarrollo, el alto costo de mano de obra de una gran cantidad de programadores, la necesidad de realizar varias opciones de diseño. A veces, la aplicación no reconoce el dispositivo móvil. Es necesario el soporte técnico regular, la corrección de las deficiencias. No obstante, esta opción se considera la mejor de las tres propuestas por su funcionamiento productivo e ininterrumpido.
La forma más económica de crear un sitio web móvil
Todos los métodos anteriores implican, aunque no siempre largos y difíciles, pero sí el trabajo remunerado de un webmaster. Si no ve una necesidad urgente de dicho desarrollo, una versión móvil simple y gratuita del sitio le conviene. ¿Cuál es la forma más fácil de hacerlo?
Descargue plantillas especiales (complementos) para un diseño receptivo. Por ejemplo, WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile y otros. Ayudarán a visualizar el sitio de forma más correcta en el teléfono, mientras que recibirá algunos consejos sobre lo que debe corregirse para adaptar mejor la página a la versión móvil.
Por supuesto, este método no es adecuado para recursos serios. Más bien, esta función gratuita está destinada a sitios pequeños y simples, blogs, fuentes de noticias. No olvide que el motor de búsqueda de Google, al igual que Yandex, exige mucho en la actualidad las versiones móviles, por lo que existe una gran posibilidad de reducir sus posiciones con este método.
Con este método, lo más probable es que se eliminen los anuncios y las ventanas emergentesbanners, pero la página se cargará rápidamente y sin "retrasos".
Principios para crear versiones móviles
No importa si la versión móvil del sitio se creó de forma gratuita o con la ayuda de un equipo de webmasters, se hizo en el sistema RESS o utilizando una plantilla adaptable. Lo que es más importante, para su funcionamiento efectivo, se requiere adherirse a varios principios extremadamente importantes. Entonces, ¿cuál debería ser la versión móvil del sitio? ¿Cómo hacerlo productivo, eficiente y productivo?
Elimina todo lo innecesario
Minimalismo es lo que el desarrollador de la versión móvil del sitio debe buscar. Imagínese lo difícil que es percibir información que está repleta de colores, botones, pancartas y que tiene que desplazarse sin cesar en busca del material adecuado. El diseño móvil debe ser simple y limpio. Elija 2-3 colores para dividir el espacio (por ejemplo, de marca). Mejor si uno de ellos es blanco. Divide el espacio de una pequeña pantalla en zonas comprensibles y legibles. Las claves virtuales deben estar visibles para que el usuario sepa claramente dónde presionar y ver: aquí está el producto, aquí está el formulario para completar los datos, aquí está la información sobre la entrega y el pago.
Todas las opciones adicionales que serían útiles en la versión de escritorio y facilitarían la vida del usuario solo traerán dificultades aquí. Deja solo los elementos más importantes. La animación, los banners publicitarios, los multimedia, muy probablemente, solo ralentizarán el trabajo del sitio o la aplicación y distraerán la atención.principal.
Alineación
El problema de la alineación no es menos grave, ya que si se hace de forma incorrecta, el usuario solo obtendrá las terminaciones de las palabras importantes. Generalmente se acepta la alineación vertical y alineada a la izquierda. Imagínese desplazándose por las noticias en su teléfono. Lo haces de arriba a abajo, no a la izquierda ni a la derecha.
Unificación
Cuando no exista la posibilidad de una larga cadena de transiciones, intente combinar varios pasos en uno. Por ejemplo, el sitio requiere la entrada de datos en varias etapas: un nombre, luego una dirección, donde en cada celda individual hay una casa, calle, apartamento, etc. por separado. Para no obligar al usuario a intentar golpear muchas celdas pequeñas, pídale que complete solo 2: nombre y dirección.
Y desconexión
A veces, por el contrario, se requiere separar demasiada información. Por ejemplo, en el menú desplegable tienes una lista de más de 80 ciudades donde se realizan envíos. Agrúpelos por región para que el usuario no tenga que desplazarse por esta enorme lista. Cuando pase el cursor sobre el centro regional o la región, aparecerá otra lista de ciudades.
Listados
Por cierto, sobre las listas. Hay dos de ellos: fijados en orden alfabético u otro y con sustitución. Su elección depende de lo que aparecerá en la lista.
Fixed es útil si el usuario sabe exactamente lo que está buscando. Por ejemplo, ciudad, número o fecha. La segunda opción es adecuada para nombres largos y complejos o para casos en los que hay muchas variaciones de un mismoel mismo nombre, y cada lista desplegable lleva al usuario un paso más cerca de la meta. La opción de sustitución automática se usa con más frecuencia cuando un visitante necesita ayuda. Por ejemplo, un sitio de tejido ofrece comprar agujas de tejer. El usuario ingresa la consulta de búsqueda "Agujas de tejer de metal", y en la información sobre herramientas ve "Agujas de tejer de 5 mm", "Agujas de tejer de 4,5 mm", etc.
Relleno automático
Este elemento es especialmente relevante para los sitios que venden algo en línea, y debe completar formularios estándar para el pago, la entrega, etc. Si una persona realiza una compra desde un teléfono, lo más probable es que no tenga tiempo. para llegar a una computadora, lo que significa que el proceso de compra debe ser lo más rápido y conveniente posible.
Para esto, los formularios pueden contener datos ya llenados, puedes recurrir a las respuestas más populares. Por ejemplo, inserte la fecha de hoy, el método de pago en efectivo, la ciudad si trabaja en la misma región. Se pueden cambiar, pero si aciertas en el objetivo, se guardará el tiempo del usuario.
Todo se lee, todo se ve
Al diseñar la versión móvil del sitio, recuerde que los teléfonos de todos son diferentes, al igual que su vista. Tal vez su sitio se verá desde una pantalla pequeña, por lo que las fuentes deben ser simples y legibles, los botones deben ser lo suficientemente grandes para que se pueda hacer clic en ellos sin que se lleven a otra página, y las imágenes deben abrirse por separado, grandes, especialmente cuando se trata de Internet. store.
Algunas estadísticas
Hablando de la adaptación del sitio a los dispositivos móviles, uno no puede dejar de recurrir a las estadísticas para entender cuán importante es este proceso parapromoción en línea.
Los números son los siguientes. Hoy en día, los gadgets son utilizados por el 87% de la población, al parecer, salvo los niños más pequeños y algunos ancianos. Los economistas predicen que el comercio móvil crecerá 100 veces en los próximos 5 años. Al mismo tiempo, solo el 21% de los sitios están adaptados para funcionar con dispositivos móviles. Esto significa que solo una pequeña quinta parte del tráfico de Internet y el mercado de comercio electrónico están ocupados.
Piensa en estos números. ¿Tiene sentido adaptar su recurso? Por supuesto que sí. Además, si bien hay tanto espacio en este mercado, puede crear su propio segmento en él.
Donde necesitas una versión móvil
Usar la versión móvil tiene sentido para cualquier plataforma que pretenda obtener una clasificación alta. Después de todo, esto es un impacto directo en el usuario, creando condiciones cómodas para que permanezca en su sitio.
No puede existir sin la versión móvil:
- portales de noticias, porque la mayoría de ellos se ven desde el teléfono camino al trabajo o la escuela;
- redes sociales: por la misma razón, además hay un factor de comunicación en línea, lo que significa que se debe crear un chat conveniente y comprensible para esto;
- referencia, sitios de navegación, etc., donde la gente va cuando busca algo;
- tiendas en línea: una oportunidad para atraer clientes que no pierden el tiempo comprando, sino que compran todo a través de Internet móvil.
En lugar de una conclusión
Hoy en día, las tecnologías móviles están en elcrecimiento y desarrollo activo, por lo tanto, luchando por el liderazgo en el mercado, cualquier empresa debe asegurarse de que su recurso de Internet cumpla con los requisitos. Debido a las crecientes demandas de los usuarios, los sitios deben actualizarse constantemente y adaptarse a diferentes dispositivos. Está claro que si a una persona le resulta inconveniente estar en un recurso en particular, no puede obtener información sobre un producto o precio allí, realizar un pedido, averiguar sobre la entrega, luego encontrará el sitio donde todo esto será posible. Por lo tanto, para ganar la competencia, es importante contar con un recurso flexible, conveniente, funcional e interesante.
La versión móvil del sitio web de Android o iOS ayudará a hacer esto. Para hacer esto, debe elegir uno de los métodos de rediseño anteriores: una plantilla adaptable, crear un nuevo sitio en un subdominio y redirigirlo, usar plantillas gratuitas o crear una aplicación móvil que facilitará el ingreso del usuario. y estar en la página.
Este enfoque no solo ayudará a mantener la le altad de los clientes existentes, sino que también brindará la oportunidad de atraer nuevos visitantes.
