Qué es RWD (Responsive Web Design)?

Seguramente utilizas el móvil para ver contenidos de Internet. Esos contenidos también se pueden ver en el ordenador o incluso en una televisión con pantalla grande. Es decir, se pueden ver bien en muchos dispositivos que tienen diferentes tamaños de pantalla.

[spacer height=»15px»]

responsive-web-dedign-3w2

[spacer height=»15px»]

Responsive Web Design (RWD), es una técnica de diseño web desarrollada por Ethan Marcotte en el año 2010, que consiste en crear el sitio web a través de módulos flexibles y adaptables. Con determinadas instrucciones en el CSS, el diseñador puede crear diferentes versiones de la misma página que se mostrará según el dispositivo con el que se esté visualizando la web, ofreciendo al usuario el contenido ordenado de una u otra forma, dependiendo del tamaño de su pantalla.

Actualmente es fundamental que la web tenga estas características para que pueda visualizarse correctamente en diferentes dispositivos, especialmente desde los móviles, ya que el 80 % de los usuarios de Internet acceden desde éstos dispositivos. Los sitios que no disponen de diseño adaptable no se visualizan correctamente y además son penalizadas por los buscadores, que ofrecen con prioridad aquellas que si son adaptables.

Google, por ejemplo, ha informado públicamente que los proyectos web que no tengan diseño adaptable perderán posiciones respecto a las que si son RWD, y todos sabemos la importancia de estar bien posicionados.

Para saber si una web tiene un diseño adaptable existen herramientas de análisis online:

Puedes realizar una consulta en la siguiente página de Google:
https://search.google.com/search-console/mobile-friendly

En Qwirktools ( http://quirktools.com/ ), se puede visualizar una web en diferentes resoluciones, utilizadas por los dispositivos más comunes.

ScreenQueri ( http://beta.screenqueri.es/ ) es otro recurso online muy útil para analizar los aspectos básicos de comportamiento de una web en relación a su adaptabilidad. Este sitio ofrece la visualización a través de reglas en las que se puede desplazar la web para diferentes resoluciones de pantalla, para poder comprobar al momento la calidad de visualización de una página, en diferentes situaciones.

responsivepx ( http://responsivepx.com/ ) es otro recurso similar.

Con estas herramientas se puede saber si un proyecto web reúne las características adaptables necesarias para una correcta visualización desde diferentes dispositivos.

Una buena opción para disponer de un proyecto adaptable sin complicaciones es desarrollar la web con el CMS WordPress, que dispone de muchas plantillas o temas RWD.

En la siguiente URL podéis acceder a muchos temas de WordPress adaptables y gratuitos que pueden descargarse e instalarse en un proyecto WP, fácilmente.

https://wordpress.org/themes/tags/responsive-layout/