unidades una tutorial todos tamaño smartphones segun resolucion relativas relativa queries que página poner patrones para pantalla pagina monitores medidas medida los insertar imagen hacer fondo etiquetas ejemplos dispositivos diseño crear convertir con completa como codigos codigo body attribute ancho ala ajuste ajustar adaptar absolutas absoluta html css design layout

html - tutorial - ¿Cuál es el mejor ancho absoluto para una página web?



unidades de medida absolutas y relativas en css (10)

  1. Tenga en cuenta que la resolución del monitor a menudo citada en las estadísticas no es necesariamente lo mismo que el ancho interno de la ventana del navegador . Los usuarios pueden tener barras laterales / barras de herramientas adicionales, usar una ventana de navegador no maximizada. Cuanto más grande sea la pantalla, es menos probable que quiera usarla solo para una página.

  2. Las líneas de texto muy largas son más difíciles de leer. El óptimo es de 25 a 30 em (depende de muchos factores, pero no debe limitarse al máximo).

  3. Los navegadores móviles tienen una resolución de pantalla "virtual" que usan para acercar y es ~ 960px en Opera Mini / Mobile y Mobile Safari.

Suponiendo que un diseño fluido no es una opción (ya que esa es una discusión diferente, todos juntos), ¿cuál es el ancho recomendado para el diseño de un sitio? ¿Cuáles son los pros y los contras de los diferentes tamaños?


Consulte http://browsersize.com para obtener estadísticas rápidas sobre las resoluciones de pantalla que usan los usuarios hoy en día. Puede usar http://setmy.browsersize.com para cambiar el tamaño rápidamente de su navegador para emular la visualización de su sitio web a una resolución de pantalla particular. Asegúrese de que su diseño satisfaga al menos la resolución de pantalla más utilizada (1024 x 768).

Además, no necesariamente pretenden ocupar el máximo espacio horizontal. El ancho del texto (número de palabras por línea) idealmente no debería exceder un cierto umbral de usabilidad:

En la resolución de pantalla muy común de 1024 × 768, la mayoría de los sitios web de diseño fijo no utilizan todo el espacio disponible a la izquierda y a la derecha de su contenido. Los diseños flexibles hacen un mejor uso del espacio horizontal, pero tienen dificultades para mantener longitudes de línea utilizables. Los expertos en usabilidad nos han dicho que hay tantas palabras que debes poner en línea. Entre 8 y 12 palabras parece ser la longitud de línea ideal. Los medios impresos, especialmente los periódicos, no dudan en usar líneas aún más cortas. ¿Por qué? Porque pueden hacerlo, diseñando texto en varias columnas.

http://www.alistapart.com/articles/css3multicolumn


El ancho máximo del sitio web para un rendimiento óptimo y la compatibilidad con monitores cruzados es de 960px cuando está relacionado con computadoras de escritorio y portátiles.

Para más detalles sobre cómo y por qué ver el siguiente artículo:

Tamaño de pantalla y resolución


En un momento fue 800px ; sin embargo, cada vez más sitios están comenzando a usar 1000px . Esto se debe al hecho de que, en la mayoría de los casos, las resoluciones bajas de los visitantes están en 1024x768 . Los 24 píxeles adicionales dejan espacio para el navegador Chrome, el relleno y los márgenes que puede querer manipular, etc.

Solo para dar una perspectiva, incluso la nueva ola de netbooks con su pequeña pantalla tiene resoluciones de 1024x768 .

Pero, por encima de todo, conozca a su público como lo sugiere @warren y aproveche eso.


Podría intentar desarrollar diseños múltiples y usar Javascript para cambiar entre ellos dependiendo de la ventana del visitante. InnerWidth

Dicho esto, suelo usar algo entre 950 px y 980 px.


Según these estadísticas, un mínimo de 1024 píxeles de ancho cubrirá la mayoría de los usuarios.


Si usa un ancho fijo que sea más ancho que la pantalla más pequeña que pueda visitar su sitio, molestará y frustrará a los usuarios que tienen que desplazarse hacia los lados para acceder al resto de su contenido.


También utilizo un diseño entre 950 y 980px y siempre centrado a menos que el cliente me pida lo contrario :)


Yo voto para dividir la moción aquí. El hecho de que los tamaños de pantalla sean X no significa que X o algo que esté cerca de él sea el mejor diseño para su sitio web.

El propósito de su sitio web tiene mucho que ver con el ancho que elija.

Muchos expertos en marketing piensan que una columna más estrecha "convierte" más visitas en ventas. Quizás esto se deba a que es más fácil dirigir la atención de las personas si la página es estrecha.

Por otro lado, un sitio dedicado a las imágenes debe mostrarse a la mejor resolución disponible para cada navegador visitante.


Siempre he mantenido con 960px ya que es visible en 1024x768 , y es claramente divisible por 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 y 480 ... así que puedo dividir el diseño de mi sitio (usando la regla de los terceros) limpiamente.

EDIT después de algunos años: considere usar las consultas multimedia de CSS para hacer que su contenido responda a la gran cantidad de dispositivos que existen ahora si no puede usar un diseño fluido. No estoy seguro de que uno pueda reclamar un ancho de píxel para gobernarlos todos en 2012.