Un diseño web responsive o adaptable es aquel que se adapta -si me permitís la redundancia- a cualquier dispositivo que visualice la página en un navegador web.
En un lenguaje más llano y menos técnico, tu página se verá bien en un monitor de PC, un portátil grande y pequeño, una tablet puesta en horizontal y vertical, y un teléfono móvil.
Es un concepto sencillo, pero que para los diseñadores web tiene su miga implementarlo en una página web.
¿De qué hablamos en este artículo?
Cómo implementar una página web responsive
La implementación de un sitio web responsive no es simple, pero tampoco es una tarea superdifícil y con un poco de organización, podremos hacerla cada vez más mecánica y sencilla.
Primero de todo, decir que depende del tipo de página que estemos diseñando: página estática con HTML5 y CSS3 ó una plantilla personalizada en una instalación WordPress.
Diseños web con HTML5 y CSS3
La manera más sencilla de implementar una página web responsive con un diseño web en HTML5, CSS3 y Javascript es con las media queries de CSS3.
Las media queries son condiciones que se imponen a las reglas de estilo (CSS) dependiendo de varios factores, en nuestro caso, la anchura del dispositivo donde se va a visualizar la página web. Si tenéis más curiosidad sobre los posibles condicionantes dentro de las media queries, podéis leeros este artículo de la Mozilla Developer Network.
Así, cada condición dentro de nuestro CSS tiene una relación directa con el dispositivo donde se va a visualizar nuestra página web. Ahora bien, ¿cuántas condiciones/dispositivos son necesarios?
Serán necesarias tantas condiciones como posibles dispositivos, pero como mínimo son tres: PC de escritorio, tablet y smartphone.
PC de Escritorio
Una pantalla de PC puede comenzar en una resolución de 1024 píxeles de ancho, para pantallas modernas, pero si queréis ser más compatibles con pantallas antiguas, deberéis bajar la condición del ancho de pantalla a 768 píxeles y mayores.
Tablet
Una pantalla de tablet está condicionada por dos factores, el valor que le hayamos dado a mínimo ancho de pantalla en el PC de escritorio (768px) y el máximo ancho de pantalla para visualizar nuestra web en un smartphone, que como veremos más adelante será de máximo 480 píxeles.
Así, la visualización en tablets será entre un ancho de pantalla de 480 y 768 píxeles.
Smartphone
Como hemos adelantado en el apartado anterior, un ancho de pantalla para representar nuestro diseño en un smartphone es de 480 píxeles como máximo.
Además, ahora también tendrás que hacer que tus imágenes sean responsive con el nuevo elemento de HTML5 <picture>. Aquí te explican muy bien cómo usarlo nuestros amigos de Tuts+.
Diseños web con plantillas personalizadas de WordPress
Normalmente, a estas alturas, todas las plantillas de WordPress son responsive. Así, una página web basada en Wordpress no necesita implementar los tamaños de los dispositivos, porque ese trabajo ya lo ha hecho el diseñador de la plantilla.
Entonces, ¿por qué no hacemos todas las webs con WordPress? Pues bien, podríamos, pero a ciertos clientes no les gusta tener una web parecida a ninguna otra y necesitan un diseño web original y especializado. Ahí es donde entra el diseño en HTML5 y CSS3, con Bootstrap, con jQuery, con plugins de jQuery… etc.
Un ejemplo de esto, son las páginas que aparecen en la web Awwwards, muy recomendable para inspiraros en lo que podéis llegar a conseguir diseñando webs.
Qué ventajas obtienes con una web responsive
Una web adaptada a todos los posibles dispositivos de visualización tiene muchas ventajas:<
