TAMAÑO DE UNA PÁGINA WEB

Esa pregunta es sencilla de responder; no hay una medida específica. Al final de este artículo incluiré unas medidas que podría sugerirte pero en definitiva antes de elegirla debes considerar los tres factores siguientes:

La resolución de pantalla

La resolución de pantalla es el factor más importante a considerar para el tamaño de un sitio web, aunque no el único, para esto hay que tener en cuenta las resoluciones de pantalla más comunes. Hasta hace un tiempo la resolución más popular era 1024×768 pixeles pero eso ha cambiado en los últimos años y ahora el tamaño más común es 1366×768, en segundo lugar un tamaño mucho mayor 1920×1080. Si deseas conocer esto con mas detalle, en esta liga puedes ver los datos mas actualizados de las resoluciones más comunes.

Ahora, si la resolución de pantalla más común es de 1366×768 ¿debería diseñar el sitio de este tamaño? Pues tampoco es así necesariamente, quiero continuar explicando los otros factores que también debes considerar, aunque si traes prisa puedes pasar directamente a las recomendaciones. 

Las personas a las que se dirige

Siendo más especifico al tipo de dispositivos que usan esas personas, si nos dirigimos a un sector con un poder adquisitivo alto sus equipos posiblemente tengan resoluciones muy altas, si el tipo de sitio va a ser mayormente consultado por personas que trabajan en oficinas de gobierno la resolución promedio de sus equipos serían de unos 1280 a 1024. El sitio tambien podría estar dirigido a personas que solo lo visiten a través de sus teléfonos inteligentes y una resolución de 800 px bastaría.

El tipo de contenido

Este es otro factor importante que se debe tener en cuenta, si el tipo de contenido son principalmente textos, como los blosg o los sitios de noticias, no es necesario pensar en un ancho de pantalla de 1900px ¿se imaginan leer ese parrafo extra ancho? tendríamos que mover la cabeza como carro de maquina de escribir para leerlo. Las columnas de texto no muy anchas se agradecen. En cambio si el contenido del sitio son principalmente imágenes o video de alta calidad lo recomendable es hacer sitios pensado en resoluciones grandes que permitan destacar su contenido mucho más.

La recomendación.

Mi recomendación para la medida de un sitio web es de 940 a 1000 pixeles de ancho para el área de contenido de la página web. El canvas, lienzo o área de trabajo en tu programa de diseño, como Photoshop, que tenga unos 1200 o 1400px en total. Por el alto no hay límite, verticalmente podrá crecer tanto como lo requiera tu contenido. De acuerdo a los estándares y tendencias actuales mostrar el contenido haciendo “scroll down” es una magnífica practica de usabilidad que incluso es obligada para los dispositivos móviles.

Recomiendo hacer el documento cuando menos unos 400 pixeles más ancho que el área de contenido para que consideres el fondo que tendrá el sitio web. Si tendrá una textura, un patrón o color específico se podrá percibir como luce en su conjunto con el contenido del web. Normalmente el área de contenido va en el centro del documento dejando unos 200px de cada lado.

Si vas a utilizar una imagen como fondo del sitio entonces te recomiendo considerar dejar esos 200 pixeles de cada lado libres después de que termina la imagen para que te asegures que no queda cortada la imagen. O si vas a querer que sin importar la resolución la imagen siempre se vea a todo lo ancho de la pantalla deberás elegir una imagen suficientemente grande y cuidada de tal manera que cuando se escale no se vean los pixelotes mas feos que granos de adolescente.

Eso si, el tamaño en bytes de esa imagen de fondo no debe ser muy pesada o tardará muchísimo en cargar, me atrevería a sugerir hasta un tamaño máximo de 250kb si es que esa imagen realmente lo vale, todo sea por el diseño aunque mis colegas programadores obsesionados con el rendimiento seguramente se infartarían. Si sigues este consejo evitarás que ese usuario que tiene una Mac Book Pro de 21″ con su vanidosa resolución de 1920 pixeles le haga fuchi al sitio por que el fondo esta cortado o pixeleado.

¿por que si la resolución de pantalla mas común es de 1366 no lo hago de ese tamaño? En realidad hacerlo para una resolución específica es un error, al hacerlo dentro de un rango de 960 a 1000 pixeles el sitio se verá bien desde resoluciones de 1024 px que aún son muy populares hasta resoluciones mayores.

Este tamaño de sitio es muy bueno y aseguras que el sitio podrá ser visto por la mayoría usuarios con un equipo de escritorio “desktop”. Al diseñar la plantilla de tu página web eso es lo menos que deberías procurar.

Sin embargo, los dispositivos con resoluciones menores, tabletas y teléfonos inteligentes quedarán fuera y eso actualmente es un gran porcentaje de usuarios que no verían correctamente tu sitio. La solución a este problema es considerando un sitio con un diseño responsivo, que se adaptará de acuerdo al tipo de pantalla y dispositivo en la que se cargue.

En un sitio responsivo lo usual es que se tenga una versión para las computadoras de escritorio y se consideren modificaciones en el acomodo y tamaño de los elementos para que este se ajuste y tenga una versión para tabletas y otra para teléfonos. También es posible que se tenga una versión para monitores más grandes si se quiere.

No necesariamente tenemos que especificar como sería el diseño de estas versiones mas pequeñas, si nos basamos en convenciones de diseño responsivo para adaptar el contenido, solo bastará con ajustar los mismos elementos de contenido al nuevo tamaño. Ahora si se desea detallar claramente como lucirían estos diseños los tamaños sugeridos serían:

Para la versión para tablets de 940 a 780 pixeles de ancho, para la versión “portrait” o vertical. La orientación horizontal generalmente soporta la versión de escritorio. En este caso no es necesario dejar un espacio en el canvas extra y ese sería el tamaño total del documento de diseño.

Para la versión para teléfonos recomiendo un tamaño de 780 de ancho y serviría para la orientación horizontal y vertical por igual.

En resumen quedaría así:

Dispositivo Resolución

Versión de escritorio (base) 940 a 1000 px

Versión para tabletas 940 a 780 px

Versión para teléfonos 780 px

VIDEOS

INFOGRAFÍA

FUENTE
http://www.psdahtmlpasoapaso.com/blog/que-medida-debe-tener-una-pagina-web