Importancia de la adaptación de sitios web para dispositivos móviles

[Negociador]

¿Por qué convertir un sitio web en responsivo?​

Antes de adentrarnos en los consejos de optimización de tu sitio web para la versión móvil, hablemos de la importancia del uso de dispositivos móviles en tus estrategias de comunicación, marketing y para alcanzar la mayor visibilidad de tu marca y producto.

¡Observa los siguientes datos!

• 98% de las personas tienen los medios necesarios para acceder a Internet móvil
• En 2018, el celular se convirtió en el dispositivo más utilizado para acceder a la red mundial de computadoras
• Muchas personas acceden a Internet exclusivamente a través del celular.

1- Presta atención al contenido​

Los sitios móviles tienen un formato muy diferente a los que se muestran en las computadoras, lo que significa que tu contenido es presentado de manera diferente, además de la forma de ingresar a ellos de manera diferente. Con estos cambios, una cosa es cierta: no todo el contenido que va a la web convencional debe estar presente en la versión móvil.

2- El diseño es muy importante y debe ser un punto de atención​

¿Alguna vez has abierto un sitio web antiguo en el celular y has encontrado una página totalmente distorsionada, desordenada y confusa? Esto es lo que sucede cuando no hay una adaptación de diseño para las pantallas de los dispositivos móviles.

Este tipo de dispositivo tiene pantallas verticales o incluso de medio cuadrado (como es el caso de las tablets). Para que la página web no se distorsione, es esencial tener un diseño responsivo.

3- La velocidad de carga marca la diferencia​

Los sitios web para móviles deben ser ligeros y cargarse rápido. El contenido no puede tardar en aparecer en la pantalla del smartphone, de lo contrario, existe una alta probabilidad de que los usuarios cierren la ventana de navegación en pocos segundos.

4- Evita el uso de flash​

Flash es un software que se utilizaba para crear contenido animado en la web hace muchos años. A pesar de haber sido muy popular, se está quedando en el camino y ya está en la lista de los formatos de archivo que los principales desarrolladores de dispositivos móviles evitan utilizar.

Flash todavía vive un poco en los juegos de navegador online (aquellos que se jugaban en páginas de Internet, sin necesidad de descargar), pero cada vez será más difícil encontrarlo.

5- Elimina los pop-ups de la versión móvil​

Los pop-ups ya son un poco molestos en los sitios web que visitamos en pantallas más grandes. Para dispositivos móviles, suelen ser mucho más incómodos porque la mecánica del clic es otra. En la medida de lo posible, evita al máximo migrar los pop-ups de tu sitio web convencional al celular.

6- Adapta elementos​

La mayoría de los comandos que se dan en los dispositivos móviles implican el uso de los pulgares. Dado este hecho, es importante pensar en adaptar funciones como barras de desplazamiento, menús y botones para que se pueda hacer clic en ellos sin ningún tipo de trabajo adicional.

7- Recuerda que el SEO para móviles es muy importante​

El SEO para el móvil también impacta la navegación. Es similar al SEO pensando desde las computadoras, pero tiene buenas diferencias. Esto hace necesario prestar especial atención al SEO de las páginas móviles, especialmente puntos como:

• Uso de tipografía adecuada
• Cuidado con los espacios negativos
• Analizar los patrones de búsqueda de Internet móvil (por ejemplo: las palabras claves suelen ser mucho más pequeñas).

8- Utiliza geolocalización​

Este consejo no se trata del rendimiento del sitio web, sino de la practicidad de uso y capacidad de obtener la atención una audiencia. En el móvil, el uso de la geolocalización es muy recomendable, especialmente para empresas y negocios.

Puedes recibir visitas en tu tienda, reservas para tu restaurante y mucho más, todo a través de una búsqueda orgánica basada en la ubicación.

Fuente: https://www.hostgator.mx/blog/como-adaptar-tu-sitio-web-para-moviles/

 

[Isaak-WEB]

Muy buen aporte! Te voy a lanzar una pregunta ya que tengo un problema con esto:
Como optimizar las imagenes para optimizar (valga la redundancia) el valor de “primera pintura de contenido” ?
Muchas gracias compañero

 

[sabogal]

Yo opté por diseñar el sitio desktop como si fuera móvil, así que no tengo sidebar ni otros elementos. La versiones desktop, movil y amp son exactamente las mismas.

PD. ¿Hay alguien que aún utilice contenido flas? Creí que había desaparecido esa tecnología.

 

