¿Qué es Responsive Web Design?

Si como sistema de gestión de contenidos (CMS) acabas de instalar, por ejemplo Joomla, tu siguiente paso sería descargar una plantilla Joomla ya creada para este CMS o bien diseñar tu una a tu propio gusto.

El caso es que en muchas de estas plantillas Joomla (las hay tanto gratuitas como de pago) habrás visto que pone lo de "Responsive Web Design (RWD)" y seguramente te estarás preguntando ¿Y esto que significa? Pues bien, con este artículo te lo vamos a resolver para que ya no tengas ninguna duda sobre lo que significa. Aunque antes de ello te recomendamos que le eches un vistazo al Top 10 Sites para Descargar Plantillas de Joomla GRATIS que publicamos ayer y en cuya primera posición puedes comprobar que la plantilla Purity III es "Fully Responsive".

A lo que vamos, si le echamos un vistazo a la Wikipedia para ver que es el Responsive Web Design puede que no nos enteremos de mucho si no entendemos la lengua de Shakespeare, así que lo mejor es buscar su significado en español. Lo cual nos deja Diseño Web Adaptativo.

Según la Wikipedia:

El diseño web adaptable o adaptativo, conocido por las siglas RWD del inglés Responsive Web Design, es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté utilizando para visualizarla. Hoy día las páginas web se visualizan en multitud de tipos de dispositivos como tabletas, teléfonos inteligentes, libros electrónicos, portátiles, PC, etcétera. Además, aún dentro de cada tipo, cada dispositivo tiene sus características concretas: tamaño de pantalla, resolución, potencia de CPU, capacidad de memoria, entre otras. Esta tecnología pretende que con un solo diseño web, se tenga una visualización adecuada en cualquier dispositivo.

A modo resumen de lo que cita la Wikipedia diremos pues que Responsive Web Design es la manera en la que está diseñada un site de forma que este pueda adaptarse a cualquier dispositivo, independientemente de su resolución, ya que por ejemplo tabletas, PCs o teléfonos móviles (smartphones) usan resoluciones muy diferentes unos de otros.

Como es de suponer tener que hacer varias versiones de una web para que esta encaje en según que dispositivo es muy costoso; por eso lo mejor es contar con un diseño o plantilla ya creada que sea compatible con el Responsive Web Design. Esto supone matar varios pájaros de un tiro; reduciendo costes, y lo más importante de todo que nuestra web pueda ser visualizada desde todo tipos de dispositivos.

La ventaja de tener un Diseño web Adaptativo es que la dirección web (URL) de nuestro site siempre será la misma con lo que sin duda conseguiremos un mejor posicionamiento web bajo los principales buscadores, ahorrándonos así ciertos problemas que suelen envolver los re-direccionamientos.

Las búsquedas a través de dispositivos móviles son diferentes a las que se pueden llevar a cabo desde un PC por lo que tener una versión móvil de tu site es bueno y con Responsive Web Design todavía mejor. Ten en cuenta que en cuanto más dispositivos pueda mostrarse correctamente tu web más visitas podrás recibir. De hecho, miles de webs son visitadas a diarios desde el teléfono móvil. Hagamos pues todo lo posible para adaptar la nuestra ¿no? Se puede optar por contratar un desarrollador o agencia que lo haga por nosotros, pero para nada una opción muy recomendada ya que puede resultar bastante cara teniendo en cuenta las especificaciones que deseemos. Para Joomla, por ejemplo, hay plantillas gratuitas que son Responsive Web Design como la que hemos puesto al principio del artículo (Purtity III).

Puede que te estés preguntando: "¿Cómo funciona el responsive web design?"

Te comentamos que básicamente se centra en que lugar de tener que crear un site especifico para cada dispositivo puedas crear solo uno usando CSS3 media queries y un layout con imágenes flexibles. Gracias a ello podrás conseguir que tu página web detecte desde qué clase de dispositivo está accediendo cada usuario y muestre la versión más optimizada para ese dispositivo en cuestión, reorganizando así los elementos de la página web e incluso "acortando" algunos de ellos, es decir, mostrando menos imágenes, menos textos, redistribuyendo las columnas (5, 4 o 3) etc ect. Por ejemplo, una web a resolución de PC (1028×768 px) tendría 5 columnas, para una tableta (800×600 píxeles) necesitaría 4 columnas, y en el caso de un teléfono móvil inteligente (smartphone) cuyo ancho suele ser entre 320 y 480 píxeles serían 3 columnas.

En Hostinet muchos de nuestros clientes usan la técnica de Responsive Design para la creación y el diseño de su propia página web. Están muy contentos de que su página web se pueda ver bajo cualquier dispositivo, independientemente de su resolución.

En Hostinet podemos ofrecerte siempre el mejor Hostig Joomla para tu proyecto a un precio increíble.