¿Su sitio web soportará condiciones extremas? Haga una prueba de esfuerzo para estar seguro.

4.6 (92.5%) 136 vote[s]


Cuando diseñamos sitios web y planificamos cómo se mostrará el contenido de esos sitios, a menudo lo hacemos con una situación ideal en mente. Los titulares y las áreas de texto se imaginan como si tuvieran ciertas longitudes, mientras que las imágenes que acompañan al texto están diseñadas para mostrarlas en dimensiones que les permitirán trabajar como se pretendía en el diseño general. Incluso si estos elementos son un tanto fluidos como parte de una construcción de sitio web sensible (lo que debería ser), habrá un límite a lo flexible que pueden ser.

Si implementa un sitio web en un CMS (sistema de gestión de contenidos) y permite a los clientes gestionar ese sitio y añadir nuevo contenido con el tiempo, los límites para los que ha diseñado se pondrán absolutamente a prueba. Confíe en el hecho de que sus clientes encontrarán maneras de alterar el sitio web que usted nunca soñó que harían. Si no ha tenido en cuenta las situaciones que están fuera de los ideales con los que trabajó en su proceso de diseño, el diseño de ese sitio podría estar en grave peligro. Por eso es especialmente importante que pruebe todo el contenido del sitio web y los aspectos del diseño del sitio antes de lanzarlo. Algunos consejos para hacer esto.

Comprobación de los tamaños de las imágenes

Sin duda, la forma más común en que la gente rompe el diseño de su sitio web es añadiendo imágenes de tamaño inapropiado (también es la forma en que impactan negativamente en el rendimiento general de un sitio y causan bajas velocidades de descarga). Esto incluye las imágenes que son demasiado grandes, así como las que son demasiado pequeñas para que funcionen según lo previsto en su sitio web.

Incluso si utiliza CSS para forzar el tamaño de estas imágenes en su diseño, las imágenes que están fuera de escala con sus especificaciones originales para el sitio causarán problemas. Si las dimensiones de una imagen son incorrectas, su CSS puede forzar la visualización de la imagen utilizando el ancho y la altura adecuados, pero la imagen en sí y su relación de aspecto pueden estar distorsionados. Esto ciertamente tendrá un efecto negativo en la apariencia de su sitio, ya que una imagen que es demasiado pequeña será «ampliada» y perderá calidad. Una imagen que es demasiado grande y que se hace más pequeña con CSS hace que luzca bien y conserve su calidad, pero el tamaño del archivo podría ser irrazonablemente grande para la forma en que se está utilizando.

Cuando pruebe el trabajo de su sitio web, asegúrese de añadir imágenes que queden fuera de su alcance previsto. Añada CSS y técnicas de respuesta de imagen que aborden estos desafíos redimensionando la imagen de acuerdo con el tamaño o, en el caso de una relación de aspecto incorrecta, considerando también la posibilidad de utilizar algo como la propiedad de clip CSS para recortar la imagen según sea necesario.

Probando otros medios

Además de las imágenes, también pruebe otros medios como los vídeos en su sitio y vea cómo aparecerán esos elementos en su diseño utilizando diferentes valores de tamaño y relación de aspecto. Una vez más, considere la naturaleza receptiva de su sitio y cómo funcionará para diferentes dispositivos y tamaños de pantalla.

Prueba de encabezados de texto

Después de las imágenes, el siguiente área del sitio web que causa más problemas con los sitios web en vivo gestionados por no profesionales de la web son los encabezados de texto. Estas son las (supuestamente) líneas cortas de texto que a menudo inician el contenido de una página o de una sección de esa página. El texto de arriba de este párrafo que dice «Probar encabezados de texto» es un ejemplo de esto.

Si ha diseñado un sitio para acomodar un título como este:

«Prueba de encabezados de texto»

Pero su cliente utiliza el CMS para añadir una con un encabezado como este:

