tag name keywords hacer etiquetas ejemplos como browser standards resolution

browser - name - meta tags generator



¿Resolución de sitio web recomendada(ancho y alto)? (23)

Acabo de tomar una muestra de resoluciones de pantalla de todos los sitios de los clientes a los que tengo acceso, esto incluye más de 20 sitios en más de 8 industrias aquí están los resultados:
texto alternativo http://unkwndesign.com/so/percentScreenResolutions.png
Basándome en esto, diría que se ve bien en 1024x768 ya que es la mayoría aquí por una posibilidad remota. Además, no se preocupe tanto por la altura, intente evitar hacer la mayoría de las páginas más de 1 a 2 páginas impresas con el tamaño de fuente predeterminado, la mayoría de las personas no leerán una página tan larga y si un usuario instala una barra de herramientas que ocupe espacio vertical, mi preferencia personal es que es su problema, pero no creo que sea un gran problema.

* tenga en cuenta que el porcentaje suma hasta 100.05% debido al redondeo.

¿Hay algún estándar en la resolución de un sitio web común?

Estamos apuntando a monitores más nuevos, tal vez de al menos 1280 px de ancho, pero la altura puede variar, y cada navegador puede tener diferentes alturas de barras de herramientas también.

¿Hay algún tipo de estándar para esto?

Apunto a los monitores de 1024 píxeles (pero no uso el 100% de ese espacio). He renunciado a aquellos con 800x600. Prefiero castigar a unos pocos con hardware obsoleto haciendo que se desplacen si es necesario, en lugar de castigar a todos con equipos nuevos al perder espacio.

Supongo que depende de tu audiencia y de la naturaleza de tu aplicación.

Aquí hay estadísticas de la visualización del navegador en 2008: here

Cerca del 50% de los usuarios todavía usan 1024x768. Si desea que su sitio se vea bien en altas resoluciones, use un diseño flexible.

Aunque el mejor ancho puede ser 1024, tendrá que ajustar la altura de la cuenta para varias configuraciones del navegador (barra de herramientas de navegación, barra de herramientas de marcadores, barra de herramientas de estado, etc.) y tener en cuenta la configuración de la barra de tareas. Bajará rápidamente el 768 a alrededor de 550.

De acuerdo, veo mucha información errónea aquí. Para empezar, la creación de una página web con una resolución determinada, digamos 800x600 por ejemplo, ¡hace que la página se reproduzca correctamente utilizando solo esa resolución! Cuando se muestre esa misma página en la computadora portátil de otra persona, o en el monitor de la PC de la casa, la página se mostrará usando la resolución actual de esa pantalla, NO la resolución que usó al diseñar la página. ¡No cree páginas web para una resolución específica! Hay demasiadas relaciones de aspecto y resoluciones de pantalla diferentes para esperar un escenario de "talla única", que con el diseño web no existe. Aquí está la solución: use las consultas de medios de CSS3 para crear un código de resolución adaptable. Aquí hay un ejemplo:

@media screen and (max-width: 800px) { styles } @media screen and (max-width: 1024px) { styles } @media screen and (max-width: 1280px) { styles }

Mira, lo que acabamos de hacer fue especificar 3 conjuntos de estilos que se renderizan con diferentes resoluciones. En el caso de nuestro ejemplo, si la resolución de una pantalla es mayor a 800px, se ejecutará CSS para 1024. Del mismo modo, si la pantalla que muestra el contenido es 1224 px, el 1280 se ejecutará ya que 1224 es más grande que 1024. El sitio en el que estoy trabajando ahora funciona en todas las resoluciones de 800x600 a 1920x1080. Otra cosa a tener en cuenta es que no todos los monitores con la misma resolución tienen las mismas pantallas de tamaño. Podrías poner 15.4 laptops una al lado de la otra, mientras que ambas tienen el mismo aspecto, ambas podrían tener resoluciones drásticamente diferentes, ya que no todos los píxeles tienen el mismo tamaño en las diferentes pantallas LCD. Por lo tanto, use las consultas de medios y comience a crear su sitio web con una pantalla de computadora portátil con alta resolución, particularmente 1280+. Además, cree cada consulta de medios usando una resolución diferente en su computadora portátil. Puede usar su configuración de resolución en Windows para ajustar 800x600 y crear una consulta de medios en esa res, y luego cambiar a 1024x768 y crear otra consulta de medios en esa res. Podría seguir y seguir, pero creo que ustedes deberían entender el punto.

