¬ŅSu sitio web soportar√° condiciones extremas? Haga una prueba de esfuerzo para estar seguro.

4.6 (92.5%) 136 votes


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 *