«Prueba de encabezados de texto en una variedad de páginas web, todas con requisitos de diferentes tamaños y necesidades del usuario»

Entonces, es posible que su diseño no sea capaz de acomodar limpiamente todo ese texto extra. Del mismo modo que debería poner a prueba sus imágenes y medios añadiendo entradas que caen muy por encima de los tamaños para los que fue diseñado inicialmente, también debería hacerlo con encabezados de texto para asegurarse de que son lo suficientemente flexibles como para mostrar de forma efectiva incluso líneas ultra largas como la anterior.

Prueba de longitudes de texto

Siguiendo con el tema del texto, también querrá probar diferentes longitudes de texto para el contenido principal de las páginas. Esto incluye texto que es muy, muy largo, así como texto que es muy, muy corto – que puede ser realmente el problema que condena a muchos diseños de página.

Debido a que las páginas web, por naturaleza, crecen en tamaño para acomodarse a la altura del texto que contienen, las páginas con mucho texto por lo general sólo escalarán en altura según sea necesario. A menos que haya restringido la altura de la página (lo que usted no debería hacer si quiere que su página sea flexible), entonces el texto extra no debería suponer un problema. Demasiado poco texto es otro problema – y es uno que muchos diseñadores olvidan probar en su proceso de diseño.

Demasiado poco texto puede hacer que una página parezca incompleta o incluso rota, así que asegúrese de reducir el contenido de su página para ver lo que sucede en esos casos y haga los ajustes necesarios en el CSS de su sitio para manejar esas situaciones.

Probando el zoom de la página

Las personas con problemas de visión pueden estar utilizando la función de zoom de página de un navegador web para aumentar el tamaño de su página web. Si alguien hace zoom en una cantidad significativa, su diseño podría romperse. Esta es una de las razones por las que puede utilizar los EMs como unidad de medida para el tamaño de las fuentes de su sitio web, así como para sus consultas de medios. Debido a que los EM son una unidad de medida relativa (basada en el tamaño de texto predeterminado de ese navegador), son más propicios para diseños de sitios web fluidos y flexibles.

Pruebe su sitio web para el zoom de página y no se detenga en uno o dos niveles de zoom. Amplíe su sitio hacia arriba y hacia abajo en una variedad de niveles para asegurarse de que sus páginas reaccionen como es debido.

No se olvide de la velocidad y el rendimiento de las descargas

Al probar las implicaciones del diseño de las decisiones del cliente, no olvide también prestar atención al impacto que esas decisiones tienen en el rendimiento de un sitio. Las imágenes y el contenido que esos clientes añadirán podrían dificultar la velocidad de descarga de un sitio y destruir seriamente la usabilidad general del sitio. Planifique para el impacto de estas adiciones y haga su parte en el proceso de desarrollo para minimizar estos efectos.

Si su sitio web se está construyendo con un presupuesto de rendimiento, comparta esta información con sus clientes y muéstreles cómo probar una página web para medir el rendimiento. Explíqueles la importancia de mantener estos umbrales establecidos para el tamaño de la página y la velocidad de descarga y muéstreles cómo las adiciones que hacen pueden afectar al sitio en su conjunto. Tómese el tiempo para entrenarlos en cómo mantener el sitio funcionando y luciendo bien. Sobre el tema de la formación…

La capacitación de los clientes es esencial

Es importante poner a prueba las imágenes, el texto y otros elementos de la página de su sitio y crear estilos que tengan en cuenta los casos extremos, pero que nunca sustituyan la formación de los clientes. Su trabajo de blindaje de un sitio debe ser en adición al tiempo que usted pasa entrenando a sus clientes en el cuidado y manejo efectivo de su sitio. Al final, un cliente bien entrenado que entienda sus responsabilidades y el impacto de las decisiones que toman en un sitio será invaluable para sus esfuerzos por mantener ese sitio funcionando y luciendo lo mejor posible.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *