Partes de la versión móvil. ¿Cuál elegir: diseño móvil versus diseño adaptable? Cómo es el desarrollo de la versión móvil en nuestro estudio web

Sergey Lukoshkin

26.03.2015 | | 0 comentarios

Internet ha revolucionado el comportamiento del consumidor. Durante mucho tiempo no han ido a la tienda para seleccionar un producto. Todo lo contrario: primero, "escalan" en Internet, encuentran un producto, lo comparan con la competencia, luego encuentran una tienda, la comparan con otras y solo entonces deciden dónde realizar la compra.

Solo después de eso, irán a la tienda elegida, o simplemente pedirán el producto a través de Internet. Hoy en día, más del 60% de los compradores hacen precisamente eso.
Parecería que para el éxito necesitas que tu empresa tenga un sitio web o una tienda online, y eso es todo. Sin embargo, ahora esto no es suficiente.

¿Por qué es importante un sitio móvil o un diseño adaptable para las empresas?

El hecho es que con la llegada de los teléfonos inteligentes y las tabletas, cada vez más compradores buscan bienes y servicios en Internet utilizando estos dispositivos, y no desde computadoras fijas o portátiles. Y todo porque es muy conveniente. Dondequiera que esté el comprador, puede buscar directamente desde su teléfono móvil y no es necesario encender la computadora.
Esto es genial, pero el tamaño físico de la pantalla de un dispositivo portátil, ya sea una tableta o un teléfono inteligente, es bastante pequeño y, por lo tanto, un sitio que se ve bien en una computadora o computadora portátil es muy inconveniente para verlo en la pantalla de un dispositivo móvil.
Es por eso que ahora es más importante que nunca si su sitio es adecuado para su uso en teléfonos inteligentes, tabletas o phablets (un phablet tiene un tamaño intermedio, entre un teléfono inteligente y una tableta).

¿Cómo hacer que su sitio sea compatible con dispositivos móviles?

Hay dos enfoques para resolver este problema:

1. Cree una versión separada del sitio que se abre en un dispositivo móvil
2. Cree un sitio web con un diseño receptivo que se adapte a cualquier tamaño de pantalla

Es la segunda opción que más se utiliza, ya que es más económica de desarrollar. La mayoría de los sitios web modernos están diseñados desde el principio para que sean igualmente cómodos de ver en diferentes pantallas.
Sitio receptivo, se ajusta automáticamente al tamaño de la pantalla del dispositivo en el que se ve.
Por ejemplo, el sitio de nuestro laboratorio. Así es como se ve este artículo en la pantalla de una computadora.

Y así es como se ve en la pantalla de un teléfono inteligente


Como puede ver, incluso en un teléfono inteligente, no es necesario acercar nada. Es muy fácil trabajar con todos los controles, enlaces, imágenes y fuentes, incluso en una pantalla pequeña.
Por supuesto, el costo y el tiempo de desarrollo de un sitio web adaptable han aumentado, pero al mismo tiempo, sin importar en qué mercado trabaje, un sitio web con un diseño receptivo es una inversión muy oportuna en su negocio. Y aquí hay una lista de las razones más importantes.

5 razones principales para crear un sitio web empresarial receptivo

Búsqueda móvil. Según las estadísticas (al momento de escribir este artículo), más del 50% de los compradores buscan bienes y servicios en Internet desde dispositivos móviles. Y esta cifra está creciendo muy rápidamente. Más recientemente, Google anunció que los sitios que no tienen una versión para dispositivos móviles ocuparían un lugar muy bajo en los resultados de búsqueda para dispositivos móviles. Por lo tanto, si no tiene una versión móvil del sitio, no se sorprenda de que será difícil encontrarlo en la búsqueda de un teléfono inteligente.
La facilidad de uso. Nuevamente, según las mismas estadísticas, más del 40% de los usuarios dijeron que irían a otro sitio si el actual no tiene una versión móvil. Y nuevamente, su participación está creciendo de manera constante. Para los negocios, esto significa que la atención del comprador será captada por el proveedor cuyo sitio web sea conveniente en cualquier dispositivo.
Contacto directo. El teléfono inteligente permite al usuario hacer una llamada de inmediato al número de teléfono indicado en el sitio web (si el sitio web tiene una función de clic para llamar). Por lo tanto, te acercas mucho más al comprador potencial.
Nuevas oportunidades de promoción. Hoy en día, la publicidad móvil se está generalizando, pero si no tiene un sitio móvil, su efectividad será catastróficamente baja. Por el contrario, los sitios optimizados para dispositivos móviles obtienen otro poderoso canal de promoción.
Ventaja competitiva. Y lo ultimo. Compruebe si sus competidores tienen versiones móviles de sus sitios. De lo contrario, tiene una gran oportunidad de crear una poderosa ventaja competitiva y conseguir aquellos clientes que abandonan los sitios obsoletos de sus oponentes.

En la era de Internet, la competencia la gana el que es más accesible para la mayoría de los usuarios de la red, el que es más fácil de encontrar y con el que es más fácil interactuar desde cualquier dispositivo.
¿Todavía tienes dudas sobre si necesitas una versión móvil del sitio o un diseño adaptable?

Este artículo lo ayudará a decidir si necesita una versión móvil del sitio, por qué la necesita y qué versiones tiene. También compartiremos algunas cifras interesantes sobre el tema.

