Después de que millones de páginas web fueran penalizadas el 21 abril en Google de 2015, son muchos los usuarios que se han interesado por crear una versión móvil de su web. Como descubrirás en las siguientes líneas, adaptar un site a todos los dispositivos es un proceso sencillo pero delicado, que requiere conocer una serie de prácticas y procedimientos avanzados. ¿Te animas a descubrirlos?

¿Sabías que en 2020 el 92% del tráfico web procederá de smartphones? Este porcentaje tan desorbitado de Cisco nos ayuda a entender por qué miles y miles de sites están adaptando su web para móviles en este momento. ¿Todavía no dispones de esta versión de tu negocio online?

Cómo crear una versión móvil de mi web

A la hora de ‘responsivizar’ una página web, dos son las posibilidades para lograrlo: lanzar una versión paralela al site o bien crear desde cero el site adaptando los códigos a todos los dispositivos. Dado que la mayoría de los interesados dispondrán de una página web que deseen hacer responsiva, este paso a paso se centra en la primera metodología:

Registra un subdominio o instala un nuevo CMS en el dominio existente

Uno de los primeros pasos para crear una versión móvil de tu web es determinar si se utilizará, para alojar los códigos CSS y HTML correspondientes, un subdominio (‘www.m.tuweb.com’) o bien una subcarpeta (‘www.tuweb.com/movil/’ o ‘www.tuweb.com/m/’ ). En determinados navegadores, YouTube muestra la siguiente dirección: ‘https://m.youtube.com’, si bien pocos llegan a reparar en la ‘m’ que da forma a su subdominio.

Utiliza media query específica para móviles

A continuación, deberemos adaptar los códigos correspondientes de la plantilla y del material audiovisual de la página web en cuestión, empleando los media query. En los códigos CSS deben figurar de forma similar a este ejemplo:

@media screen and (max-width:320px) {

  /* Aquí correspondería el código CSS para pantallas de 320px */

}

Gracias a este código, la anchura de la imagen de un post limita su extensión al tamaño del dispositivo, en lugar de salirse de la página o quedar descentralizada. El uso de estos código resulta indispensable para lograr que los textos, iconos y otros elementos aparezcan en su lugar, de forma que el navegante disfrute de una óptima navegación.

Simplifica los elementos y elimina los innecesarios

Sin embargo, no todos los elementos deben ser adaptados. Es recomendable que algunos, como el menú de la página, se presenten bajo otra forma, como el famoso hamburger menu. De esta manera, evitaremos la saturación de elementos y conseguiremos una óptima velocidad de carga. Otro tanto puede decirse de los pop-up o ventajas emergentes, válidas en las versiones de escritorio pero que conviene eliminar en la responsiva. Sin lugar a dudas, un paso a seguir en la creación de la versión móvil de una web.

Haz test y soluciona posibles errores

Por último, deberemos comprobar si nuestra nueva y flamante versión móvil se muestra como debería o si, por el contrario, algunos gráficos y elementos siguen lastrando la velocidad de carga o resultan molestos para el usuario. Google y su Mobile-Friendly Test te serán de gran utilidad para esta tarea, aunque existen diversas herramientas para esta tarea.

Mobile-first, el diseño web para móviles por excelencia

Como hemos mencionado, otra forma de convertir una página web a móvil es comenzar desde 0 partiendo del concepto mobile-first, es decir, partir de la versión para smartphones y adaptar los códigos a la versión de escritorio. Aunque pueda sorprender, los profesionales del diseño web avalan esta metodología como la más eficaz.

Acometer un diseño web priorizando a los usuarios de móvil requiere una gran planificación, pero garantiza un mejor resultado final, optimizando aspectos como la funcionalidad o la velocidad de carga. Naturalmente, este enfoque debe ser descartado por aquellas empresas que ya dispongan de una página web, pudiendo aprovechar una actualización de su diseño para poner en práctica este enfoque.

Si bien es cierto que existen numerosas herramientas online que pueden simplificar este proceso (Mobify, Wirenode, Onbile o Winksite, por citar los más representativos), sus efectos a largo plazo pueden ser fatales. Lo mismo que las herramientas de diseño web gratuitas no son recomendables, estos recursos están lejos de ser la mejor solución, por lo que si deseas ‘responsivizar’ su espacio web, sigue nuestro step-by-step y obtendrás resultados increíbles.