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 que tienen ciertas longitudes, mientras que las imágenes que acompañan a ese texto están diseñadas para mostrarse en dimensiones que les permitirán funcionar como se espera en el diseño general. Incluso si estos elementos son algo fluidos como parte de una compilación de sitios web receptivos (lo que deberían ser), habrá un límite a la flexibilidad que puedan tener.
Si implementa un sitio web en un CMS (sistema de administración de contenido) y permite que los clientes administren ese sitio y agreguen nuevo contenido a lo largo del tiempo, los límites que ha diseñado se pondrán a prueba. Confíe en el hecho de que sus clientes encontrarán formas de alterar el sitio web que nunca soñó que harían. Si no ha tenido en cuenta situaciones fuera de las ideales con las que trabajó en su proceso de diseño, el diseño de ese sitio podría estar en grave peligro. Es por esto que es especialmente importante que haga una prueba de estrés en todo el contenido del sitio web y los aspectos del diseño del sitio antes de lanzarlo. Aquí hay algunos consejos sobre cómo puede hacer esto.
Prueba de tamaños de imagen
Sin lugar a dudas, la forma más común en que las personas rompen el diseño de su sitio web es mediante la adición de imágenes de tamaño inadecuado (esta es también la forma en que afectan negativamente el rendimiento general de un sitio y causan velocidades de descarga lentas). Esto incluye imágenes que son demasiado grandes, así como aquellas que son demasiado pequeñas para funcionar según lo previsto en su sitio web.
Incluso si usa CSS para forzar el tamaño de estas imágenes en su diseño, las imágenes que están muy 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 esa imagen utilizando el ancho y la altura adecuados, pero la imagen en sí y su relación de aspecto pueden estar distorsionadas. Sin duda, esto tendrá un efecto negativo en el aspecto de su sitio, ya que una imagen que es demasiado pequeña se "inflará" y perderá calidad. Una imagen demasiado grande que se hace más pequeña con CSS hace que se vea bien y conserve su calidad, pero el tamaño del archivo podría ser demasiado grande para su uso.
Al probar el trabajo de su sitio web, asegúrese de agregar imágenes que queden fuera del alcance previsto. Agregue CSS y técnicas de imágenes de respuesta que abordan estos desafíos cambiando el tamaño de la imagen según o, en el caso de una relación de aspecto incorrecta, también considera usar algo como la propiedad del clip CSS para recortar la imagen según sea necesario.
Prueba de otros medios
Además de imágenes, también pruebe otros medios como videos 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, la siguiente área de sitio web que causa la mayoría de los problemas con los sitios web en vivo administrados por profesionales que no son web son los encabezados de texto. Estas son (supuestamente) líneas cortas de texto que a menudo iniciarán el contenido de una página o una sección de esa página. El texto sobre este párrafo que dice "Pruebas de encabezados de texto" es un ejemplo de esto.
Si ha diseñado un sitio para acomodar un encabezado como este:
"Prueba de encabezados de texto"
Pero su cliente usa el CMS para agregar un artículo con un encabezado como este:
“Prueba de encabezados de texto en una variedad de páginas web con requisitos de diferentes tamaños y necesidades de los usuarios”
Entonces su diseño puede no ser capaz de acomodar limpiamente todo ese texto extra. Al igual que debe hacer una prueba de estrés en sus imágenes y medios agregando entradas que caen fuera de los tamaños para los que diseñó inicialmente, también debe hacerlo con encabezados de texto para asegurarse de que sean lo suficientemente flexibles como para mostrar con eficacia incluso líneas muy largas como la uno arriba
Prueba de longitudes de texto
Manteniendo el tema del texto, también querrá probar diferentes longitudes de texto para el contenido principal en las páginas. Esto incluye el texto que es muy, muy largo, así como el texto que es muy, muy corto, que en realidad puede ser el problema que condena a muchos diseños de página.
Debido a que las páginas web, por naturaleza, aumentan de tamaño para adaptarse a la altura del texto que contienen, las páginas con gran cantidad de texto generalmente se escalarán en altura según sea necesario. A menos que haya restringido la altura de la página (que no debería haga si quiere que su página sea flexible), entonces el texto adicional no debería plantear un problema. Demasiado poco texto es otro problema, y es un problema que muchos diseñadores olvidan probar en su proceso de diseño.
Muy poco texto puede hacer que una página se vea incompleta o incluso rota, así que asegúrese de reducir el contenido de su página para ver qué sucede en esas instancias y hacer los ajustes necesarios en el CSS de su sitio para manejar esas situaciones.
Prueba de zoom de página
Las personas con problemas de visión pueden utilizar 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 querer usar los ME como la unidad de medida para los tamaños de fuente de su sitio web, así como 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 la 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 garantizar que sus páginas reaccionen según lo previsto.
No te olvides de la velocidad de descarga y el rendimiento
Al probar las implicaciones de diseño de las decisiones del cliente, no olvide prestar atención al impacto que esas decisiones tienen en el rendimiento de un sitio. Las imágenes y el contenido que esos clientes agregarán podrían dificultar la velocidad de descarga de un sitio y destruir seriamente la usabilidad general del sitio. Planifique 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 las métricas de 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 totalidad. Tómese el tiempo para entrenarlos sobre cómo mantener el sitio funcionando y en buen estado. Sobre el tema de la formación …
La capacitación del cliente es esencial
Es importante hacer una prueba de estrés en las imágenes de su sitio, el texto y otros elementos de la página, y crear estilos que justifiquen casos extremos, pero que nunca reemplacen la capacitación del cliente. Su trabajo a prueba de balas en un sitio debe ser adicional al tiempo que dedica a capacitar a sus clientes sobre cómo cuidar y administrar su sitio de manera efectiva. Al final, un cliente bien capacitado que entiende 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.
