¿Como creamos un sitio web “mobile-friendly” o flexible?

Google, el principal “buscador” de la Internet había anunciado que desde el pasado 21 de abril de 2015 haría cambios en los resultados de búsqueda para dar prioridad a los sitios web “mobile-friendly” o amigable para los dispositivos móviles. ¿Qué significa esto? TechCrunch publicó un estudio donde el 40% de los sitios web de las principales empresas “Fortune 500” serán afectadas por esta actualización de google.

Anteriormente les había publicado un artículo sobre la importancia de un sitio web responsive. El anuncio de google y cambios efectivos son una muestra.

Desde hace más de dos años se viene hablando de responsive como algo muy impactante deebido al auge de acceder a la internet por medio de los teléfonos celulares. Ya para finales del 2014 se conocía el que más del 60% de los usuarios de internet aceden a este por medio de al menos un dispositivo móvil.

“En los EE.UU., el 94% de las personas con smartphones buscan información local desde los teléfonos. Curiosamente, el 77% de las búsquedas en móviles se hacen desde casa o desde el trabajo, donde normalmente hay computadores personales.” – Google

Ahora, ¿que es un sitio “mobile-friendly”?, según Google, “son versiones optimizadas para móviles que se pueden leer bien y son fáciles de utilizar”.

¿Como creamos un sitio web “mobile-friendly” o flexible?

Lo primero es entender que un sitio “mobile-friendly” no es solo poner la instrucción de cabecera para el viewport:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Es que la estructura esté preparada para ajsutar el contenido en bloques que permitan una fácil lectura, ajuste de texto e imágenes, y más importante aún; saber cuando hacer un sitio “mobile-friendly” o reponsive y cuando crear una estructura independiente para dispositivos móviles.

Para crear un sitio “mobile-friendly”  o “responsive” se debe pensar en porcientos o dimensiones mayor y menor y no en tamaños fijos, es decir, si vamos a crear un bloque o div no indicar explicitamente su ancho o width digamos:

div { width: 960px }

Sino, más bien indicar su ancho mayor:

div { max-width: 960px; margin: 0 auto; }

De esta forma permitimos que el bloque asuma tamaños menores a 970px según el dispositivo y que no pase de 970px en dispositivos con resoluciones mayor a 800px como algunas tablets y, claro, laptop y desktop.

Google provee una excelente guía para móbiles que te introduce paso a paso, con ejemplos, como hacer tu próximo proyecto “mobile-friendly”.

Para los ya conocedores de la codificación “responsive” o flexible, existen librerías que facilitan el proceso de creación de la estructura, o “frameworks” que nos ayudan a ahorrar tiempo. Aquí algunas de estas librerías o “frameworks” que te pueden ayudar en tu próximo proyecto:

1. Twitter Bootstrap
2. Foundation
3. Skeleton
4. HTML5 Boilerplate
5. Less Framework

Google, también provee una herramienta para probar si tu sitio web es “mobile-friendly”: Mobile-Friendly Test y si el mismo está listo para estos cambios en los resultados de búsqueda.

Espero les sea útil este artículo.