ACTUALIZACIÓN: Aquí hay un enlace para usar consultas de medios que ayudarán a explicar más, Diseño web innovador para dispositivos móviles con consultas de medios

Ese tutorial le mostrará cómo diseñar para todos los dispositivos. También hay tutoriales para consultas de medios específicamente. Desarrollé todo el sitio para renderizar en todos los dispositivos, todas las pantallas y todas las resoluciones sin subdominios y solo CSS. Todavía estoy trabajando en soporte para tabletas y teléfonos inteligentes. El sitio se reproduce perfectamente en cualquier computadora portátil, o en su TV LCD de 50 pulgadas, y muchas páginas funcionan perfectamente en todos los dispositivos móviles. Si pones todo tu código en la página, ¡tus páginas se cargarán rápidamente! Además, asegúrese de prestar atención a la discusión en ese artículo sobre el CSS "background-size: cover"; o propiedades "contienen", harán que los gráficos de fondo sean fluidos y se puedan reproducir perfectamente en todas las resoluciones.

Siga los tutoriales de los sitios y podrá crear una única página web que presente todo y cualquier cosa.

Diría que solo debe esperar que los usuarios tengan un monitor con una resolución de 800x600. El gobierno canadiense tiene estándares que enumeran esto como uno de los requisitos. Aunque puede parecer bajo para alguien con un elegante monitor de pantalla ancha, recuerde que no todo el mundo tiene un buen monitor. Todavía conozco a mucha gente corriendo a 1024x768. Y no es raro encontrarse con alguien que se está ejecutando en 800x600, especialmente en cafés web baratos mientras viaja. Además, es bueno tener que hacer que la ventana de tu navegador esté en pantalla completa si no quieres. Puede ampliar el sitio en monitores más amplios, pero no hacer que el usuario se desplace horizontalmente. Nunca. Otra ventaja de apoyar resoluciones más bajas es que su sitio funcionará en teléfonos móviles y Nintendo Wii es mucho más fácil.

Una nota sobre al menos 1280 de ancho, tendría que decir que es demasiado por la borda. La mayoría de los monitores que no son de pantalla ancha de 17 o incluso de 19 pulgadas solo admiten una resolución máxima de 1280x1024. Y el portátil con pantalla ancha de 14 pulgadas que estoy escribiendo ahora mismo tiene solo 1280 píxeles de ancho. Yo diría que la resolución mínima más grande que debe esforzarse es 1024x768, pero 800x600 sería ideal.

El consejo en estos días es:

Optimizar para 1024x768 . Para la mayoría de los sitios, esto cubrirá a la mayoría de los visitantes. La mayoría de los registros muestran que el 92-99% de sus visitas tendrán más de 1024 de ancho. Mientras que 1280 es cada vez más común, todavía hay lotes en 1024 y algunos por debajo de eso. Optimiza para esto pero no ignores a los demás.

1024 = ~ 960 . La contabilidad de las barras de desplazamiento, los bordes de las ventanas, etc. significa que el ancho real de una pantalla de 1024x768 es de aproximadamente 960 píxeles . Algunas herramientas se basan en un tamaño ligeramente más pequeño, alrededor de 940 . Este es el ancho predeterminado del contenedor en twitter bootstrap .

No diseñe para un tamaño . Los tamaños de ventana varían. No asuma que el tamaño de la pantalla es igual al tamaño de las ventanas. Diseñe por un mínimo razonable, pero suponga que se ajustará.

