Estoy trabajando en la parte de gráficos del sitio web y me pidieron que diseñara un sitio web en Photoshop. Me pregunto cuáles son las dimensiones promedio y los anchos del navegador de un sitio web para poder crear mi maqueta con esas dimensiones.
website-design
Hugh G. Wreckshin
fuente
fuente
Respuestas:
En la era moderna del diseño web, el ancho del navegador es irrelevante. Hay tantos dispositivos diferentes que NECESITA hacer que sus diseños respondan , ya que funcionan para pantallas de cualquier tamaño.
Para hacer esto, debe utilizar algún tipo de sistema de cuadrícula de ancho de fluido y dispositivos específicos de destino utilizando consultas @media .
Las consultas de medios son simplemente diferentes conjuntos de reglas CSS para diferentes tamaños de puertos de vista. Las consultas de medios también responden al cambio dinámico del ancho de su navegador. A medida que hace que su navegador sea más pequeño, la página responde bajando los flotadores o pasando de 12 columnas a 1 o 2. La capacidad de respuesta también reacciona a los usuarios en dispositivos móviles y tablas cuando cambian la orientación de vertical a horizontal o viceversa.
Tamaños dirigidos:
Para ver esto en acción, eche un vistazo a la cuadrícula sin marco . En realidad, no es fluido, pero a medida que ajusta su navegador, va de 14 columnas hasta 1
Twitter Bootstrap , un marco simple de CSS, HTML y JS construido con componentes de interfaz de usuario populares, también es un buen ejemplo de prácticas modernas de diseño receptivo.
Otra cosa que también puede tener en cuenta es la densidad de píxeles . El iPhone 4 y el nuevo iPad tienen pantallas retina que son 2 veces más nítidas que las pantallas normales. Esto hace que la práctica de servir sprites e imágenes en lugar de texto sea casi obsoleta. En un iPad, las imágenes con texto se ven horribles.
Entonces, la respuesta a la pregunta es que no hay un ancho de navegador estándar para el que deba diseñar. Debe tomar sus decisiones de diseño en función de sus usuarios y hacerlo donde sea más accesible para la mayor cantidad de personas.
fuente
Muchas plantillas de diseño usan un ancho de 960 píxeles, ya que se ajusta a la resolución de pantalla ancha común de 1024 píxeles, brinda espacio para la barra de desplazamiento y es fácilmente divisible por 2, 3, 4, 5, 6, 8, 10, 12 y 16, ideal para la columna El diseño.
Ver http://960.gs para un ejemplo.
Otros marcos como bootstrap usan 940px para dar cuenta de algunos márgenes entre las columnas.
fuente
Si está apuntando a navegadores de escritorio, puede acceder fácilmente a aproximadamente 1000 píxeles de ancho, si es necesario.
Resolución de pantalla StatCounter
¿Por qué alrededor de 1000 píxeles cuando las pantallas más típicas son 1024 píxeles o más grandes? Porque tienes que permitir las barras de desplazamiento y la ventana de cromo.
Si se dirige específicamente a los navegadores móviles, entonces 320 píxeles de ancho puede ser una buena opción, aunque los navegadores móviles generalmente escalan el contenido para que se ajuste al ancho de la vista, por lo que 950 o 960 píxeles de ancho pueden ser geniales. Tenga en cuenta que 320 píxeles CSS / HTML equivalen a 640 píxeles de dispositivo en dispositivos de DPI alto como el iPhone.
Resolución de pantalla móvil StatCounter
Su mercado objetivo también puede cambiar las cosas. Si se dirige a un público experto en tecnología, puede esperar que las cosas se desvíen a dispositivos más modernos. Si está construyendo un sitio gubernamental, deberá atender un rango más amplio.
Además, ¿cómo estás construyendo el sitio? Si está utilizando un sistema de cuadrícula, como Blueprint CSS o el Sistema de cuadrícula 960, eso también puede determinar el tamaño (la mayoría de los sistemas de cuadrícula también se pueden cambiar a otros tamaños).
También es posible que desee buscar un diseño receptivo si está tratando de funcionar bien en dispositivos móviles y de escritorio.
fuente
en este momento el tamaño de escritorio difamado en todo el mundo es 1024x768, es bueno hacer un sitio web en tamaño 1003px ...
fuente