Porqué optimizar mi web para dispositivos móviles【Buenas prácticas de diseño web responsive】

Porqué optimizar mi web para dispositivos móviles【Buenas prácticas de diseño web responsive】

Porqué optimizar mi web para dispositivos móviles【Buenas prácticas de diseño web responsive】
[prom] ([por]) 1 voto

Un tema candente en el social media es, será necesario optimizar nuestra web para móviles, me han hecho la pregunta cientos de veces y he dados varias respuestas según mi experiencia.

Es por ello que he decidido hacer este post recopilatorio para hablar cada uno de los detalles acerca de optimizar nuestras web para dispositivos móviles.

Hay quienes comentan que los dispositivos móviles están cambiando nuestro patrón de consumo, nuestro smartphone va a todos lados con nosotros a diferencia de un computador.

Incluso hay países donde se dice que hay más dispositivos móviles que computadores.

Lectura recomendada:

Con nuestro sitio web optimizado para dispositivos móviles aseguras una experiencia de usuario óptima.

¿Quién así no querrá volver a consumir tu contenido?

Imagina que vas a un Hotel y te atienden de maravilla.

¿Querrás Volver?

Claro que si………..

¿Qué es optimización web para dispositivos móviles?


Son técnicas de diseño y desarrollo web con miras a hacer una buena estructura y contenido adaptable a este tipo de dispositivos con mirar a tener una mejor experiencia de usuario al navegar por el sitio web.

En términos más amigables es presentar el contenido en bloques de arriba hacia abajo,  para mayor detalle ve en la siguiente imagen de Google Developers cuál es el resultado de una optimización web para dispositivos móviles.

 

Que es optimización web para dispositivos móviles
Imagen de Google Developers – Creative Commons Attribution 3.0 License

El dispositivo que está marcado con una “x” te muestra to el contenido de una sola vez lo que se traduce que el mismo se muestre pequeño con lo que tendrás que pelliscar la pantalla para ver dicho contenido.

El dispositivo marcado con “check” muestra el contenido en bloque de arriba a hacia a abajo, con el cual te da la posibilidad de consumir el contenido con solo hacer scroll.

¿Es necesario? Optimizar la web para móviles


  • A media que pasa el tiempo consumimos más y más contenido a través de dispositivos móviles y esto tiene una explicación, solo en Venezuela para el 2017 (tercer trimestre) habían más de 25 Millones de suscriptores de telefonía móvil y se estima que cada habitante posee al menos un teléfono móvil.
  • Estas cifras representan lo siguiente, 86 suscriptores activos por cada 100 habitantes, es decir, más del 80% de los habitantes de Venezuela cuenta con una suscripción activa a un servicio Móvil.
  • En España para el 2017 los teléfonos móviles representaron los dispositivos más usados para conectarse a Internet, con más de un 94% de preferencia.
  • Y esto viene de una tendencia, no solo en Venezuela, cada vez más personas a nivel mundial usan su teléfono móvil para conectarse a Internet. Estas estadísticas la soportan un estudio donde se dice que más de el 51% del trafico web en el 2018 es móvil. ¿Esto quiere decir que la mitad de mis clientes potenciales utilizan un Móvil? SI…..
  • Otro estudio de Google nos comenta que en EE.UU. el 94% de las personas con teléfonos móviles hace una búsqueda de información local, donde el 77% se hacen desde el hogar o el trabajo. ¿Qué significan estas estadísticas? Bueno, que a pesar de tener un computador de escritorio tanto en la casa como en el trabajo, estas personas prefieren el smartphone.
  • Incluso hay estadísticas que 4 de cada 5 compradores en tiendas online lo hacen desde un smartphone.
  • Donde la resolución de pantalla más usada a nivel mundial que se encuentra entre 360×640 y 375×640 cuentan con una cuota de mercado de más del 27% y por supuestos pertenecen a un dispositivo móvil.
  • Por último y no menos importante, la Cuota de mercado a nivel mundial que conforman los dispositivos móviles, los computadores y las tabletas es de 52,95%, 43, 11% y 3,94% respectivamente, es decir hay más teléfonos móviles que computadores y tablets juntos.

Te dejo para que tú concluyas si es necesario o no tener nuestra web optimizada para dispositivos móviles.

Herramientas web para verificar si tu web es compatible con dispositivos móviles


Ya que ha quedado un poco más claro porqué debes optimizar la web al móvil, es importante saber si tu sitio web esta optimizado para ello he recopilado ciertas herramientas que te permites saber esto.

#1 Prueba de optimización para móviles de Google

Herramienta de prueba de optimización para móviles de Google

El mismísimo Google pone a tu disposición una herramienta sencilla pero poderosa para verificar si tu sitio web esta optimizado para móviles.

Solo debes colocar la url a verificar y presionas el botón “EJECUTAR PRUEBA”.

Veamos esta herramienta en acción con mi sitio web.