Use diseños receptivos y diseños de líquidos . Utilice diseños que se ajustarán cuando se cambie el tamaño de la ventana. La gente hace esto mucho, especialmente en monitores grandes. Esta es solo una buena práctica de CSS. Hay varios frameworks frontales que soportan esto.

Trata al móvil como un ciudadano de primera clase . Obtiene más tráfico de dispositivos móviles todo el tiempo. Estos introducen aún más tamaños de pantalla. Aún puede optimizar para 960, pero el uso de técnicas de diseño web receptivas significa que su página se ajustará en función del tamaño de la pantalla.

Registrar la información de visualización del navegador . Puedes obtener números reales sobre esto. Encontré algunos números here y here y here . También puede configurar su sitio para recopilar la misma información.

El usuario se desplazará, así que no se preocupe demasiado por la altura . El viejo argumento era que los usuarios no se desplazarían y cualquier cosa importante debería estar "por encima del doblez". Esto fue volcado hace años. Los usuarios se desplazan mucho .

Más sobre las resoluciones de pantalla:

Más sobre diseño receptivo:

Herramientas y marcos frontales para diseños receptivos y diseños de líquidos:

En última instancia, esto no es una cuestión de estándares o mejores prácticas para el marcado, sino más bien de conocer a su público y asegurarse de que su sitio web haga lo que usted quiere que haga.

Es más importante tener en cuenta el ancho de la ventana del navegador en lugar de la resolución de la pantalla: no puede suponer que cada píxel de la pantalla se asignará al navegador (e incluso si es así, debe restar el navegador Chrome). Si tiene acceso a análisis que informan el ancho del navegador (ancho de navegador nb , no resolución de pantalla), preste mucha atención.

Es agradable tratar de acomodar el rango más amplio posible de ventanas gráficas, pero hay algunas limitaciones. Algunos desafíos se pueden manejar con tipos de medios CSS , otros no. Algunos pueden manejarse con diseños fluidos. Pero los diseños fluidos no pueden funcionar en todas las situaciones, dependiendo del tipo de información que se muestre, la longitud de la línea, la comodidad de lectura, etc. Algunos diseños fluidos no funcionan en pantallas amplias. La mayoría se rompen cuando se clasifican por debajo de cierto ancho, etc.

Por mucho que me gustaría diseñar para viewports ~ 960 píxeles o más, no siempre puedes hacerlo. Por lo tanto, en algunos casos, es más seguro diseñar ventanas gráficas <= 760 píxeles más o menos (pantalla de 800 píxeles de ancho, maximizada), aunque el tiempo finalmente puede arrojar esta limitación de una vez por todas, al menos para el escritorio. se acerca rápidamente.

Cuando las conversiones son un problema, y ​​tiene un diseño de ancho fijo, es mejor que tenga una buena razón para colocar todo lo que el usuario necesita hacer clic para que la caja registradora se ponga "ka-ching" en cualquier lugar al este del 760. ° pixel

Lo mismo para la navegación primaria.

Finalmente, pruebe su diseño en todo lo que pueda tener. Grande. Pequeña. Escritorio. Mano. Los trabajos. No hay sustituto

Independientemente del tamaño de su navegador objetivo, asegúrese de incluir espacio para las barras de herramientas del navegador, las barras de estado y las barras de desplazamiento como se indica arriba. Internet Explorer (IME) a ​​menudo tiene más de 100 px de espacio vertical en barras de herramientas y barras de estado. Normalmente, si estoy grabando para 1024 x 768, trataría de crear un diseño de alrededor de 960 - 980 píxeles de ancho y 600 píxeles de alto para estar seguro. De esta forma puede acomodar el desplazamiento si es necesario y un espacio en blanco agradable (si el diseño lo requiere). Recomiendo las grillas de YUI para casos en los que deba orientar los tamaños específicos:

Rejilla YUI

