Responsive y Mobile Friendly

En estos días surgió el tema de Mobile Friendly y Responsive design como conversación recurrente en el proyecto en que trabajo y tengo la impresión que no todos entienden a que se refieren estos temas. Aquí va mi explicación.

Un sitio mobile friendly es aquel que está hecho para verse de la misma manera en todos los dispositivos sin importar su tamaño o resolución. El layout no cambia, las imágenes solo se hacen más pequeñas o grandes, el tamaño de letra es siempre el mismo, etc. Se les llama mobile friendly por que el sitio completo escala con el cambio de resolución y es posible verlo completo en un móvil, pero casi nunca son usables en resoluciones pequeñas. Parece que en estos tiempo de mobiles con pantallas de 4" y monitores de 42" esto no tiene mucho sentido, pero la verdad es que aún se utiliza, aunque no son nada comunes.

Por otro lado un sitio responsive es uno pensado para verse, funcionar y adaptarse correctamente a dispositivos de diferentes tamaños y resoluciones. Esto implica que el layout cambie cuando el tamaño de pantalla o resolución cambian, que las imágenes se adapten, que el tamaño de las fuentes varíe, etc. Este tipo de diseño requiere más trabajo y es el más común para un website actual

Una imagen vale más que mil palabras, aquí va una. A la izquierda un website mobile friendly visto en desktop y en un móvil, a la derecha el mismo sitio con diseño responsive. En la imagen resaltan el hecho que el mobile friendly es incorrecto y en la mayoría de los casos es verdad.

Ojalá este resumen de la diferencia entre mobile friendly y responsive design les ayude #HappyCoding