Cada año que pasa, las tendencias, sobre todo en cuanto a diseño y adaptabilidad, van cambiando o variando. En años pasados las páginas web tenían unos diseños limitados a otras necesidades, los diseños eran estéticamente más estrechos, pero ahora debido a las pantallas y monitores cada vez más grandes de los que disponemos, nos podemos permitir otra clase de diseños.

Pero no solo eso, últimamente tenemos unas conexiones a internet cada vez las rápidas, y que las páginas web carguen rápido se ha convertido en una auténtica lucha.

Nuestros monitores son más grandes

Debido a esto, los diseños de las páginas web han tenido que evolucionar para adaptarse a los nuevos tamaños, implantándose desde hace algunos años los diseños respònsive.

Ahora mismo, hacer diseños web con un ancho fijo de 1080px es casi impensable, salvo para determinados proyectos muy específicos. En cambio, los diseños adaptativos para aprovechar los anchos completos de pantalla son ya una realidad.

El diseño responsive y el ancho completo

Antes de que llegara el responsive las páginas que aprovechaban los anchos completos, cuando eran navegados con monitores de una resolución inferior a la que fue diseñada, estos diseños se descuadraban y obligaban al usuario a hacer ampliaciones de pantalla y a moverse por ella de una manera antinatural usando los scrolls.

El responsive es un diseño que, aprovechando todo el ancho de pantalla de un monitor, nos permite meter todo el contenido que haga falta. Pero el mismo diseño, según va estrechándose a diferentes resoluciones, todo ese contenido, se va adaptando y estrechando, de manera el que el contenido se va desplazando a una parte inferior para poder visualizarse de manera correcta.

O sea que una web responsive, en diferentes resoluciones se ve con un diseño diferente, pero en todos ellos se tiene que ver de forma legible.

Ejemplo de diseño responsive

Porque usar el ancho completo

Obviamente, un diseño de ancho completo, independientemente de si nos gusta más o menos, nos permite introducir más objetos, más imágenes, más textos en nuestras páginas web, pero  sin saturar el diseño.

Además de que gracias al CSS los efectos a emplear son innumerables y con un poco de gusto estético se pueden hacer auténticas virguerías.

Hace unos años hacer una web como las de hoy en día, sería impensable dada la complejidad y cantidad de elementos que en su época harían que este tipo de web fuera demasiado pesada e inviable.

Gracias a las mejoras de carga en imágenes, más las librerías CSS y JS, y a los diseños de ancho completo y responsive, el ancho completo es algo óptimo, aconsejado y bonito.

Recuerda que si no vas a hacer la web tú mismo, tienes que procurar contactar con alguna empresa de diseño de páginas web que entienda de SEO, que use este tipo de herramientas en las creaciones de sus páginas.

La velocidad de carga y tipos de imágenes

La fibra óptica se está implementando cada vez más, y para tener un buen SEO en nuestra web, tener un índice de carga muy rápido es obligatorio.

A pesar de que gracias a la fibra nos podríamos permitir poner imágenes muy pesadas, si lo haces, los buscadores como Google te penalizaran. Así que hoy en día hay que optar por hacer páginas web de carga muy rápida, sobre todo para que el usuario que navega por tu web, no este esperando y por aburrimiento termine yéndose a la web de la competencia.

Las imágenes son el principal problema a la hora de que una web sean más o menos pesadas, así que frente a las clásicas imágenes de toda la vida (GIF, JPG y PNG) ya están saliendo nuevos formatos para mejorar la carga y su visualización.

Los formatos de imágenes vectoriales

Las imágenes vectoriales son siempre supernítidas e independientemente de la resolución a la que se visualizan, esta siempre se ven perfectas. Pero no nos confundamos, las imágenes vectoriales no se pueden usar como por ejemplo las fotografías. Solo se utilizan para hacer o crear imágenes de tipo icono. Su mayor virtud es que siempre se ven perfectas, por mucho que las amplíes jamás pierden calidad y además su índice de carga es super óptimo.

Tienes diferentes extensiones y entre ellas, podrás encontrar imágenes vectoriales con extensiones WebP, AI , SVG , EPS y PDF.

La imagen vectorial se basa en fórmulas matemáticas, y no se dividen en unidades mínimas de información como los píxeles, sino en manchas de color y líneas. Se construyen a partir de vectores, que son objetos definidos por una serie de puntos que pueden modificarse para dar una u otra forma a la imagen final.


tipos imagenes vectoriales
tipos imágenes vectoriales

Las imágenes y las fotografías

Sabiendo que las imágenes vectoriales nunca podrán sustituir a las fotografías, ya llegan los nuevos formatos de imágenes con por ejemplo las extensiones WebP (Entre muchos otros).

Por ejemplo, las imágenes WebP son un formato que soporta compresiones con pérdida, como sin ella, y ha sido desarrollado por Google.

El problema de este tipo de nuevo formato es que no todos los navegadores de internet lo soportan, pero este en concreto se está estandarizando bastante bien, siendo soportado por prácticamente todos los navegadores habituales, Firefox, Chrome, Opera, Android Browser,   Edge, Chrome for Android etc.

Este formato se comporta realmente bien comparándolo con uno del estándar como JPEG reduciendo la carga prácticamente en un 40% manteniendo la calidad sin perdidas.

Resumen y conclusiones

En definitiva, dada la necesidad de cargar rápido, cada vez tiramos más a imágenes tipo icono con vectoriales, y dado que los diseños de ancho completo nos permiten introducir muchos elementos y mejoran los diseño, es bastante obvio que todo esto es lo que se usa en la actualidad.

Además, que visto la importancia que está tomando la necesidad de que nuestras páginas web carguen rápido, es mejor que nos vallamos adaptando a este tipo de mejora cuanto antes, imágenes vectoriales, imágenes con nuevos formatos y preocuparnos mucho porque nuestra web sea la más rápida de internet.

En la medida de lo posible, evitar diseño de ancho fijo salvo que el proyecto en sí lo requiera o necesite.

Autor

Deja un comentario

Carrito de compra
Scroll al inicio