Intente apuntar a 1024 como el ancho mínimo. Pruebe cómo se ve en 800, pero no se preocupe demasiado por hacer ese trabajo. Con 800x600, casi ninguno de los principales sitios web funcionará, por lo que las personas que trabajan con esa resolución van a tener problemas todo el tiempo de todos modos.

Si va a ir a un diseño líquido, asegúrese de que el texto no sea demasiado ancho , porque cuando las líneas son demasiado largas, se vuelven difíciles de leer. Esa es la razón principal por la cual la mayoría de los sitios web tienen un ancho fijo.

Las pautas que utilizamos, que parecen ser ampliamente utilizadas y están respaldadas por las cifras que obtenemos de Google Analytics, son diseñar el sitio para que funcione en una pantalla que tiene 1024 píxeles de ancho y 768 píxeles de alto (1024x768). y 1280x800 son las resoluciones más comunes que vemos, que representan al menos el 70% de todo el tráfico).

Esta es la razón por la que ve muchos sitios (este incluido) que usan una columna central de aproximadamente 1000 píxeles de ancho y con el contenido más importante en los 500-600 píxeles superiores, por lo que se ve arriba en las pantallas de este tamaño.

El uso de un diseño de 1000 píxeles de ancho funciona bastante bien en tamaños de pantalla de hasta 1680 píxeles de ancho (normalmente tan alto como se verá en los equipos portátiles, excepto los grandes de 17 "), pero comienza a parecer un poco tonto en 1920 píxeles de ancho (computadoras de alta gama, generalmente estaciones de trabajo), sin embargo, estas resoluciones muy altas no representan un gran porcentaje de tráfico en Internet general: 2% o menos (por otro lado, si tiene un público especializado como este sitio , la figura con altas resoluciones puede ser algo mayor).

Lo mejor es no enfocarse en ninguna resolución específica, sino adaptarse fácilmente a muchas resoluciones diferentes.

Los diseños flexibles o líquidos hacen un poco más de diseño, por ejemplo, si utiliza imágenes de fondo que deben coincidir con la imagen de fondo del cuerpo.

Preferiría hacer diseños de CSS diferentes para el sitio y solicitar que se apliquen en función de la resolución del usuario, o si eso no es posible (aún no lo he analizado), conviértalo en una opción elegible.

Mala idea, creo. El objetivo de separar el contenido del diseño es permitir que su página web se muestre en cualquier tipo de navegador.

Poner en limitaciones artificiales, como un tamaño mínimo de pantalla limitará su mercado.

Habiendo dicho eso, creo que todas las computadoras de escritorio deberían poder mostrar 1024x768. Pero, ¿qué pasa con los navegadores que se ejecutan en iPhones u otros dispositivos con pantalla desafiada, o incluso aquellos que no usan todo su escritorio para el navegador?

En respuesta a su pregunta específica, no, no creo que haya ningún estándar para un área de visualización mínima o común en los navegadores.

Obligar a su usuario a desplazarse horizontalmente es una transgresión grave de UI. A menos que esté construyendo específicamente un sitio web para una población con un tamaño de pantalla conocido, es más seguro garantizar que su diseño funcione con pantallas de 800 píxeles de ancho (aproximadamente el 8% de la población de navegación web si la memoria me sirve). Es aconsejable adaptarlo bien a pantallas más grandes, pero no a costa de que la gente siga navegando a 800x600.

Aquí hay otra cosa a considerar también: no todo el mundo ejecuta su navegador a pantalla completa (no lo hago). Entonces la idea de que si está bien diseñar para un "tamaño de pantalla" específico (y grande) realmente no funciona por una serie de razones.

Actualización el 15/12/2010: cuando respondí esta pregunta por primera vez, 800 píxeles fue una respuesta adecuada. Sin embargo, en este punto, recomendaría 1024 píxeles de ancho (o 960 como señala otra persona). La tecnología marcha en ...

Personalmente, siempre me he limitado al ancho máximo de 1000 px, centrado en el medio de la página (a través del margen izquierda / derecha: automático).

Si está ejecutando a menos de 1024x768, es hora de actualizar. Seriamente. Es casi 2010. Puede comprar monitores lcd de bidones con res nativos de 1280x1024.

Recibo muchas preguntas de los diseñadores sobre ancho no solo qué altura usar para ''mantener todo sobre la tapa''. Aquí hay una respuesta que di recientemente:

En cuanto al ancho, no soy diseñador, pero he leído que el ancho de 960px es el camino a seguir en estos días, ya que se puede dividir en columnas que se ven bien y se adapta muy bien a la mayoría de las pantallas. Si puede, diseñe un diseño líquido, pero esto no siempre es práctico dependiendo de su diseñador, sus habilidades CSS, las imágenes y la cantidad de texto.

(siempre quiere que haya entre 65 y 80 caracteres por línea, con una altura de línea de aproximadamente 1.15). Este es el ancho de columna óptimo para el texto, y se ha demostrado que es mucho más rápido y agradable de leer que las columnas muy anchas o estrechas)