Herramienta de prueba de optimización para móviles de Google vencrea

Puedes acceder a esta herramienta aquí: https://search.google.com/test/mobile-friendly?hl=es

#2  Think with Google

Herramienta Think with de Google

Otra buena herramienta llamada Think with Google que busca medir la velocidad de carga de tu web en un móvil.

Con estas herramientas puedes verificar si tu sitio web tiene un tiempo de carga bueno bajo una conexión de una red telefónica bajo la tecnología 3G.

Para ello establece cuatro rango que caracterizan la conexión:

  1. Excelente: Hasta 3 Segundos.
  2. Bueno: de 3 hasta 5 segundos.
  3. Aceptable: de 5 hasta 8 segundos
  4. Deficiente: de 8 segundos en adelante.

Puedes acceder a esta herramienta aquí: https://testmysite.thinkwithgoogle.com

#3 PageSpeed Insights

Herramienta PageSpeed Insights de Google

Una más del poderoso Google, tenemos la archi conocida herramienta PageSpeed Insights que prueba una serie de características de tu página web, entre ellas la versión de escritorio y móvil.

Esta herramienta me gusta bastante ya que te entrega resultados de tu sitio web tanto en la versión de escritorio u móvil pero adicionalmente te genera dicho reporte con las mejoras y soluciones que debes implementar.

Puedes acceder a esta herramienta aquí: https://developers.google.com/speed/pagespeed/insights/?hl=es

#4 Am I Responsive?

Herramienta Am I Responsive

Es una herramienta web que te permite ver como tu página web se muestra en distintos dispositivos entre ellos los equipos móviles como tablets y smartphone.

Es una herramienta donde solo debes colocar la url y el mismo te indica si tu sitio web es Responsive.

Puedes acceder a esta herramienta aquí: http://ami.responsivedesign.is

#5 Herramientas para desarrolladores de Google Chrome

Herramienta para desarrolladores de Google Chrome

Otra herramienta que está incluida en el navegador Google Chrome y que fácilmente la puedes usar si tienes instalado este navegador, para ello solo debes dirigirte a la url que deseas verificar y presionar las teclas Ctrl + Mayús + I.

Esta herramienta es bastante sencilla, en donde por ejemplo puedes visualizar cómo se comporta tu web en distintas resoluciones de pantalla.

Con estas herramientas que te he indicado es suficiente para saber si tu sitio web esta optimizado para el móvil

Al final de este artículo está la sección de comentarios en el cual me puedes comentar como te fue con estas herramientas y si tienes alguna que uses y quieras incluir aquí.

Cómo adaptar mi página web al móvil – Técnicas recomendadas 


La respuesta para esto puede ser complicada o sencilla y todo dependerá del estado actual en el que este tu página web pero trataré de darte las opciones más usadas como abanico de posibilidades.

Lo primero que debes saber si tu web esta optimizada para el móvil y si has leído detalladamente el artículo anteriormente te deje unas herramientas que te permitirán saberlo.

#1 Diseño web Responsive

El diseño web responsive usa lo que conocemos como las “medias queries” para acomodar el sitio web en función a la pantalla donde se va a mostrar.

Un ejemplo de este código CSS para indicarle a nuestro navegador mostrar el contenido en una resolución 360 px de ancho es

@media screen y (max-width: 360px) { 
        .class { 
                   [estilos para esta clase aquí] 
   } 
}

Y para vincular una hoja de estilos por separado puedes colocar entre las etiquetas <head></head>

<link href="mobile.css" type="text/css" media="screen and (max-device-width: 360px)" rel="stylesheet"/>

Este tipo de técnica te permite tener una variedad de vistas dependiendo de los distintos tipos de resolución de pantalla de los dispositivos móviles desde los cuales se accede al contenido.

#2 Servicio dinámico

Este proceso consiste en dar una respuesta distinta con varios códigos HTML y CSS a través de la misma url pero que el mismo va a depender del agente de usuario que haga la solicitud.

Para esto tienes que hacer uso de plantillas html con CSS, para ello te recomiendo leer este un post bastante completo del blog de Luis Forgiarini: EJEMPLOS DE PAGINAS WEB EN HTML Y CSS + TUTORIAL DE EDICION

Dicho de otra manera en un servicio dinámico se envía un código distinto de HTML y CSS para cada dispositivo móvil y fijo y resoluciones de pantallas involucradas.

Un ejemplo del código HTTP Vary es

GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)

HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(... rest of HTTP response headers...)

#3 Url Separadas 

Otra bastante utilizada es tener dos sitios web por separado, es decir uno para computadores de escritorios y otra para el móvil.

Tiene la ventaja que puedes crear cierto contenido personalizado dependiendo del dispositivo que uses.

Uno de los inconvenientes de usar está práctica es que tienes dos url, es decir una para cada contenido distinta, donde normalmente la url de la versión móvil viene antecedida de la letra “m”.