Los sistemas operativos móviles representan aproximadamente el 25% del tráfico de Internet, y esta cifra aumenta cada día. Junto con el crecimiento de los usuarios de Internet que utilizan un dispositivo móvil, surge la pregunta de si adaptar el sitio al tráfico móvil, ¿qué métodos existen y vale la pena el esfuerzo? ¡Vamos a resolverlo!

¿Por qué un sitio web necesita una versión móvil?

• Usar la versión móvil del sitio desde dispositivos es mucho más conveniente: no hay necesidad de desplazarse horizontalmente por el sitio, toda la funcionalidad del sitio funciona correctamente, navegar por el sitio le da placer al usuario;
• La versión móvil del sitio es mucho más liviana, tiene un código menos voluminoso, gracias a esto, el sitio de los dispositivos móviles se cargará varias veces más rápido, incluso, esto ayudará a ahorrar al usuario valiosos megabytes;
• Una versión especialmente desarrollada del sitio para teléfonos móviles le permite trabajar con este público objetivo, por ejemplo, para la versión móvil de una tienda en línea, puede insertar un mensaje SMS directamente desde la versión móvil o determinar la ubicación y la distancia al punto de venta más cercano;
• Los motores de búsqueda utilizan la búsqueda móvil para teléfonos, por lo que la versión móvil de su recurso tendrá una clasificación más alta y la cantidad de clics aumentará en consecuencia.

Tipos de versión móvil del sitio

1. Diseño adaptable... Con CSS3, puede establecer sus propios estilos para diferentes tamaños de pantalla del sitio. Este método se usa ampliamente en la actualidad y es bueno porque no requiere la producción de páginas adicionales en el sitio. La desventaja es que no todo en el sitio está optimizado, el peso de la página sigue siendo alto, pero siguiendo el principio de "móvil primero", esto se puede evitar (el principio cuando el sitio se optimiza por primera vez para teléfonos móviles).
2. Sitio móvil independiente... Los cambios en esta versión son más fáciles de implementar, porque las estructuras de la versión móvil y la versión de escritorio no dependen entre sí en términos de código.
3. RESS... En este método, el software del lado del servicio detecta el dispositivo y muestra su HTML y CSS. Las desventajas aquí radican en el hecho de que la tecnología para determinar el dispositivo del usuario no es ideal y es una carga adicional en el servidor.
4. - Aplicación separada... Esto no es exactamente lo que califica como especie. Más bien, es un complemento. Cada vez hay más aplicaciones, y algunos usuarios comenzaron a realizar compras y ver noticias de los sitios principalmente a través de ellos. Esta decisión vale la pena pensar en proyectos de Internet grandes y visitados o condenados al éxito comercial.

Funciones necesarias en la versión móvil del sitio

1. Compatibilidad... El sitio debería mostrarse correctamente en las resoluciones de pantalla más populares (480x320, 1280x720, etc.). En tales sitios, es mejor usar xHTML, es mejor omitir JavaScript.
2. Usabilidad... La navegación es la clave del éxito, y una buena navegación es un camino directo a la victoria, intente hacer todo de manera excelente, pregunte constantemente a sus amigos o en varios foros para calificar la versión, tenga en cuenta las correcciones propuestas por los usuarios en el desarrollo posterior;
3. Optimización de contenido... Este punto se aplica especialmente a las imágenes: deben ser ligeras en kilobytes y en tamaño;
4. Diseño. El componente mas importante... La tendencia actual del diseño para móviles es la máxima ligereza y facilidad de uso.

¿Qué tipo de sitio necesita primero la versión móvil?

Los estudios de varios portales de Internet permiten evaluar la viabilidad de crear una versión móvil para los siguientes temas:

• Redes sociales y servicios similares;
• Medios de comunicación;
• Tiendas en línea;
• Portales de referencia.

Para saber con certeza si su sitio necesita una versión móvil, analice el tráfico de su recurso durante el último año a través de cualquier sistema de análisis y, si la proporción de tráfico móvil es del 18 por ciento o más, piense en crear una versión móvil lo antes posible. .

¿Sigues pensando? Proponemos reflexionar sobre estas pequeñas estadísticas:

• Los teléfonos móviles se utilizan más de 87% población, el 13% restante son niños menores de 5 años;
• El crecimiento del comercio móvil para 2020, según diversas organizaciones, crecerá en más de 99 veces.

La forma en que adaptamos el sitio para dispositivos móviles determina el costo de la promoción en los motores de búsqueda y su resultado.

A marcadores

Dmitry Mrachkovsky, un optimizador de Ashmanov and Partners, explicó cómo elegir entre un sitio adaptable y uno móvil y qué problemas no obvios se deben enfrentar.

Beneficios de los sitios móviles y receptivos

Es difícil responder de manera inequívoca a la pregunta de qué tecnología de adaptación para teléfonos inteligentes y tabletas es más efectiva en términos de SEO. Incluso entre los grandes jugadores, no noté una ventaja a favor de ninguna decisión. M.Video, DNS, Wildberries, Aviasales utilizan un diseño adaptable, y Lamoda, 220 Volt, Yulmart, Yandex.Market utilizan sitios móviles. Pero veamos qué beneficios obtienen el primero y el segundo.

Diseño adaptable del sitio "M.Video" y la versión móvil del sitio "220 Voltios"

