¿Existe un tamaño estándar para el ancho de un sitio web en una maqueta? ¿Cuál es ese tamaño? ¿Por qué?
Respuestas:
Comienzo la mayoría de mis maquetas a 1200px de ancho a pesar de que estoy diseñando para una resolución de 1024px. Configuré guías dentro de la maqueta para 1000px. La altura puede variar. La razón por la que amplío mi archivo de maqueta es para ver cómo se siente el diseño con espacio para respirar a su alrededor. La mayoría de las personas usan más de 1024px en estos días.
¿Existe un ancho estándar para diseñar maquetas de páginas web?
¿Si no talvez?
Érase una vez (ver más abajo) el diseño web intentó en gran medida crear una vista única que se ajustara razonablemente bien en la mayoría de las pantallas. En los últimos cinco años, eso ha cambiado drásticamente con la adopción de Responsive Web Design (RWD).
RWD es un principio de diseño de hacer diseños de una manera que les permita ajustarse razonablemente bien en cualquier dispositivo, independientemente del tamaño del dispositivo.
En el desarrollo web, las consultas de medios a menudo se utilizan para aplicar diferentes conjuntos de estilos a las páginas web en función de una serie de factores. Algunos factores comunes incluyen:
Debido a que los estilos pueden orientarse a tamaños de pantalla específicos, no es raro crear múltiples conjuntos de diseños que se dirigen a rangos específicos.
Para ser claros, no hay "estándares" establecidos. No existe un organismo u organización de gobierno que diga "los diseñadores deben hacer diseños siguiendo estas pautas de dimensionamiento", porque al final es una decisión decisiva.
Dicho esto, la industria del desarrollo web ha creado orgánicamente un conjunto de puntos de interrupción comunes que ocurren una y otra vez.
Los puntos de interrupción típicos son para el ancho de pantalla actual y son comúnmente:
unidades en px
La razón de estos números específicos es bastante mundana. El iPhone original tenía una pantalla con dimensiones de 320 × 480; el iPad original tenía una pantalla con dimensiones de 768 × 1024; 1600 × 1200 son comunes para resoluciones de pantalla más grandes.
Si bien es común ver maquetas en algunos o todos esos puntos de interrupción, también es común tener que proporcionar representaciones múltiples de una página en particular que muestre puntos de inflexión de diseño intermedios.
Es posible que una composición de ancho fluido que muestre elementos apilados a 768 px de ancho deba incluir un diseño para 900 px donde los elementos se hayan cambiado a dos columnas. Si considera que necesita proporcionar muchos conjuntos de diseños para estos puntos de interrupción intermedios, le recomendaría encarecidamente diseñar componentes individuales y mostrar los puntos de interrupción donde un componente cambia en función de cada componente, sin incluir el resto de la página en la maqueta.
Esto también ayuda a evitar problemas comunes de diseño en los que faltan componentes específicos de la interfaz de usuario o no son congruentes entre los puntos de interrupción.
La siguiente es la versión anterior de esta respuesta que estoy guardando por el bien de la posteridad, pero no ha sido relevante por algún tiempo
Me sorprende que nadie haya mencionado esto todavía:
Google tiene una buena herramienta de desarrollo llamada
Debería responder a tu pregunta solo.
Tengo algunas notas sobre las tendencias actuales:
Actualmente, la gran mayoría de los usuarios tienen resoluciones de 1024x600 (tableta / netbook) o mayores. 24pxDebe recordar eliminar alrededor de las barras de desplazamiento, lo que deja un bonito ancho de incluso 1000 px. En cuanto a la altura: los usuarios de la web son muy buenos para desplazarse verticalmente, ya que se han acostumbrado a desplazar las ruedas de los ratones. La altura inicial es importante principalmente para las primeras impresiones.
Los usuarios no son tan buenos para desplazarse horizontalmente, por lo que no se recomienda hacer diseños de más de 1000 px.
Además, muchos usuarios con pantallas más grandes no usan toda su pantalla para su navegador web. Especialmente ahora que Windows 7 incluye la funcionalidad simple de arrastrar y dock para colocar una ventana en la mitad de la pantalla.
En resumen:
Respuesta corta: 775x400 para 800x600, y para 1024x768 use 1000x500.
Respuesta larga: nunca puede estar seguro de que su presentación se verá bien en su computadora cliente (podría tener un sistema operativo diferente, navegadores, un monitor calibrado diferente o una resolución más baja con una fuente grande configurada para leer mejor). Por esta razón, tiendo a mostrar siempre presentación en mi computadora si puedo.
Si no puedo mostrarlo en mi PC sobre el tamaño, utilizo esas mis reglas personales (No tome mis medidas como sagradas, cada uno tiene lo suyo):
Como tamaño seguro, es bueno optimizar para 800x600 (eliminando la barra de desplazamiento y la barra superior, uso 775x400 como "por encima de la línea"). Pero hoy en día con una pantalla más barata con un estándar más amplio, comencé a diseñar para 1024x768 (1000x500)
Lo importante es optimizar no para la altura sino para el ancho. La altura se puede resolver con un simple desplazamiento de un mouse, con el ancho si no tiene un mouse mac no puede desplazarse horizontalmente para ver más información. Sin embargo, es bueno saber dónde se podría colocar más o menos la línea inferior de la pantalla, incluso si es imposible determinarlo con precisión.
NOTA: Utilizo una altura tan baja incluso en 1000px porque las personas tienden a tener muchas barras de desplazamiento adicionales en el navegador básico (como GoogleRank por ejemplo o marcadores, y muchos otros), por lo que siempre me gusta diseñar para la peor situación posible.
Ps lo siento por mi mal inglés :)
Tenemos un programa de seguimiento que nos brinda información sobre nuestros usuarios. Más de la mitad están a 1024x768. Así que lo uso como el tamaño de monitor "estándar".
Sin embargo, esa no es su área en vivo para su sitio: las personas tienen barras laterales, no siempre abren la ventana del navegador a todo lo ancho, etc.
Me gusta el sistema de cuadrícula 960 . Los números son flexibles y el sitio web ofrece muchas plantillas para descargar. Lo uso para mis maquetas, y todos han sido muy felices hasta ahora.
Tendría que buscar estadísticas para respaldarme (como esta publicación de blog SO ), pero 1024x768 ha tomado o está tomando el control como el denominador común estándar para la resolución de pantalla. Diseño maquetas web para audiencias generales con un ancho de 1000 px para tener en cuenta las barras de desplazamiento y los bordes de las ventanas con una resolución con un ancho de 1024 px. Para audiencias más específicas, Pekka tiene razón en su comentario. Descubra cuál es la norma para el público objetivo.
El tamaño del navegador hoy es una pregunta difícil porque las personas usan dos tipos de dispositivos, computadoras con resoluciones cada vez más altas y teléfonos con resoluciones relativamente bajas.
Si está haciendo que un sitio sea un sitio que la mayoría de las computadoras de hoy (la mayoría tiene un 90% o más) tienen una resolución mínima de 1024. Si desea un poco menos de computadoras, pero todavía un buen porcentaje de 1200 también está en ese rango.
Si está creando un sitio móvil, la mayoría de los teléfonos alcanzan un máximo de 480 px para la navegación horizontal, pero la mayoría de ellos también tienen algún tipo de sistema de representación para sitios más grandes.
La pregunta sobre el tamaño tiene que ver con su propia audiencia, si su objetivo es un grupo de diseñadores, puede tener un sitio más grande, si son personas de mediana edad que buscan un seguro de automóvil nuevo, entonces debería trabajar un poco más pequeño, y si es por teléfono usuarios para mirar mientras están en sus teléfonos, aún más pequeños.
Depende totalmente de su sitio web, por lo general, no tendré más de 1000 para esos clientes en máquinas viejas. Sin embargo, los estudios ahora muestran que el diseño para 1200 ahora es aceptable en el mundo del diseño, por lo que definitivamente es motivo de reflexión.
Su plan debe ser alcanzar el mínimo común denominador y si ese es Joe Dinosaur en una máquina Windows 95 de 800x600, entonces es a quien debe atender.
También depende totalmente del diseño de su sitio web. Actualmente estoy diseñando un sitio web para mi agencia y tendrá un ancho de 800, es decir, no para atender a nadie específico.
Lamentablemente, no hay ningún tamaño estándar, ya que ahora se accede a las páginas web en varias pantallas. Aunque para estar más seguro, investigue las resoluciones más populares (por ejemplo, 1024x768) y diseñe en función de la popularidad.
La respuesta es: No, no existe un 'estándar'.
Recomiendo usar 960 px para el ancho de su plantilla, ya que la mayoría de las resoluciones de pantalla son 1028 px, por lo que la barra de desplazamiento no aparecerá y verá el fondo que utilizó también.
Le sugeriré que use 1024px para el ancho estándar. Porque, la cantidad máxima de PC construida con monitor CRT y la resolución de este monitor es 1024 * 768px.