En cuanto a ''arriba del doblez'', solo tengo que advertir sobre el uso de dicho concepto en la web. El desplazamiento horizontal puede y debe evitarse, pero el desplazamiento vertical es algo que no se puede evitar al 100%. Todo lo que puedo decir es que en una pantalla de 1024x768 (al menos el 95% de los usuarios tienen esa o más), debería estar bien con un bloque fijo de 600px alto. Pero existen muchos formatos de visualización diferentes, el navegador Chrome puede ocupar mucho espacio y no todos maximizan la ventana del navegador.

aquí hay algunos otros sitios que dicen más o menos lo mismo, pero la planificación para obtener absolutamente todo ''por encima del pliegue'' para todos es difícil porque entonces puede que solo tengas 400px más o menos, según las estadísticas reales.

Y finalmente un buen artículo extenso que entra en gran detalle (publicaría más, pero SO dice que soy demasiado novato) - Cómo diseñar para los tamaños de navegador - baekdal.com

Sugeriría que eche un vistazo a las consultas de los medios. Esta es una nueva adición útil a CSS que realmente tiene mucho sentido, y te preguntarás por qué esto no se implementó antes. Básicamente, le permite orientar los atributos del navegador (como el máximo y mínimo ancho) directamente a través de CSS y ramificar su código de diseño desde allí. De forma similar a la creación de una hoja de estilo de impresión, puede crear su escritorio y diseños de dispositivos móviles en paralelo en el mismo archivo, lo que da un gran impulso para el desarrollo.

Tenga en cuenta que cuanto mayor sea la resolución, es menos probable que se maximice el navegador de Internet.

Y algunos navegadores tienen barras laterales también.

Depende de lo que quieras renderizar, pero iría con un diseño de ancho variable que no se rompe a un ancho de 800-900.

La altura no es realmente un problema.

Todas las respuestas hasta ahora hablan sobre los monitores de escritorio, pero estoy usando el desbordamiento de pila en mi iPhone y no creo que deba excluir ninguna plataforma móvil apuntando a 1024 o 1280 píxeles horizontales. Marque su página para que el navegador sepa lo que significa todo y que sea utilizable de forma gratuita, incluso en lectores de pantalla y otro kit que no haya pensado.

en realidad existen estándares de la industria para los anchos (bueno, según yahoo al menos). Sus anchos soportados son 750, 950, 974, 100%

Hay ventajas de estos anchos para sus cuadrículas predefinidas (diseños de columna) que funcionan bien con las dimensiones estándar para anuncios si incluyeses alguna.

Una charla interesante que vale la pena ver.

ver la Base YUI

sbeam dijo que ''siempre quieres que haya entre 65 y 80 caracteres por línea''. Eso no es verdad. Wikipedia, por ejemplo, puede tener 180 caracteres por línea. ¿O estaba destinado a ser un sitio web en particular?