El diseño receptivo ayuda a hacerlo sin desarrollar una versión móvil separada. Esto tiene ventajas:

• No necesitamos una estructura de página separada para mostrarla en dispositivos móviles. Es suficiente corregir la versión de escritorio del sitio usando CSS.
• Se utiliza una única URL para las versiones de escritorio y móviles. Por lo tanto, el contenido del sitio no se duplica, las páginas no compiten entre sí y el trabajo de promoción afecta la clasificación en las búsquedas de escritorio y móviles.

La versión móvil es una solución más costosa y flexible. Se puede editar sin afectar el sitio principal. Esto da ventajas:

• Puede hacer que un sitio móvil sea lo más liviano posible y acelerar su carga eliminando funciones innecesarias a nivel de código.
• La interfaz se puede mejorar para los usuarios de dispositivos móviles agregando funciones que no estaban disponibles en la versión de escritorio del sitio.
• El usuario siempre puede cambiar a la versión principal del sitio en un dispositivo móvil si lo desea.

Me gustaría mencionar una tecnología más: RESS. Muestra al usuario plantillas de escritorio o móviles según el dispositivo, pero no cambia la URL de la página. RESS combina las ventajas de una versión adaptable y móvil descrita anteriormente. Pero también tiene dos inconvenientes: una implementación compleja y costosa y errores en la identificación de modelos de teléfonos raros e impopulares.

Problemas con el diseño receptivo

Adaptive es una solución económica y conveniente, pero desde el punto de vista de la promoción de los motores de búsqueda, tiene varios inconvenientes.

Mala interpretación de lo adaptativo

Algunas personas implementan el diseño adaptable de forma incorrecta y muestran dos plantillas en la misma página en el código: escritorio y dispositivo móvil. Dependiendo del dispositivo del usuario, la parte requerida del código permanece visible, mientras que el resto se oculta usando display: none. Entonces surgen tres problemas:

1. Todos los elementos de contenido se cargan dos veces: textos, imágenes, encabezados H1 y H6, migas de pan, productos relacionados y destacados, etc. Y a los motores de búsqueda realmente no les gustan los duplicados.
2. Las piezas de contenido no utilizadas se ocultan con CSS. La opinión de los motores de búsqueda sobre este tema es ambigua. Google dijo que ignora el contenido de los bloques ocultos y Yandex, que tiene en cuenta todo el contenido de la página. La mayoría de los SEO están de acuerdo en que tal esquema crea el riesgo de ser sancionado.
3. El código se duplica y el sitio se carga más lentamente.

Tal implementación es el enfoque equivocado de la tecnología RESS.

Ocultar elementos innecesarios

Para hacer que la interfaz de la versión adaptativa sea más conveniente, algunos se deshacen de algunas de las funcionalidades: bloques que distraen, textos grandes en categorías de catálogo, etc. Todo lo innecesario se oculta usando la pantalla: ninguno. Pero el problema es que se usa todo el código para cargar la página y el sitio es lento. Además, como se mencionó anteriormente, los motores de búsqueda tienen una actitud controvertida hacia dicho contenido: existe el riesgo de ser objeto de sanciones.

Mal uso de JavaScript

Algunas personas usan JS para evitar renderizar bloques adicionales en dispositivos móviles. Pero esta forma no es mejor que la pantalla: ninguna. Existe el riesgo de que los motores de búsqueda no indexen el contenido destinado a ellos, incluso en la versión de escritorio. Los motores de búsqueda generalmente no siempre perciben correctamente el contenido AJAX, especialmente si no se cumplen una serie de condiciones para una indexación correcta.

¿Por qué todavía se usa el diseño receptivo?

La elección de un adaptable generalmente se debe a dos ventajas principales: el desarrollo de una sola versión del sitio y la ausencia de problemas con múltiples URL.

También es una solución conveniente para promocionar a varias regiones. Centramos todos los esfuerzos en un dominio y obtenemos resultados en búsquedas móviles y de escritorio. Para hacer esto, debe vincular las regiones de interés al sitio en el directorio Yandex.

Y para Google, cree una página con direcciones de afiliados para que el motor de búsqueda entienda en qué regiones trabaja. M.Video utiliza un diseño adaptable con un solo dominio con mucho éxito. La tienda tiene posiciones altas en los resultados de búsqueda de dispositivos móviles y computadoras de escritorio para solicitudes de productos, categorías e información.

Alternativamente, puede utilizar geo-subdominios para aumentar la relevancia del texto de sus páginas. En este caso, los subdominios como spb.site.ru, samara.site.ru, kazan.site.ru se asignan regiones a través de Yandex.Webmaster y luego los encabezados y metaetiquetas se asignan con el topónimo. Otra ventaja es que es fácil configurar análisis separados para geo-subdominios para rastrear los resultados por región. MediaMarkt practica este método de promoción.

Problemas con las versiones móviles de los sitios

El costo relativamente alto de desarrollo no es el único inconveniente de los sitios móviles. Aquí hay una lista de los problemas menos obvios que puede enfrentar al elegir esta tecnología.

Trabajo de doble promoción

El sitio móvil se optimiza y promociona por separado del sitio principal, y esto requiere más recursos que en el caso de responsive. Debe comenzar la optimización asegurándose de que la versión móvil esté indexada correctamente y no compita con la de escritorio. Para ello, vincúlelos en Yandex.Webmaster y Search Console, especifique los atributos rel = "alternativos" correctos, configure la indexación y la generación de un mapa XML.

