¿En qué tamaño debo diseñar un sitio web?

Cambio mi tamaño máximo periódicamente según las estadísticas del navegador. Las estadísticas de visualización del navegador me dicen que la gran mayoría de los usuarios pueden manejar un ancho de 1024px , así que ahora estoy usando eso. Anteriormente usaba 960 y hace varios años estaba usando 800.

Mis sitios actuales son receptivos, por lo que utilizaré 1024 como la versión máxima de escritorio y luego estableceré puntos de interrupción para dispositivos más pequeños mediante consultas de medios.

En términos de su diseño y archivos de presentación, puede trabajar con el máximo. En Photoshop, generalmente empiezo con un documento de 1024 px de ancho y establezco guías en los bordes. Luego agrando el canvase a 1424 para poder ver un poco del color de fondo en cada lado. Aquí hay una imagen de muestra de cómo se vería eso.


Cuando mi diseño está listo, guardo una copia como .pdf para compartir con el cliente. Si el sitio responde, es posible que también desee presentar versiones móviles. 768 o 640 es bueno para mediano y 320 para pequeño. No uso fondos para esos.

Por lo general, dejo que mi diseño dicte mis puntos de interrupción para que los números puedan variar. Por ejemplo, si estoy usando 3 columnas en el tamaño completo, decidiré el centro en función de lo que se ve bien para 2 columnas, luego pequeño para donde quiero que cambie a una columna.

En cuanto a las sugerencias, es posible que desee buscar en cuadrículas como el Sistema de cuadrícula 960, que vienen en una variedad de tamaños. En los sitios que construyo en los que uso una columna del lado izquierdo como menú lateral y el área correcta para el contenido, encuentro que a menudo termino teniendo un área de contenido de 640 px de ancho con márgenes a su alrededor. Como resultado, 640 es uno de los anchos estándar para los videos de YouTube, por lo que puede ser útil si el sitio va a insertar videos. Creo que es una reliquia de mi uso de la cuadrícula 960.

Honestamente, ya no hay un tamaño definitivo. El diseño receptivo significa que los usuarios están viendo su diseño en cientos de resoluciones y anchos de pantalla diferentes. En términos generales, muchas personas (incluido yo mismo) usan 1080px como tamaño de escritorio para el contenedor de todos los elementos. Generalmente es un tamaño seguro.

Además, si está diseñando un sitio receptivo, es importante darle al desarrollador una idea de cómo se verá la versión móvil del sitio. Detalles específicos como la cantidad de píxeles que deben tener las columnas o las canaletas es un punto discutible en la actualidad.

Lo más probable es que los anchos de los componentes de la página se midan en porcentajes al final. Personalmente uso un ancho total de 1200 píxeles porque me resulta más fácil dividirlo en porcentajes de uso común cuando diseño:
10% es 120 px,
20% es 240 px,
25% es 300 px,
33.3% es 400px, etc.

Personalmente, diseño maquetas de interfaz de usuario con un ancho de 1280 píxeles porque es ideal y se puede usar para dispositivos de 1280 píxeles y 1366 píxeles de ancho.

1280px y 1366px son las resoluciones de pantalla más comunes.