[Negociador]

Muy buen aporte! Te voy a lanzar una pregunta ya que tengo un problema con esto:
Como optimizar las imagenes para optimizar (valga la redundancia) el valor de “primera pintura de contenido” ?
Muchas gracias compañero

Me imagino que te refieres a optimizar las imágenes que colocares en tu web. En mi caso utilizo imágenes PNG y primero le bajo el peso con un sitio web llamado TinyPNG, luego descargo la imagen con la mitad del peso la subo a mi web, dentro de esta tengo un plugin llamada Imagify que me optimiza y mejora la compresión de las imágenes. Con esto logro obtener la mayor calidad posible con el peso mas ligero de los archivos y asi no reduce el tiempo de carga de mi Web. Seguro otros usuarios tendrán otro método de optimización de imagen.

Yo opté por diseñar el sitio desktop como si fuera móvil, así que no tengo sidebar ni otros elementos. La versiones desktop, movil y amp son exactamente las mismas.

PD. ¿Hay alguien que aún utilice contenido flas? Creí que había desaparecido esa tecnología.

Dejame decirte que es una practica recomendada pensar en el diseño del movil primero y luego pensar en Desktop ya que el trafico movil actualmente esta siendo mayor que el trafico Desktop en ciertos tipo de sitio web.

 

[Isaak-WEB]

Me imagino que te refieres a optimizar las imágenes que colocares en tu web. En mi caso utilizo imágenes PNG y primero le bajo el peso con un sitio web llamado TinyPNG, luego descargo la imagen con la mitad del peso la subo a mi web, dentro de esta tengo un plugin llamada Imagify que me optimiza y mejora la compresión de las imágenes. Con esto logro obtener la mayor calidad posible con el peso mas ligero de los archivos y asi no reduce el tiempo de carga de mi Web. Seguro otros usuarios tendrán otro método de optimización de imagen.

A eso me refería! muchas gracias 🙂 Con cuantos Kb sueles subir las imagenes? Yo las estaba subiendo a unos 100kb de peso y pensaba que ya estaba optimizada sin hacer nada de este proceso que comentas.. Debería de pesar mucho menos la imagen?

 

[adolfohnz]

A eso me refería!

Te agrego un par de tips.
Si tu imagen lleva algún texto yo suelo usar .PNG, por lo general coloco una sobra o un trazo y en .PNG estos efectos se ve un poco más suaves, caso contrario si es solo imagen suelo usar JPG.
Para comprimir me encanta squoosh, he tenido mejores resultado, no suelo agregar algún plugin extra para seguir comprimiendo, aprovecho que uso un servidor LiteSpeed y con su plugin es más que suficiente, también habilito la opción para el formto .WebP, aunque cuando me gana la pereza simplemente desde Photoshop subo todo con formato .WebP.

 

[danicifu]

Buenas, muchas gracias por el post, no se si me podras realizar algún comentario. Tengo una web con el theme orbital y el rendimiento que tengo en la versión movil es bastante bajo. En la version de pc esta correctamente. Plugin para reduccion de imagen tengo el Smush. De cache tengo wp super cache.
Esta alojado en un VPS.

 

[ultracobra]

No me han funcionado los media queries que he usado para adaptar las páginas, y menos las imágenes. Si alguien sabe pero igual lo preguntaré directamente en el grupo.

Me sorprende que WordPress ofrezca ese tipo de herramientas responsive. Dudo que sean eficientes, pero me gustaría que me lo confirmaran.

 

[GatoCurioso]

Hoy en día dicen que si o si las imagenes deben estar guardadas en formato WebP. Yo hasta el momento solo uso jpg, este fin d semana le dare mas caña a mi web para mejorar esos aspectos de optimización.

el flash ya esta en el olvido, ahora con lo avanzado de css y su toque de javascript es posible lograr excelentes resultados.

 

[ultracobra]

Hoy en día dicen que si o si las imagenes deben estar guardadas en formato WebP. Yo hasta el momento solo uso jpg, este fin d semana le dare mas caña a mi web para mejorar esos aspectos de optimización.

el flash ya esta en el olvido, ahora con lo avanzado de css y su toque de javascript es posible lograr excelentes resultados.

Me pillé en CodePen un footer animado en forma de olas y todo se basa en una imagen de 100px x 10px de una ola dibujada muy simple y el efecto es fantástico. Las animaciones CSS son impresionantes. La que mencioné y otras ni siquiera tienen nada de javascript.