Caos debido a los enlaces absolutos en el contenido.

En el 99% de los casos, las plantillas de escritorio y móviles descargan contenido de una base de datos. Si utiliza enlaces absolutos a la página interna del sitio de escritorio con una indicación del protocolo y el dominio, también se mostrarán en la página móvil. Al hacer clic en el enlace, se producirá uno de dos escenarios:

• Si el agente de usuario está definido para la versión de escritorio, la versión móvil de la página se abrirá para el usuario.
• En otros casos, el usuario verá la página de escritorio y el trabajo de crear una versión móvil será en vano.

En este caso, se puede violar el peso del enlace interno del sitio. Para evitar este problema, utilice enlaces relativos en su contenido. Es decir, para el atributo href, especifique / page / en lugar de https://site.ru/page/.

El contenido y la estructura de los sitios de escritorio y móviles pueden diferir. Por tanto, es lógico indexar el contenido de ambos en la búsqueda para evitar errores. Google, por otro lado, recomienda en la versión móvil para indicar que el contenido del sitio de escritorio es canónico. Por otro lado, el motor de búsqueda dice que no se cuenta el contenido de las páginas no canónicas.

Yandex es claro en este sentido: indexa el contenido de las páginas móviles y de escritorio por separado. Para ello, basta con configurar el atributo rel = "alternate" de la versión principal a la versión móvil, y también puede configurar redireccionamientos 301 desde la versión de escritorio a la versión móvil, teniendo en cuenta el agente de usuario de la dispositivo.

Requisitos poco claros del índice de dispositivos móviles primero

Para prepararse para la transición al índice móvil primero, es lógico elegir la versión móvil del sitio como página canónica. Es cierto que existen algunas ambigüedades en las recomendaciones con respecto a los dispositivos móviles primero. Por ejemplo, las pautas de Google dicen que el contenido móvil y de escritorio debe ser similar, pero no revela el grado de "similitud".

Pero, ¿qué pasa si se requiere un determinado bloque de contenido para clasificar en la búsqueda de escritorio, que en la versión móvil será superfluo, pero se dará prioridad a la versión móvil?

Extracto de la Guía de Google para indexar sitios móviles

Extracto del informe de Google sobre la implementación del índice mobile-first

Uso irreflexivo de las páginas turbo

Algunas personas introducen innovaciones en los motores de búsqueda de forma indiscriminada, con la expectativa de influir en el ranking. Por ejemplo, las páginas turbo de Yandex, que no reemplazan las páginas móviles completas en la búsqueda, incluyen una pequeña parte de la funcionalidad del usuario y generan menos conversiones. Si tiene un sitio comercial y confía en la calidad de la versión móvil, no se apresure a implementar "turbo", incluso para páginas con artículos y reseñas.

Reducir el efecto de los enlaces externos

Los enlaces siguen siendo importantes para la clasificación, especialmente en las búsquedas de Google. Cuando tenemos un subdominio móvil, algunos usuarios comienzan a vincularse a él en redes sociales y foros. Y la otra parte usa enlaces a la dirección del sitio principal. Como resultado, los enlaces tienen menos impacto en las búsquedas móviles y de escritorio que si tuviéramos un dominio.

Características de la promoción en las regiones.

Arriba, hablamos de dos formas de promoción regional de un adaptativo: usando un solo dominio y geo-subdominios. Consideremos también estas opciones para las versiones móviles.

En el primer caso, promocionamos el dominio principal y el subdominio móvil m.site.ru. Cada uno de ellos debe especificar las regiones a través del "Yandex.Directory". El problema es que a veces es imposible vincular la versión móvil del sitio a la sucursal por su cuenta. Tendrás que contactar con el soporte técnico, pero esto tampoco garantiza el resultado. No puede crear una organización separada para la versión móvil del sitio. Por lo tanto, si hay muchas ramas, la vinculación puede llevar mucho tiempo.

Generalmente excluimos la opción que usa subdominios como m.spb.site.ru o spb.m.site.ru. Aunque "Refrigerator.ru", por ejemplo, lo usa. Pero en este caso, debe configurar el direccionamiento entre todas las regiones de las versiones móvil y de escritorio, mantenerlas actualizadas, realizar un seguimiento de los cambios y monitorear los servicios para los webmasters. Este es un trabajo enorme y es poco probable que valga la pena.

Envío para comprobar "idoneidad móvil"

Si no envía la versión optimizada del sitio a Yandex.Webmaster para la prueba de idoneidad móvil, es posible que no aparezca en los resultados de búsqueda móvil. El problema también se aplica al adaptativo. Esto no siempre sucede, pero te recomiendo que sigas los mensajes del "Webmaster".

Fragmento de comunicación con el soporte técnico de Yandex sobre la asignación de una región a la versión móvil del sitio.

¿Por qué se utilizan las versiones móviles?

Las principales ventajas de las versiones móviles son, sin duda, la capacidad de crear una plantilla separada y una alta velocidad de carga. Además, es más fácil para los sitios más antiguos crear una versión móvil separada que implementar una adaptativa.

Además, muchos especialistas en SEO notaron un aumento en el tráfico de búsqueda después de la introducción de un sitio móvil en lugar de uno adaptable. Aunque no excluyo que la razón del crecimiento fue que hubo errores en su diseño adaptativo que afectaron negativamente al ranking.

