Como sabes, el diseño web responsivo es una de las claves en el posicionamiento de las páginas y cada vez le da más importancia Google a este aspecto. Pero, ¿sabes cuáles son los nueve conceptos básicos que debes tener en cuenta?
Si no sabes a ciencia cierta qué es el diseño web responsivo y los conceptos más importantes que tiene, te recomendamos que sigas leyendo este artículo donde te vas a enterar de todo. ¿Empezamos?
Qué es el diseño web responsivo
El diseño web responsivo, también conocido como responsive, es una de las mejores soluciones para el diseño web. Y es que, antes, cuando se construía una web, tenías el problema de que se veía diferente según el móvil, una tablet o incluso en distintas resoluciones web. Sin embargo, con esta opción tienes la posibilidad de que sea la web la que se adapte al dispositivo. Aquí no hablamos ya de páginas fijas, de centímetros, tamaños, etc. sino que se construye sabiendo que después, al cambiar los distintos dispositivos, esta se va a adaptar (por supuesto, a veces hay que hacer algunos cambios mínimos).
Dicho de otro modo, hablamos de un formato de programación. Con él, podemos hacer que una web se ajuste de manera automática, al dispositivo del usuario, ya sea este en el móvil, tablet o en un ordenador con una resolución diferente a la que se ha diseñado.
De esta manera se permite que la web se vea bien en todos los aspectos.
Principios básicos
Ahora que te ha quedado más claro qué es el diseño web responsivo, es hora de hablarte de esos principios básicos que tiene este formato y cómo ayuda a que las webs se vean mejor. Estos serían los siguientes:
Flujo de elementos
Nos estamos refiriendo a lo que ocurre cuando la pantalla donde se va a visualizar la página web es cada vez más pequeña. Por ejemplo, en el caso de un móvil. Cuando más pequeña es la pantalla, el formato tiende a organizar toda la información que forma parte de la plantilla.
Y lo hace de una manera vertical, no horizontal. De esta manera, no se obliga al usuario a que tenga que desplazarse a izquierda y derecha para ver toda la página, además de arriba y abajo, para la web.
También evita que los contenidos no se superpongan, sino que queden organizados siempre en formato vertical.
Y antes de que lo preguntes, sí, muchas plantillas pueden establecer un orden concreto para cada parte de la plantilla, o incluso desaparecer, cuando la pantalla llegue a un determinado tamaño. Esto se hace con el objetivo de priorizar la información y también de aligerar el diseño para que no haya que hacer mucho scroll para informarse de lo que diga.
Desktop vs móvil
El diseño para mobile está cobrando cada vez más importancia por el hecho de que está desbancando a los ordenadores. Pero a la hora de hacer un diseño web, en realidad no implica una diferencia grande en cuanto a diseñar primero la web y luego la versión ordenador, o al revés. En realidad, cualquier diseño web responsivo en el ordenador se plasma en el móvil y viceversa.
Ahora bien, sí es cierto que habrá algunos detalles a tener en cuenta en cada uno de los diseños que harán que se personalice. De hecho, algunas empresas optan por crear un diseño web único para ordenadores, y otro especial para móviles, si bien eso puede hacer que se pierdan funciones o que haga que los usuarios se pierdan al navegar entre uno y otro, sobre todo si están acostumbrados a un tipo.
Fuentes tipográficas, ¿web o del sistema?
Un aspecto importante en el diseño web es la tipografía que se va a utilizar. Es decir, los tipos de fuentes a usar. Y, como sabes, hay millones que podrías utilizar. Pero siempre se recomienda utilizar aquellas que sean legibles, fáciles de cargar y que sean rápidas de cargarse.
Debes tener en cuenta que las fuentes pueden reflejar un estilo moderno, o bien un estilo simple. Las primeras pueden hacer que se tarde más en cargarlas; mientras que las segundas, si bien son más clásicas, permiten un mejor funcionamiento del sitio web.
¿Y cuál sería mejor? Pues dependerá de las necesidades que tenga ese proyecto. Si en tu página debe primar el impacto, aunque tarde más en cargar puede ser una mejor elección que aquellos con diseños simples que no destacan mucho.
Eso sí, debes tener en cuenta que es mejor usar fuentes con las que te asegures que los usuarios las van a tener instaladas; de lo contrario no conseguirás ese efecto.
Unidades relativas
Otro de los principios del diseño web responsivo es utilizar lo que se llaman «unidades relativas». De ellas, la mejor es el porcentaje.
¿Y para qué sirve esto? Verás, imagina que tienes un diseño web para el ordenador, una tablet y un móvil. En lugar de proporcionar unas medidas específicas para cada uno, se utilizar el porcentaje para que el formato se encargue después de hacer escalas diferentes conforme se reduzca el tamaño de las pantallas.
Si se utilizan medidas fijas esto podría no quedar bien al disminuir esas pantallas.
Puntos de interrupción
Los puntos de interrupción hacen referencia al espacio que se tiene para trabajar en un ordenador y en un móvil. Mientras en el primero se pueden tener básicamente tres columnas, en el caso del móvil solo se tiene una. Esto hace que, cuando el diseño cambia a pantallas más pequeñas, se distribuya de manera natural; mientras que, si no tiene los puntos de interrupción, lo que hará es que quede más pequeño todo el contenido manteniendo el mismo diseño.
Valores
A la hora de diseñar una web responsivo, una de las claves básicas que se deben tener en cuenta son los valores mínimos y máximos en cuanto al ancho y alto de la web y de los propios elementos.
La gran diferencia entre uno y otro es que, si no hay un máximo de ancho, lo que hace es que el contenido se extienda a lo ancho, lo que puede hacer que se vea más deformado.
Objetos anidados
Imagina que tu web tiene muchísimos elementos. Y que en la versión móvil has decidido que vas a ponerlos más centrados. El disponer de objetos anidados lo que te permite es mover varios objetos que forman parte de una unidad a la vez, ahorrando así bastante tiempo. Además, permite un diseño más limpio y ordenado.
No solo eso, sino que, al hacer que los elementos vayan «todos a uno», se pueden adaptar más rápido a las pantallas pequeñas.
Imágenes vs vectores
En este caso nos centramos en los iconos de la web. Estos pueden ser hechos con imágenes de mapa de bits o bien con vectores. ¿Y cuál sería lo mejor? Vectores, sin duda. Esto es porque al hacerlos más grandes o pequeños, no se verán pixelados ni borrosos.
Diseño adaptativo vs responsivo
Para finalizar con los principios del diseño web responsive, debes saber que muchos confunden este con el diseño adaptativo, cuando en realidad hay una gran diferencia entre ellos.
El diseño responsive lo que hace es que la estructura se ajuste de manera fluida y natural al dispositivo que se utilice. ¿Y qué ocurre con el diseño adaptable? En este caso la adaptación se produce a saltos y muestra algo diferente según el navegador y el dispositivo que se utilice. Dicho de otra forma, te mostrará un diseño diferente para cada dispositivo.
¿Conocías estos principios básicos del diseño web responsivo?