¿Para qué ancho debo diseñar al crear un sitio web? [duplicar]

Tamaño de pantalla

Las resoluciones de pantalla más altas finalmente hacen que todo parezca más pequeño.

Un porcentaje muy pequeño de usuarios de Internet todavía usa resoluciones más antiguas como la otrora popular 800×600.

Los sitios que usan un ancho de 720 px aparecen muy pequeños en pantallas de alta resolución y no dejan espacio para una barra lateral. Ahora, la mayoría de los sitios web se quedan en algún lugar alrededor de 960px de ancho. Algunos sitios incluso se adaptan a la última tecnología con sitios mucho más amplios.

| Website                 | Max-Width |
|-------------------------+-----------|
| Stack Exchange Websites | 980px     |
| facebook.com            | 980px     |
| yahoo.com               | 990px     |
| msn.com                 | 970px     |
| wikipedia.com           | 100%      |
| walmart.com             | 720px     |
| bestbuy.com             | 790px     |
| apple.com               | 985px     |

Aunque es importante tener en cuenta los dispositivos más nuevos, creo que el ancho óptimo del sitio web sigue siendo de 960 px. Este ancho se adapta a la mayoría de los dispositivos y hace que su sitio se ajuste bien en pantallas anchas de 1024px y 1366px.

960 es divisible por 2, 3, 4, 5, 6, 8, 10, 12 y 15. Es un sueño para hacer un sitio de cuadrícula perfecto. Esto lleva al recurso popular llamado "sistema de cuadrícula 960".

Legibilidad

Un blog, un sitio de noticias o cualquier otro tipo de sitio de manejo de contenido tiene en cuenta la legibilidad.

“La longitud de línea ideal para el diseño de texto se basa en la fisiología del ojo humano. A una distancia de lectura normal, el arco del campo visual es de solo unas pocas pulgadas, aproximadamente el ancho de una columna de texto bien diseñada, o unas 12 palabras por línea”.

Tanto la tasa de lectura como la retención disminuyen a medida que aumenta el ancho de la columna. Es mucho más difícil leer una página ancha que leer una columna de texto moderada. Para el diseñador web, tenga en cuenta el tamaño de fuente y la resolución. En la mayoría de los casos, un ancho seguro para una columna de lectura es entre 400 y 700 píxeles, y elegir el tamaño de fuente correcto ayudará mucho a sus lectores.

La verdadera pregunta no es "¿qué tamaño de documento?" pero "¿qué ancho de documento?".

Recomendaría diseñar a 1440px X 900px, de esta manera estás en el promedio de tamaños de navegador (pon algunas guías a 1000px para navegadores más pequeños y iPad).

No detenga su diseño en 1000px, detenga su contenido en 1000px.

Por lo general, empiezo con este tamaño y luego aumento mi altura de acuerdo con mi contenido. Recuerde que no puede tener la misma altura para todos los usuarios porque todos tienen diferentes tamaños de navegador / diferentes resoluciones de pantalla.

Debe usar una cuadrícula dentro de su diseño, no es obligatorio, pero lo ayudaría en varias cosas:

• Tener el mismo ancho de columna entre cada sección, mismo espacio
• Sería mucho más fácil convertirlo a css si planea usar un sistema de cuadrícula

(Puede instalar un complemento de Photoshop para generar cuadrícula o descargar algunos .psd con todas las guías)

Puede tener un resumen de los tamaños de navegador de 2014 aquí (y asegúrese de consultar otros tamaños altos ).

Por lo general, los usuarios ahora navegan con un navegador configurado en 1024 x 768 o más. En general, es aceptable usar 1000 píxeles como ancho máximo

Principalmente uso maquetas de 1100 px de ancho, incluso si estoy diseñando para una resolución de 1024 px. Configuré guías dentro de la maqueta para 1000px. Debido a que todo el contenido viene en mi lugar, la altura puede variar.

una vez que echas un vistazo a http://960.gs/