Que opcion elegir

Si está desarrollando un sitio web desde cero o tiene un proyecto pequeño, eche un vistazo al diseño adaptable. Esta es una solución más económica y rápida. Sin embargo, es mejor planificar la funcionalidad de inmediato para que no tenga que ocultar parte del sitio para que no se muestre en dispositivos móviles en el futuro.

Si priorizas la experiencia del usuario, debes optar por la versión móvil. Se puede cambiar sin afectar el escritorio. Esto es importante si el sitio ocupa una posición de liderazgo en los resultados de búsqueda de escritorio en su segmento.

También puedes utilizar la tecnología RESS, pero recuerda que en este caso Google prefiere la versión móvil.

Extracto de la Guía de Google para indexar sitios con RESS

Cualquiera que sea la tecnología que elija, intente asegurarse de que el sitio y sus versiones estén correctamente indexados, cargados lo más rápido posible y mostrados en todos los dispositivos sin problemas.

Gracias a los especialistas en SEO

Todo el mundo habla de movilidad: desde pequeñas agencias de marketing hasta gigantes como Yandex y Google.

En este artículo, le diremos por qué la versión móvil del sitio está causando tanto revuelo, qué requisitos se deben imponer y si usted lo necesita personalmente.

Y de inmediato revelaré un gran secreto, luego de su implementación, comenzamos a recibir más pedidos. Todo. El resto está más lejos.

¿Para qué? ¿Para qué? ¿Para qué?

Puede hablar sobre la necesidad de adaptar el sitio para dispositivos móviles de diferentes formas.

Pero a nivel mundial, hay dos buenas razones a favor de crear una versión móvil del sitio: usuario y técnica.

Echemos un vistazo más de cerca a cada uno. Al mismo tiempo, como de costumbre, breve y al grano. Dejamos el agua fuera de las puertas.

La facilidad de uso

En 2016, los analistas de StatCounter fueron los primeros en notar que la proporción del tráfico móvil excedía la proporción del escritorio: 51,3% frente a 48,7.

Esto significa que, en promedio, cualquier sitio en Internet se visita con más frecuencia desde un teléfono que desde una computadora.

En Rusia, la imagen es casi la misma: la proporción de teléfonos inteligentes es mayor que la proporción de computadoras y otros dispositivos. Así lo demuestra la investigación de la empresa GfK Rus:

Estadísticas

Cada año, la brecha crece cada vez más; por ejemplo, en 2018 el crecimiento fue del 20%. Además, los analistas dicen que ese no es el límite.

Este diseño definitivamente debería hacerte pensar: cómo se ve tu sitio en la pantalla de los teléfonos inteligentes.

Y lo más probable es que la respuesta sea mala. Cuando abres un sitio normal no adaptado desde un teléfono móvil, la visualización se convierte en una misión: tienes que escalar páginas, apuntar a enlaces pequeños, esperar una carga larga.

Agregue a todo esto la prisa y muchas distracciones; después de todo, sentarse en el teléfono no es lo mismo que sentarse en una computadora, cuando el visitante está completamente concentrado en el monitor.

Los usuarios no buscarán la sección deseada durante mucho tiempo y comprenderán la interfaz: el sitio web de un competidor conveniente siempre está abierto en la siguiente pestaña.

Preferencias del motor de búsqueda

Google y Yandex se han estado ahogando en las versiones móviles durante mucho tiempo. Para ello, el primero lanzó un algoritmo especial Mobile-first Index, mediante el cual evalúa la conveniencia de un sitio móvil y, en función de esto, determina su posición en la búsqueda.

Para el segundo, el algoritmo salió más tarde, pero en términos de importancia está aproximadamente al mismo nivel. Se llama "Vladivostok".

También hay motivos indirectos que inciden en la situación de la versión móvil en la búsqueda. Entre otros factores, los motores de búsqueda también tienen en cuenta características de comportamiento.

Se trata de cuánto tiempo pasan los visitantes en el sitio, cuántas páginas abren, qué tan activamente hacen clic en los botones y conmutadores.

Si un usuario pasa de un teléfono móvil a un sitio de escritorio normal, no permanecerá allí durante mucho tiempo.

Esto significa que las características de comportamiento se deteriorarán. Como resultado, se encuentra en las últimas páginas deshabitadas de Yandex y Google.

¿Aún no te hemos convencido? Luego, compruebe usted mismo si necesita una versión móvil o, más bien, desde qué dispositivos llegan los visitantes a su sitio.

Puede hacerlo en Google Analytics en el informe "Audiencia -> Móvil -> Visión general". Si es así, vaya a "Informes -> Tecnologías -> Dispositivos".

Analítica

Si ve que hay más del 15% de teléfonos inteligentes, entonces esta es una llamada de atención para usted: solo necesita optimizar su sitio para teléfonos móviles. Por lo tanto, averigüemos qué formas hay en general para hacer esto.

Importante. Esta situación no se observa en todos. Y en algunas zonas, el uso de la versión móvil está prohibido, por extraño que suene.

tipos de versiones móviles

La mayoría de los sitios y tiendas en línea con los que se ha encontrado utilizan uno de estos tres enfoques: diseño receptivo, sitio móvil independiente y visualización dinámica.

Como de costumbre, para tomar la decisión correcta, debe aprovechar sus tareas y capacidades.