Ejemplo: m.dominio.com (versión móvil)

Otra complicación notada que tiene este tipo de técnicas es que se genera contenido duplicado sino aplicas correctamente la etiqueta “rel=canonical”.

Cuál técnica de diseño web para adaptar mi site utilizo


Las tres técnicas que te di anteriormente son las que mayormente se usan en la actualidad, pero algunas de ellas tienen sus ventajas y desventajas.

Diseño web Responsive

¿La URL permanece invariable? = si

¿El código HTML permanece invariable? = si

Servicio dinámico

¿La URL permanece invariable? = si

¿El código HTML permanece invariable? = no

Url Separadas

¿La URL permanece invariable? = indudablemente no

¿El código HTML permanece invariable? = no

Entonces la respuesta es sencilla, la mejor técnica de diseño web es la responsive, hasta el mismo Google recomienda esta técnica.

Sabias que soy diseñador de páginas web Responsive y te la puedo hacer en tan solo 15 días, te puedo hacer una Página Web en WordPress Profesional y que la misma este adaptada al móvil.

De esta manera te olvidas de aplicar códigos innecesarios que te pueden complicar la vida.

También te enseño de manera gratuita a cómo a editarla para que no dependas de terceros. Tendrás un descuento de 10% en mi servicio de diseño de Página Web WordPress si la alojas en algunas de las empresas de Hosting que te dejo a continuación:

Cómo adaptar mi WordPress al móvil


Si usas la última versión de WordPress, esto no debe ser un problema, asegúrate que eso sea así y instalar cualquiera de estas plantillas que te pongo a disposición (pincha aquí: Mejores temas para WordPress Gratis y Premium – [Lista Top 2018 ]), yo por ejemplo uso la plantilla para WordPress GeneratePress y cómo puedes ver más arriba mi sitio web esta optimizado para el móvil sin necesidad de aplicar ningún  código.

En un par de clics puedes instalar un tema de WordPress y tener tu sitio web optimizado al móvil.

Si por alguna razón no te funciona con las plantillas WordPress que te recomendé, que lo dudo, o por qué no quieres cambiar de tema, pues en el mercado podrás conseguir varias opciones para adaptar tu web al móvil, entre ellos algunos plugins que debes instalar y son los que te mostraré a continuación:

#1 WP TOUCH

Pugin WordPress WPtouch optimizar al movil

Este plugin está recomendado incluso por Google para adaptar nuestra web al móvil. WPtouch es un plugin para adaptar al móvil WordPress agregando automáticamente un tema móvil simple y elegante para los visitantes móviles de su sitio web WordPress.

¿Qué otras opciones existen Raúl?

#2 WordPress Mobile Pack

O por el contrario puedes ir a la base de datos de plugins y buscar con la palabra clave adaptable o móvil.

#3 Plus para Joomla!

Si usas Joomla!, a partir de la versión 2.5 viene adaptada al móvil, sino has actualizado a esta versión o a una superior está dejando que tu sitio web no se adapta a las distintas resoluciones de pantallas.

Primero actualiza tu versión de Joomla! y luego instala algunas de estas plantillas web para Joomla! Responsive.

Buenas prácticas para adaptar tu web al móvil


Ya que sabes cómo optimizar tu web al móvil te haré un resumen de las buenas prácticas que debes tomar en cuenta para que tu sitio web este optimizado al móvil y apliques un buen SEO.

  1. No uses flash.
  2. Comprueba que el contenido como código CSS o JavaScript o a las imágenes no este bloqueadas
  3. Optimiza el peso de las imágenes.
  4. Indica a Google si existe una página para el móvil.
  5. Usa los CMS actualizados como WordPress y Joomla! e instala las mejores plantillas y temas actualizados.
  6. No uses pop-up en la versión móvil.

Debo adaptar mi web a dispositivos Móviles + Infografía

Ya culminando el grueso de esté artículo quiero hacerte un resumen con datos del 2017 y 2018 a través de una infografía con la importancia que tiene que nuestra este adaptada al móvil.

Infografía de como optimizar sitio web para móvil

Ya culminando


Ya terminando este pequeño artículo en donde aprendiste la importancia de optimizar nuestra web para el móvil y técnicas de cómo hacerlo, quiero que corras a partir de ahora a adaptar la tuya al móvil.

O si por el contrario estas apunto de hacer tu web utiliza CMS como WordPress o Joomla! que están perfectamente adaptados al diseño web Responsive.

La verdad es que no me había sentido tan contento de escribir un artículo y esté me hizo sentir así, ya que sé que te va a dar en la madre, básicamente por qué te planteo un tema clave para posicionar nuestra web en los buscadores.

¡Señores al día de hoy la web es móvil!

Espero tus comentarios y experiencia en la sección de comentarios acerca de este articulo y recuerda compartirlo en las redes sociales con amigos.

Derechos de imagen destacada: Vecteezy

Artículos relacionados