Anchura y altura del sitio web
Antes de que se popularizaran los smartphones y las tabletas, los diseñadores web creaban páginas de ancho fijo que funcionaban en los tamaños de pantalla más comunes: normalmente 1024 píxeles de ancho por 768 píxeles de alto. Todo esto cambió alrededor de 2013 con el aumento masivo del uso del iPhone para navegar por la web. Ahora no hay una única respuesta a “¿qué tamaño debe tener mi página web?” – todos los sitios web deben ser responsivos.
El diseño responsivo significa crear páginas web que se adapten a diferentes dispositivos y tamaños de pantalla. Utiliza el mismo contenido, pero lo presenta de forma diferente según se utilice un teléfono móvil, un iPad, un portátil o un ordenador de sobremesa. Responde a las diferentes interacciones, como los estados hover para los usuarios con ratón y los eventos de clic para las pantallas táctiles, y cambia el diseño para adaptarse a la pantalla disponible.
Un punto a tener en cuenta es que el hecho de tener espacio de pantalla disponible no significa que haya que utilizarlo. Los diseños que se extienden a todo lo ancho en todos los tamaños de pantalla pueden resultar ilegibles en pantallas muy anchas. Por ejemplo, una página de 1300px de ancho es legible en dos columnas, pero es lo máximo que la mayoría de la gente puede leer cómodamente en una sola columna de texto. Nos resulta más fácil seguir el texto que se envuelve en bloques más pequeños.
Tamaños de las ventanas
La siguiente tabla muestra el tamaño máximo de página permitido para conseguir los tiempos de respuesta deseados para varias velocidades de conexión. Las cifras suponen una latencia de 0,5 s, que es más rápida que la mayoría de las conexiones web actuales, por lo que, para muchos propósitos realistas, los tamaños de las páginas deben ser incluso menores que los indicados en la tabla.
El concepto de “tamaño de página” se define como la suma de los tamaños de archivo de todos los elementos que componen una página, incluido el archivo HTML que la define, así como todos los objetos incrustados (por ejemplo, los archivos de imagen con imágenes GIF y JPG). Como ya he comentado en mi artículo principal sobre los tiempos de respuesta en la web, a veces es posible salirse con la suya con diseños de páginas de mayor tamaño siempre que el archivo HTML sea pequeño y esté codificado para reducir el tiempo de renderización del navegador.
Tenga en cuenta que el límite de tiempo de respuesta de 1 segundo es necesario para que los usuarios sientan que se mueven libremente por el espacio informativo. El límite de 10 segundos es necesario para que los usuarios mantengan su atención en la tarea.
Tamaño del sitio web px
El peso de la página -también conocido como tamaño de la página o hinchazón de la página- se refiere al tamaño total de una página web en particular, incluyendo todos los archivos que se utilizan para crear la página: documentos HTML, hojas de estilo, imágenes, scripts y otros medios.
Increíblemente, el tamaño de las páginas web para móviles ha aumentado un 336% desde 2010, aunque debo señalar que el Archivo HTTP comenzó a recopilar datos sobre el peso de las páginas web para móviles en mayo de 2011: el tamaño medio de las páginas web para móviles en ese momento era de 144,8kb.
El uso del vídeo se ha disparado en los últimos años. Cada vez más sitios web utilizan cabeceras de vídeo y otros elementos multimedia. Según WordStream, el 87% de los profesionales del marketing online utilizan contenidos de vídeo, un tercio de la actividad online se dedica a ver vídeos y más de la mitad de los contenidos de vídeo se ven en el móvil.
Las fuentes web son otro factor que contribuye al tamaño de la página, pero como muestran las estadísticas, su crecimiento en popularidad no es realmente algo de lo que preocuparse. En noviembre de 2010, las fuentes representaban 59,2kb del tamaño total de la página, frente a los 132,1kb de enero de 2021.
Tamaño de la pantalla
Seguir un estándar establecido para el tamaño de la página de su sitio web evita que los visitantes tengan que desplazarse para leer su información. Si determina las dimensiones básicas de su sitio web antes de publicarlo, puede eliminar esta preocupación.
La mayoría de los sitios web tienen entre 720 y 1.000 píxeles de ancho. Si un visitante del sitio web tiene su monitor configurado a 800 píxeles o más y la página es más ancha que 720 píxeles, tendrá que desplazar la pantalla hacia la derecha para mostrar toda la información. Obligar a un visitante a desplazarse a la izquierda o a la derecha reduce la probabilidad de que siga utilizando su sitio web.
La resolución habitual de un monitor de ordenador muestra aproximadamente 600 píxeles antes de que el visitante tenga que desplazarse hacia abajo. Aunque algunos propietarios de sitios web pueden argumentar que quieren que toda la información aparezca en la página sin que el espectador tenga que desplazarse, la mayoría de los sitios simplemente se aseguran de enumerar la información más importante dentro de esa área de 600 píxeles.
Una sola página de un sitio web que supere los 70 kilobytes tardará más en descargarse. Los diseñadores de sitios web pueden modificar el “peso” de una página si saben cómo acceden sus espectadores al sitio web, por ejemplo, a través de un módem de cable o una red inalámbrica.