1. Diseño receptivo

Técnicamente, este es un sitio, pero la estructura de la página se ajusta al tamaño del dispositivo.

En una versión simplificada, se ve así: para computadoras, abra todos los elementos del menú y cree productos en tres columnas.

Para las tabletas, mostramos solo la canasta y colocamos los productos en dos columnas; para teléfonos inteligentes: ocultamos todo en el botón de menú, colocamos los productos, uno para cada línea.

Diseño adaptable

La principal ventaja de esta capacidad de respuesta del sitio es que tanto la versión móvil como la de escritorio son el mismo sitio.

Esto significa que es suficiente realizar los cambios una vez, después de lo cual el sitio se adaptará a todas las pantallas automáticamente.

Puede agregar un artículo, cambiar la clasificación, un nuevo color de botones. Otras ventajas del adaptativo:

• Barato y simple: se desarrolla de forma relativamente rápida y económica, incluso puede implementar una adaptación en un sitio existente;
• Dirección de una página: conveniente para los usuarios y técnicamente correcta (menos problemas con la optimización del motor de búsqueda);
• Esto es lo que recomienda Google. En la página para desarrolladores, hay una recomendación oficial para usar un diseño receptivo. No hay argumentos específicos, pero este es el propio Google.

También hay desventajas del diseño receptivo. Aunque en relación con otras opciones, son bastante invisibles. Pero aún así, como dije, son:

• Un sitio con una gran funcionalidad es difícil de adaptar para teléfonos móviles. Será un inconveniente o tendrá que sacrificar algunas de las posibilidades;
• Carga lenta. ¿Recuerda que dijimos que se carga el mismo sitio tanto para teléfonos como para computadoras?

  Estas son imágenes pesadas, menús largos y el resto de la información. Para resolver el problema, algunos desarrolladores usan la compresión de páginas, pero también requieren solicitudes adicionales al servidor y, por lo tanto, tiempo;

• No se puede cambiar a la versión completa. Si pasa algo, el usuario no podrá cambiar a la versión de escritorio para aprovechar todas las posibilidades, porque el propio sitio decide qué versión mostrarle.

Sin embargo, el diseño receptivo es la versión móvil más popular en la web.

Es utilizado por muchos motores, diseñadores y, por cierto, estamos en algunos de ellos.

2. Versión móvil separada

En este caso, tendrá dos sitios diferentes, cada uno con su propia dirección, diseño y capacidades. Esta es la respuesta a la pregunta: "¿Cuál es la diferencia entre la versión móvil del sitio y la adaptable?"

El sitio en sí determina el tamaño de la pantalla del visitante y decide qué se mostrará: la versión móvil del sitio o la de escritorio.

La mayoría de las veces, es la versión móvil la que comienza en el enlace con la letra m (traducida como “móvil”).

Versión móvil separada

Este enfoque es conveniente porque no depende en absoluto de la versión de escritorio. Puede concentrarse completamente en la conveniencia de los usuarios móviles, dejar solo las funciones más básicas y tener en cuenta todas las pequeñas cosas en la usabilidad.

El diseño de la versión móvil será muy diferente al de escritorio. Definitivamente podrá mantener a un visitante distraído que probablemente esté empujando el autobús o mirando en un teléfono inteligente hasta que su jefe lo vea.

Todos los botones e interruptores se pueden hacer enormes para que se puedan presionar con el dedo con seguridad.

También hay otros argumentos para crear una versión móvil del sitio por separado: velocidad de carga rápida: en una versión separada, se cargan imágenes ligeras de calidad media y la página generalmente se recorta a elementos básicos.

Y también es posible cambiar a la versión completa del sitio si el visitante decide que las funciones móviles no son suficientes para él.

Para ser justos, una versión separada del sitio para dispositivos móviles también tiene desventajas:

• Diferentes direcciones de sitios para teléfonos móviles y computadoras de escritorio. Esto puede crear problemas de SEO: los motores de búsqueda ven dos sitios diferentes con el mismo contenido.

  Y rebajan posiciones por duplicación. Para solucionar el problema, deberá conectar recursos adicionales;

• Es inconveniente sentarse desde la tableta: en ella, los elementos están borrosos en toda la pantalla.

  Y para la versión de escritorio, la pantalla de la tableta no será lo suficientemente grande. Resulta que el visitante está en un callejón sin salida;

• Cuesta más. Aunque la versión móvil tiene una funcionalidad limitada, tenga en cuenta que este es un sitio nuevo que debe crearse desde cero.

  Por lo tanto, establezca un presupuesto por adelantado para el desarrollo de una versión móvil del sitio;

• Tiempo de gestión adicional. Hay dos sitios, necesita mantener el trabajo y monitorear la relevancia tanto aquí como aquí.

Como puede ver, hay muchas preocupaciones. Pero muchas grandes tiendas en línea eligen este método en particular, ya que cada acción incorrecta puede asustar a un cliente para que no realice una compra.

Si tiene las mismas ventas "peligrosas", también debe prestar atención al desarrollo de sitios de comercio electrónico.

Sitio web de la tienda online

3. Pantalla dinámica (RESS)

Y la tercera forma es una simbiosis de las dos opciones anteriores. Primero, el sitio detecta el dispositivo de los visitantes y, según el tamaño de la pantalla, abre la versión de escritorio, móvil o tableta.

