Hace tiempo que suena el concepto “Web adaptable” o “Responsive Design” en el marco del diseño y programación web. Y no es para menos.
Web adaptable de Snowball Studio
Esta nueva tendencia no sólo beneficia a algunos, sino que es parte de una mejora global para el diseñador, maquetador, programador, cliente… i ¡Google!
Para recordar de qué estamos hablando, el Responsive Design es el que se conoce como diseñar un solo website, adaptable a todos los dispositivos (smartphones, tablets…). Eso se hace utilizando los llamados @media-queries y trabajando des del CSS para conocer la anchura del dispositivo y aplicar el libro de estilo correspondiente.
¿Qué ventajas puede suponer esto para una empresa?
– Reducción de costes al desenvolver el sitio web. Es posible que el presupuesto de un website estándar y el de un que utilice este concepto varíe, pero nada comparado con lo que era anteriormente; programar de nuevo todo el website dependiendo si lo hacemos para smartphones, tablets… Comparamos horas de trabajo de hacer una sola web (diseño adaptable) o, por ejemplo, de hacer tres diferentes (ordenador, smartphones y tablets). ¡Ahora hacemos números!
– Visibilidad de tu web en todos los dispositivos, la accesibilidad de tu información es al abasto de todo el mundo y en cualquier momento.
– La actualización es directa y única, no tenemos que hacerlo con cada uno de los soportes (sólo un código para actualizar).
– Mejora la experiencia del usuario, tu prestigio aumentará.
Dejando de lado los beneficios observados des del punto de vista empresarial, tenemos una serie de valores técnicos que debemos considerar:
– La usabilidad del website mejora exponencialmente, haciendo la navegación mucho más atractiva, simple y, sobretodo, intuitiva.
– Desaparece la necesidad de hacer zoom para poder clicar los enlaces.
– Los límites del diseño los pone el propio diseñador, las combinaciones son infinitas.
Podríamos hacer una lista mucho más completa, vamos a hablar de la mejora que supone para el posicionamiento web: tu SEO se verá reforzado por una serie de factores:
– Hablamos de una única URL para todos los dispositivos, eso facilita la indexación de Google y sobretodo facilita la herramienta al Googlebot-Mobile. Recordad que tan sólo estamos utilizando un código HTML para todos los dispositivos. Eso es una gran ventaja.
– No puedo olvidarme de nuestros compañeros de juego predilectos y ya conocidos por todos, HTML5 y CSS3, las ventajas de los cuales son ya suficientemente conocidas. Sean nuestros mejores aliados para llevar a cabo una web actual, adaptable y que sea de buen ver para Google. El binomio HTML5-Responsive Design es una garantía de éxito, y si le añadimos su componente imprescindible CSS3, ya tenemos la receta perfecta.
– A parte de todo lo anterior, Google ya se pronunció al respecto, favoreciendo los sitios web que utilicen este diseño adaptativo. Y si lo dice Google, lo tendremos en consideración. 🙂
¿Podemos hablar de más ventajas del Responsive Design? Sí. Pero dejadme hacer un repaso a la actualidad y probablemente en otro post profundizaremos en aspectos más técnicos o completos de lo que supone su funcionamiento.
Hay posts que hablan de posibles inconvenientes y argumentan, por ejemplo, que una web que da mucha importancia a los elementos gráficos causa la ralentización de la navegación móvil. Y sí, así es claro que si le das la misma información puede llegar a ser desesperante que tu smartphone adapte una imagen de grandes dimensiones a tu dispositivo. Pero precisamente por eso se debe ser creativo y teniendo las herramientas a tu abasto se puede optar, por ejemplo, por esconder esta imagen o imágenes cuando se trate de smartphones o tablets. (Recordemos los @media-queries).
Siendo redundante: la buena implementación de nuestros diseños se basa en nuestra creatividad. Damos vida a nuevos websites atractivos y complementamos estas herramientas con las mismas o mejores, estrategias SEO. No podemos dejar nada por estudiar, todo suma.
Acabamos el artículo haciendo apología a la creatividad y a los diseñadores con ganas de innovar y crear sitios web interactivos, apasionantes y entretenidos. Informamos y entretenemos sin dejar de hacer las cosas bien para Google y para la comunidad. ¿Qué más queremos?
Estamos cambiando. Deberíamos dejar de lado los obsoletos estándares web que limitan las inquietudes a nuestros diseñadores y les deberíamos dar vía libre para crear sin ser contraproducentes. ¿Qué necesidad hay de hacer una web a un máximo de ancho de 960px si ya podemos hacerla a Full-Screen i, aún más, la puede ver todo el mundo en todos los dispositivos? Aún hay empresas que están estancadas en los menús convencionales y la navegación aburrida cuando podemos hacer de la experiencia de visualizar y testear webs, un hobby más.
El usuaria lo agradecerá. De hecho, nosotros lo agradecemos, y por eso acabamos este post dejando unos links de websites atractivos que, seguro, os tendrán entretenidos mientras hacéis un café con una taza que luzca: “We love design“.
¡A seguir creando!
*Pensad en reescalar la ventana del navegador a la medida que deseéis y disfrutad del Responsive Design.
M'agrada S'està carregant...