Diseño web adaptativo - Responsive designLa presencia de multitud de dispositivos móviles, los smartphone y tablets, ha ocasionado una necesidad urgente de adaptar el diseño web y sus contenidos a las resoluciones y limitaciones propias de los móviles de última generación.

Además hasta ahora, nos encontramos con el problema de tener que generar diferentes webs para diferentes terminales y la de actualizar todos ellos de un modo continuado.

Ante esta situación y problemática, nace un nuevo concepto de diseño web llamado: Diseño Web Adaptativo o Responsive Web Design. Es decir, un diseño único que se adapta de la mejor forma posible a todos los dispositivos.

Con la aparición de los dispositivos móviles y la mejora constante en las comunicaciones, el consumo de internet fuera de casa se hace una forma habitual. Casos como: mientras esperamos en el metro, empezar a consultar el periódico, cuando vamos a comprar a una tienda online, consultar el precio del artículo por internet mientras lo tenemos justo delante, en la misma tienda, etc … son gestos casi ya cotidianos y realmente útiles para contrastar la información y asegurarnos, por ejemplo ante una decisión de compra.

Para ello, con carácter general, se suele emplear una estructura de columnas de modo que según el dispositivo que estemos empleando: PC, tablet o móvil, mostrará un mayor o menor número de columnas propiciando la mejor lectura de sus contenidos.
Así pues vamos a ver algunas ventajas e inconvenientes del Diseño adaptativo o Responsive design.
Diseño web adaptativo - Responsive design
VENTAJAS:
1.- Único punto de actualización de contenidos: solamente hay que actualizar una web, no 2 o 3 versiones diferentes. Al hacer una modificación o actualización en tu sitio web a nivel diseño, nuevo menú o cambio de colores, este se verá reflejado inmediatamente en cada una de las plantillas del diseño adaptativo que se haya desarrollado.
2.- Mejora la imagen de la empresa: mostrando en todo momento la web de un modo correcto, trasmitiendo su identidad gráfica de un modo correcto.
3.- Mejora en el SEO: con el sistema de Diseño Adaptativo solo habrá una URL para cada página. Si hacemos redirecciones a subdominios tipo m.misitio.com, como hasta ahora, perderemos ese nivel de optimización.
4.- Mejor usabilidad: maximiza la experiencia de usuario con una gran facilidad de uso de tu página web. No es lo mismo clickar con el ratón un enlace que con un dedo, y de esta manera lo impulsamos.
5.- Sugerencia de Google: Google Developer dijo aquello de “Google recomienda a los webmasters que siguen las mejores prácticas de diseño web con Responsive Design”.
Diseño web adaptativo - Responsive design

 

INCONVENIENTES:
1.- Limita la posibilidades de diseño: para casos en el que el diseño, animaciones, video, etc … sea clave para nuestra comunicación web, nos vamos a encontrar limitación en cuanto a plugins, apis … que podremos emplear.
2.- Limitaciones en cuanto a procesadores y hardware de los terminales: con mayor frecuencia los procesadores y hardware de los dispositivos distintos del PC son menos potentes.
Por ejemplo en el tiempo de carga la teoría dice que las imágenes deben ser optimizadas para dispositivos móviles, pero la realidad es que normalmente se hace un escalado, por lo que una imagen grande de la versión PC simplemente se reescala para el tablet o móvil manteniendo el peso.
3.- Cantidad de contenido a mostrar y jerarquización: necesariamente tendremos que encontrar un punto medio en cuanto a la cantidad de información a mostrar, no podremos extendernos excesivamente  si queremos que sea agradable de ver en un terminal móvil, ni podremos ser excesivamente escuetos si queremos informar y aportar información al cliente potencial. Además deberemos jerarquizarlo de modo que en los dispositivos móviles encontremos la información más relevante al principio.
4.-  El precio: puede resultar complicado encontrar webs con diseño responsive al mismo precio que una web normal.
Bueno, espero que con todo lo que os he explicado os haya quedado más claro lo que es el Diseño Responsive para el diseño web, y en que casos deberíamos utilizar este diseño adaptativo.
Si deseáis crear vuestra web con Virtual Web Estudio, estoy a vuestra disposición en www.virtualwebestudio.com.