Es decir, solo se carga la opción adecuada para un dispositivo en particular. Las computadoras son grandes y voluminosas, mientras que los teléfonos inteligentes son limitados pero livianos. El enfoque reduce en gran medida el tiempo de apertura.

La principal desventaja de RESS es que consume mucho tiempo y es costoso. Desarrollar una pantalla dinámica es como crear varios sitios diferentes desde cero.

Y la tecnología tampoco es perfecta. RESS es un instrumento relativamente joven, por lo que puede suceder que el dispositivo se detecte incorrectamente o no se detecte en absoluto.

Entre las figuras destacadas que utilizan RESS se incluye Google. En general, como noté, la tecnología no está habitada, y si tienes un presupuesto limitado o te estás quedando sin tiempo, es mejor no arriesgarte. Y presta atención a las dos opciones anteriores.

También existe el diseño fluido. Algunas personas piensan que se trata de una variante de un sitio móvil, pero no lo es.

Importante. Un diseño gomoso es solo cuando el sitio se muestra tan ordenadamente en el teléfono como en la computadora. Además, completamente sin cambios.

CRITERIOS DE IDEALIDAD

Ya hemos dicho que en la computadora, el usuario se concentra al máximo en lo que ve en la pantalla.

Casi nada compite por su atención. Ya sea que se trate de estar sentado frente a un teléfono inteligente: tareas paralelas, el camino, notificaciones, llamadas, personas alrededor. Esto debe tenerse en cuenta en primer lugar al desarrollar.

Por lo tanto, no importa qué enfoque elija, debe cumplir con ciertas reglas del sitio para dispositivos móviles. Éstos son los más importantes:

1. Texto grande oscuro sobre un fondo claro. Es mejor diseñar todos los textos de acuerdo con los clásicos: fuente negra sobre un respaldo blanco.
2. Formas cortas. Deje una solicitud, programe una cita, realice una compra: sea lo que sea que ingrese el usuario, debe solicitar un mínimo de datos, que es suficiente para el primer contacto.

   Los formularios largos ahuyentan en principio, por no hablar de los visitantes móviles.

3. Grandes elementos en los que se puede hacer clic. El visitante no debe apuntar y atrapar botones e interruptores. Es mejor hacer que todos los elementos interactivos sean grandes; intente pincharlos usted mismo.

   Apple y Microsoft recomiendan apuntar a 44 por 44 píxeles. El umbral mínimo es 24x24, pero este es un último recurso.

4. Velocidad de carga del sitio web. No hay estándares específicos, pero siempre debes esforzarte por alcanzar el ideal.

   Hay un patrón general: cada segundo que se tarda en cargar una página reduce proporcionalmente la conversión a ventas.

   Puede consultar la versión móvil del sitio para conocer la velocidad de carga en servicios especiales, sobre los cuales se detalla un poco más abajo.

5. El tipo de formulario especificado. Al redactar los términos de referencia, asegúrese de indicar que al completar el teléfono, solo se debe mostrar el teclado numérico.

   Lo mismo ocurre con las contraseñas, el correo electrónico y otros campos. Si está desarrollando el sitio usted mismo, no dude en establecer el tipo apropiado para cada formulario.

6. Contactos en los que se puede hacer clic. Al igual que con los formularios, la información de contacto también tiene un tipo especial de enlace.

   Presionamos en el teléfono: se abre la marcación del número, en el correo, el programa de correo. Los usuarios definitivamente sacarán los contactos por hábito.

7. Información en una columna. Sin desplazamiento horizontal o fotos de varias columnas en una pantalla.

   Incluso los buques insignia más geniales no tienen una pantalla grande para eso. El texto en una columna es más fácil de leer y en fotografías grandes se pueden ver todos los detalles.

Truco de vida. Si solo necesita información completa sobre el cliente (para la entrega, por ejemplo), divida el proceso de completar la solicitud en varios pasos.

En el primer paso, solicite el nombre y el número, y la dirección y los detalles a continuación. Incluso si el usuario es demasiado vago y no completa el formulario hasta el final, tendrá contactos para presionar.

Forma de captura

Control de movilidad

El mejor experto que le dirá si su sitio es conveniente es su visitante. Realice una pequeña prueba reflexiva de su versión móvil.

Elija del entorno el que mejor se adapte a la descripción de su potencial comprador: por edad, profesión, intereses.

Pídale a un voluntario que haga un pedido; déjelo hacer todo el recorrido del cliente. Simplemente no interfiera ni corrija.

Deje que todo sea lo más realista posible: no se sentará al lado de cada visitante y explicará dónde hacer clic.

El sujeto debe comentar en voz alta cualquier dificultad o confusión.

Y sigues jugando al espía: analiza las acciones y toma notas en silencio en tu cuaderno. Solo puede ayudar como último recurso, si el voluntario se encuentra en una situación completamente sin salida.

Verificación técnica

Cuando esté convencido de que todos los elementos están en su lugar y que la interfaz es clara y predecible, pase al aspecto técnico.

Ejecute el sitio a través de diferentes servicios para recopilar errores y comentarios. Si puede, corríjalo usted mismo, no, sabrá qué escribir en el TOR para el programador.

Consola de búsqueda de Google es un servicio oficial de Google. Él mostrará cómo se ve el sitio en la pantalla promedio de un teléfono inteligente y dará recomendaciones para mejorar.

