Diseño web moderno: errores comunes que debe evitar

El diseño y el desarrollo web han cambiado mucho en los últimos años. Internet móvil es el principal responsable de esto, cambiando cuándo y dónde usamos Internet. Muchas cosas que eran comunes hace diez años ahora se consideran obsoletas. Esto incluso se aplica a muchas cosas que estaban completamente actualizadas hace dos o tres años. ¿Qué debe evitar hacer cuando se trata de diseñar y desarrollar sitios web modernos?

Diseños solo para dispositivos de escritorio y teléfonos inteligentes

Los días de desarrollar su sitio web para una sola vista han terminado hace un tiempo. Por ahora, solo encontrará muy pocos sitios web sin un diseño receptivo.

Sin embargo, en muchos casos, solo se consideran dos dispositivos o tipos de pantallas cuando se trata de diseños receptivos: el monitor clásico y el teléfono inteligente. Aquí, el diseño del escritorio recibe un ancho fijo, mientras que el diseño móvil a menudo se extiende a lo largo de todo el ancho de la ventana del navegador.

La diferenciación entre computadoras de escritorio y teléfonos inteligentes por sí sola ya no es suficiente. Hoy en día, hay tabletas, phablets y muchos otros dispositivos diferentes con varias resoluciones. Diferenciar entre dos tipos no hace justicia a esta evolución. Por lo tanto, debe mantener su diseño lo suficientemente flexible para que funcione en todas las resoluciones.

En monitores grandes, su diseño no debe tener bordes excesivamente grandes a la izquierda y a la derecha. Y en tabletas, el diseño para dispositivos móviles no debería mostrarse.

Versión móvil de su sitio web

Sigamos con el diseño web móvil. Cuando las opciones de sitios web receptivos eran muy limitadas, se desarrollaron versiones móviles propias para sitios web. Incluso hoy en día, muchos de los principales portales de noticias tienen una versión móvil propia, a la que a menudo se puede acceder a través de un subdominio propio.

Por supuesto, esto nos hace enfrentar el mismo problema de diseño. Además de eso, siempre tendrás que encargarte de dos versiones de un sitio web. La visualización de la versión correcta tampoco funciona en muchos casos. Por ejemplo, la versión móvil a menudo se carga en tabletas, aunque mostrar la versión de escritorio sería completamente posible dada la resolución.

Ocultar contenido de Internet móvil

Los sitios web son cada vez más complejos. Esto se aplica al contenido, pero también al diseño. Las imágenes y gráficos de gran formato se combinan con textos de varias columnas y barras laterales adicionales.

La diferencia entre los tamaños de pantalla es cada vez mayor. Por lo tanto, hoy en día, el objetivo es diseñar sitios web que se vean igualmente bien en monitores grandes y pequeños teléfonos inteligentes.

Sin duda, esto es un desafío. Muchos diseñadores web toman la ruta simple, pero no recomendada. El contenido supuestamente prescindible simplemente se oculta en los teléfonos inteligentes. Esto puede tener sentido de un vistazo, haciendo que el sitio web sea mucho más claro en un teléfono inteligente.

Sin embargo, este enfoque no es beneficioso para el visitante, ya que se accede a los sitios web a través de dispositivos móviles con más frecuencia que a través de dispositivos de escritorio. Por eso, no se debe retener ningún contenido de los teléfonos inteligentes. En su lugar, debe encontrar una manera de presentar todo el contenido de una manera clara y que ahorre espacio. Esto se puede hacer usando controles deslizantes u ocultando el contenido a través de la barra lateral y mostrándolo a través de un botón.

Colocación no solicitada de ventanas y videos sobre el contenido

Las llamadas “cajas modales”, que se colocan encima de todo el contenido de un sitio web cuando un usuario intenta salir de él, se han convertido en una costumbre molesta. Estas áreas se utilizan a menudo para informar al visitante sobre el boletín o determinadas ofertas.

Si realmente está a punto de abandonar un sitio, no son molestos. Sin embargo, si accidentalmente abandona el área superior del sitio con el mouse, dicha pantalla ya lo molestará.

Por lo tanto, si no desea molestar a sus visitantes, debe mantenerse alejado de estas ventanas emergentes en el diseño web moderno, por muy beneficiosas que puedan ser para un operador de sitios web.

Lo mismo se aplica a los videos que ocultan el contenido de un sitio web sin preguntarle al usuario.

Resoluciones simples y formatos de imagen incorrectos

Internet no solo se volvió más móvil; la resolución también aumentó. Para pantallas y monitores, el tamaño ya no es el único factor, la resolución también lo es. De esta forma, la densidad de píxeles aumenta y la resolución se vuelve más nítida.

Esto se vuelve cada vez más notorio con las imágenes. En una resolución simple, una imagen se ve borrosa y borrosa en una pantalla de alta resolución. Pero HTML5 y CSS3 le permiten configurar diferentes imágenes para diferentes densidades de píxeles.

Utilice esta opción para asegurarse de que su sitio web se vea bien y nítido en dispositivos nuevos. También seleccione el formato adecuado para sus imágenes y gráficos. Utilice archivos JPEG para fotos, PNG para gráficos y SVG para dibujos vectoriales.

Fuentes del sistema y fuentes demasiado pequeñas

Dado que las fuentes web se han introducido en todos los navegadores después de muchos años, el uso de fuentes del sistema ya no es necesario. Hay toneladas de fuentes gratuitas y cargadas que puede utilizar en su proyecto web. Asegúrese de que estas fuentes estén disponibles en el nuevo formato WOFF2. Esto reemplaza el formato anterior predeterminado WOFF y ahorra, aún más, espacio gracias a una mejor compresión. Especialmente en Internet móvil, esto es una gran ventaja.

Además, asegúrese de no hacer sus fuentes demasiado pequeñas. Y no use un solo tamaño de fuente establecido. En los teléfonos inteligentes, las fuentes deben tener un tamaño diferente al de los monitores grandes.

Hacer esperar al visitante

Hoy en día, los usuarios esperan que los sitios web se carguen rápidamente. Por lo tanto, debe desarrollar su sitio web de manera que eso suceda. Optimiza las imágenes y usa el formato correcto.

Utilice técnicas como el elemento “”, para ofrecer siempre el tamaño de imagen adecuado. Cargue imágenes de menor resolución en teléfonos inteligentes, en lugar de las resoluciones que se requieren en un monitor grande.

Asegúrese de que JavaScript no bloquee ni ralentice la distribución de HTML y asegúrese de que los archivos integrados externamente no tengan un efecto negativo en sus tiempos de carga.