Responsive Web Design

Responsive Web Design

Publicado Por | 25 marzo , 2013 | Blog Adrenalina, Responsive, SEO, SEO Móvil | 4 Comments

Definiendo de una forma sencilla el “responsive web design”, “responsive design”  o “Diseño Adaptativo” se trata de un conjunto de técnicas, tanto de diseño como de programación HTML para que un determinado sitio web se ajuste visualmente tanto al ancho de pantalla como al tamaño de las fuentes y botones.

No es algo muy nuevo, de hecho fue una idea que surgió en el 2008, pero gracias al HTML5 y sobre todo al CSS3, las soluciones se han hecho mucho más simples y estándares.

Antes que adoptara el nombre Responsive Design, ya existían diseños adaptables, donde se utilizaban las mismas grillas que ahora para ajustar porcentualmente las 10, 12 o 20 columnas.

 

Diseño para móviles

Evidentemente, en los últimos meses el responsive design ha dado un salto cuantitativo en su implementación, motivado principalmente por el uso de dispositivos móviles y tabletas.

Una de las ventajas fundamentales es que, aunque hay que tener en cuenta los diferentes dispositivos en la etapa de diseño de un sitio, luego el desarrollo y el mantenimiento es único, sin necesidad de controlar distintas versiones de una misma web, u otras aplicaciones satélites.

Este tipo de diseño de aplicaciones web, simplifica la gestión del diseño y programación tanto en el inicio de un proyecto como en el mantenimiento y cambios futuros.

Gracias a Responsive Design, uno de los puntos fuertes es que el equipo de desarrollo “front end” puede ser el mismo para la aplicación de escritorio como para la del móvil, ahorrando costes y sobre todo la ventaja de no tener la necesidad de gestionar distintos perfiles de programadores.

 

Mejorando el SEO

Un diseño único implica URL únicas, lo cual es muy beneficioso para el SEO. Al menos esto es el resultado directo de unificar un sitio web, pero luego existen docenas de mejoras SEO que un Responsive Design permite lograr frente a otro tipo de diseños más tradicionales.

 

No todo lo que brilla es oro

 Implementar Responsive Design tiene algunos inconvenientes, aunque muchos consultores lo vendan como la única solución, la verdad es que no lo es. Lo que se gana por un lado, se pierde por otro, como todas las soluciones hay que valorar que se está dispuesto a sacrificar por tener un diseño único.

 Lo primero que muchos consultores utilizan como instrumento de venta es la usabilidad y la mejora de la conversión. No nos engañemos, no por usar Responsive Design mejorará la conversión de tu sitio. Justamente esto depende de otros factores, que Responsive Design puede ayudar a resolverlos, pero no es la solución misma.

Otro punto fundamental, aunque dependerá en parte de que tanto se quiera ajustar y optimizar el sitio, es que el peso de una web es igual para la visualización en un dispositivo móvil como en un PC. Ya… algunas imágenes no se cargarán y otras serán más livianas, pero el coste por parte del servidor y el peso de la página web en código HTML, CSS y JS será prácticamente el mismo.

 

Responsive Web Design

 

Construir un sitio con Responsive Web Design

 Los desarrolladores web muchas veces creen que pueden con todo, y seguramente sea verdad, pero se olvidan una variable en la ecuación: el tiempo.

Siempre es atractivo hacer cosas desde cero, pero utilizar plantillas o frameworks da un empujón muy fuerte al inicio de un proyecto. Por ejemplo Twitter Bootstrap es un ejemplo de ello, brindando un abanico de opciones que superan la necesidad de la mayoría de los sitios web.

Identifica los patrones de tus páginas y diseña en función de lo que quieres mostrar, a ser posible en al menos 3 tamaños de pantalla, para móvil, tableta y escritorio.

Esto hará que puedas estimar más fácilmente los costes del diseño y el mantenimiento, desde una simple landing a una portal de servicios, y sobre todo los mockups de tu aplicación, y alinear a todo el equipo.

Intenta diseñar con CSS, y tamaños de fuente relativas. Recuerda que existen dispositivos que tienen resoluciones mayores, por ejemplo Apple Retina Display, donde utiliza prácticamente el doble de pixeles por pulgada. Esto hace que las imágenes se pixelen, o que tengas que usar distintas versiones de una foto según el dispositivo.

Si la imagen que tienes que mostrar es de un producto no tienes muchas alternativas, pero si es parte del diseño, valora si es posible reemplazarla por algo de código CSS.

Si estás migrando de un diseño antiguo, puedes valorar el hecho que no es necesario cambiar toda la maquetación de golpe, y que es posible hacerlo escalonadamente primero por la plantilla base y luego página a página. Esto ayuda a que no tengas que dedicar todos los recursos a este tipo de cambios.

 

Cuando desees optimizar el sitio para ciertos dispositivos, podrás hacerlo detectando el tipo de “user agent” y presentar cambios o alternativas a la hora de mostrar la información.

Este tipo de trucos hace que no desperdicies costes en el servidor de algo que al final el usuario no verá, junto a una mejora en velocidad de carga para el usuario.

Si lo que estás construyendo es un simple blog, cada vez más temas de WordPress utilizan el diseño web responsive o  Responsive Design, así que adelante y encuentra el que más se adapte a tus necesidades. Muchas veces durante el desarrollo de una aplicación en Android o Ios, nos podemos plantear la opción de una web responsive para penetrar en el mercado, y realizar un desarrollo posterior para conseguir una aplicación nativa.

Si te ha sido interesando este artículo, comparte, comenta, imprime y colorea 😉

Autor: Pol Martinez

Desarrollador Web PHP y apasionado de las metodologías ágiles y los estándares web.

  • Marketing Online Málaga

    Hola, Responsive Design ya no debe de ser un concepto sino un hecho, 4 de
    cada 10 visitas provienen de un dispositivo móvil y la primera parte para captar leads, vender o cualquiera que sea tu objetivo es que el usuario se quede en nuestra web y tenga una mejor experiencia de usuario, hace poco escribí algo sobre esto:
    http://www.impulsocreativo.es/blog/responsive-design-renovarse-o-morir/
    saludos.

Estudiamos y analizamos su negocio en profundidad, definimos objetivos y planteamos la estrategia de marketing más adecuada centrándonos en conseguir cada uno de los objetivos propuestos. Solicita Presupuesto Ahora

Uso de cookies

En este sitio web utilizamos cookies propias y de terceros para mejorar nuestros servicios, para que usted tenga la mejor experiencia de usuario y analizar su visita. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.