¿Recuerdas cuando hablamos sobre el algoritmo de índice móvil primero? El servicio se basa simplemente en su trabajo, así que no descuide este punto.

Consola de búsqueda de Google

Webmaster de Yandex- un servicio similar de Yandex. Antes de marcar aquí, debe agregar el sitio al panel del Webmaster y confirmar los derechos (cargue un pequeño archivo emitido).

Solo entonces puede utilizar el servicio yendo a "Herramientas -> Comprobación de páginas móviles". La cosa también es útil, con recomendaciones y comentarios.

Webmaster de Yandex

Comprobando desde la búsqueda de Bing. Sí, también existe un motor de búsqueda de este tipo. Deja que lo utilicen muy pocas personas, pero ahora no las necesitas.

El servicio puede ver errores a los que los dos anteriores no prestarán atención. Bueno, como dicen, no empeorará.

Comprobando desde Bing Search

Revisión visual

Después de las comprobaciones técnicas, pase a lo visual. Por supuesto, puede consultar el sitio desde su teléfono, pero sus visitantes tienen diferentes dispositivos, desde buques insignia de pantalla ancha hasta teléfonos inteligentes económicos.

Para realizar un seguimiento de todos, utilice los servicios para mostrar el sitio en diferentes pantallas. Éstos son algunos de ellos:

responsinator.com: muestra todos los dispositivos populares a la vez en una página. Hay diez de ellos en el servicio: Pixel 2 (y Androids en general), iPhones y iPads.

responsinator.com

iloveadaptive.com: puede elegir qué plataformas mostrar a la vez sin mezclar diferentes dispositivos.

De las ventajas adicionales: en la esquina superior derecha hay indicadores básicos de la velocidad de carga de la página.

iloveadaptive.com

quirktools.com: muestra solo un dispositivo a la vez, pero qué elección. Todas las pantallas se dividen en grupos: teléfonos inteligentes modernos, teléfonos con botones, computadoras y televisores.

Arriba: una práctica regla con tamaño de pantalla en píxeles y funciones adicionales para rotación y desplazamiento.

quirktools.com

Hay una trampa en los servicios: no importa cuánto los pruebe, no le brindarán una pantalla completa.

Debido a las diferentes plataformas, tecnologías y enfoques de desarrollo, la imagen en el servicio y en un teléfono real puede diferir: hay más píxeles, menos píxeles.

En general, esto no afecta mucho a la calidad de la movilidad, pero es mejor tenerlo en cuenta.

Por cierto. Puede averiguar exactamente con qué tamaño de pantalla llegan los visitantes en la misma métrica. Las estadísticas se encuentran en "Informes estándar -> Tecnologías -> Resoluciones de pantalla".

Brevemente sobre lo principal

Entonces, si toma la versión móvil, primero elija el método apropiado y luego asegúrese de que el desarrollador no haga trampa.

Pero antes de todo eso, haz una buena. Después de todo, una cosa es que todo se muestre bien y otra cosa que todo se venda. Y para esto, solo la parte técnica no es suficiente.

Y además, es una pena que estés pensando en la versión móvil en este momento. Ya pasaron los tiempos en los que decían que esto es muy relevante, y ha llegado la revolución móvil.

Hoy en día, la adaptación de sitios web para teléfonos inteligentes es la función predeterminada. Nuestro asesoramiento de expertos para usted: deje de lado las dudas y póngase manos a la obra.

Esta es una versión adicional simplificada del sitio, generalmente ubicada en un subdominio con el prefijo "m" (por ejemplo, m. Sitio).

Como puede ver en la imagen, la versión para teléfonos también se abre en las tabletas y se estira en ancho, porque la tableta es prácticamente un teléfono inteligente muy, muy ancho 🙂

Externa y estilísticamente, por supuesto, se puede hacer como el sitio principal (para que no haya sensación de estar en alguna página extraña): los mismos colores, fuentes, elementos. Pero la estructura puede ser radicalmente diferente, y la mayoría de las veces lo es. Es poco probable que alguien elija un apartamento o recoja un automóvil por sí mismo a través del teléfono, o solicite un préstamo bancario. Es un inconveniente, la pantalla es pequeña (en comparación con una computadora portátil o computadora). Pero encontrar los cajeros automáticos más cercanos o la dirección de una pizzería es lo contrario. Por lo tanto, las versiones móviles se simplifican enormemente, sin calculadoras complejas, enormes tablas de comparación para dos o más productos similares. Eliminan todo lo más difícil y simplifican el acceso a contactos, horarios de trabajo, etc.

Ventajas

• Dado que esta es una versión adicional del sitio, se carga por separado (es decir, el sitio principal no se carga). Y lo repito una vez más: por regla general, está muy simplificado. Por lo tanto, se carga rápidamente de forma relativamente adaptativa.
• Mantener la versión móvil es bastante sencillo: los cambios y mejoras no afectan a los ordenadores.

Defectos

• Yo, como diseñador, expresaré inmediatamente mi "hada" sobre las tabletas: se ven terribles en la versión extendida para teléfonos inteligentes. No, bueno, por supuesto, puedes usarlo. Pero la adaptación en este sentido se ha alejado mucho.
• Todo esto es extremadamente inconveniente para la optimización SEO. Dos direcciones, el sitio principal y la versión móvil, significa que el contenido se duplicará.