una tamaños tamaño resoluciones resolucion para pagina medidas fondo dispositivos css screen-resolution aspect-ratio

css - tamaños - tamaño para fondo de pagina web



Estrategias para manejar resoluciones de pantalla múltiples y relaciones de aspecto en desarrollo web (6)

Bueno, tratando de mantener la respuesta no demasiado larga, esto es lo que hago.

(A) Siempre comience desde la razón / resolución más utilizada

Si su joe promedio va a estar en una computadora portátil moderna o una computadora de escritorio, probablemente tenga AL MENOS 1024x768 ( w3schools : w3schools elykinnovation ), que le da aproximadamente un ancho útil de 960px (es posible que desee comprobar el sistema 960grid ; hay una muchísimo nuevo marco desde que escribí esto por primera vez). Si es más probable que los usuarios comiencen con un dispositivo móvil o una tableta, primero hay que hablar de ellos. Si es 50% -50%, generalmente es mejor comenzar desde pequeño y luego crecer, ej. Rock Hammer o Foundation

(B) Disposición: ¿fluido o no?

Si su sitio web se puede beneficiar de un ancho mayor, elija un diseño fluido a partir de esta resolución. Tenga cuidado de que al ojo humano no le guste leer el texto a lo largo de líneas largas, por lo tanto, no abuse del diseño del fluido; a menudo se adhieren a 960px con grandes márgenes es aceptable. Es posible que desee agregar (javascript) algunos menús laterales adicionales si realmente tiene mucho más espacio. Pero diseñe su sitio web para trabajar sin JS tanto como sea posible.

(C) Otras resoluciones

Finalmente, es hora de comprobar que con las resoluciones menos utilizadas, las cosas siguen siendo aceptables.

(D) Otros dispositivos, relaciones y otras cosas

No hay muchas opciones para diferentes proporciones; a menudo significa que se está ejecutando en un dispositivo móvil, ipad, AAA o similar.

Mi consejo es ... diseñar específicamente para esos dispositivos.

Al escribir su HTML, tenga en cuenta lo que va a necesitar y recuerde hacer HTML por semántica y no por diseño. Use etiquetas semánticas HTML adecuadas si puede. Evite <bold> o etiquetas similares, y utilice etiquetas y clases que va a peinar con CSS en su lugar.

Use un marco!

Pero aún puede hacer algunos diseños diferentes para dispositivos muy diferentes. No tiene que hacer todo responsive / en el mismo diseño /.

Hay varias maneras de servir un CSS diferente dependiendo del cliente; puedes hacerlo:

  1. del lado del servidor, verificando el navegador en el encabezado HTTP que proviene del cliente, ya sea con su servidor web o su entorno de scripting dinámico, ya sea python / django, php o cualquier otra cosa
  2. javascript (puede obtener fácilmente el tamaño de la ventana)
  3. html - en particular con algunos dispositivos específicos como el iphone

Puede producir fácilmente un diseño genérico para dispositivos pequeños (por ejemplo, dispositivos móviles) siguiendo algunas reglas simples: 1. diseño fluido capaz de ajustarse en anchuras muy pequeñas 2. encabezado / pie de página compacto no demasiado desperdicio demasiado espacio 3. pocos, contenido claro por ''página'' 4. evitar: los efectos ya que no funcionarán en los dispositivos táctiles !!!

Si desea ir más allá, debe verificar las personalizaciones de los dispositivos individuales; un ejemplo es la ventana gráfica del iPhone, consulte la biblioteca Apple ref .

Esto es solo para comenzar. ¡La experiencia y las necesidades específicas impulsarán el resto!

En el pasado, la resolución de pantalla para diseñar era de 800 x 600, y tal vez 640 x 480. Luego vino 1024 x 768, etc., etc.

Pero luego empeora: ahora no solo tenemos diferentes resoluciones sino también diferentes proporciones de aspecto.

¿Qué estrategias usan las personas para adaptarse a la gama de tamaños de pantalla y relaciones de aspecto en constante expansión de la actualidad?

(Por cierto, solo estaba pensando en el equipo portátil / de escritorio, pero por supuesto también hay que considerar los teléfonos inteligentes y las tabletas).

Creo que el diseño web receptivo es la respuesta a su pregunta. Eche un vistazo a estos ejemplos y técnicas ... Diseño web receptivo

Sé que esta sería una opinión un tanto controvertida, pero lo diría de todos modos: no

No diseñe para múltiples tamaños de pantalla o relaciones de aspecto. Hay, por supuesto, algunas excepciones: las aplicaciones web pesadas, como los clientes de correo web, definitivamente pueden hacer más espacio en pantalla, y de todos modos son lo suficientemente flexibles como para acomodar una amplia gama de tamaños de pantalla. Las versiones móviles de dicho sitio web, con un diseño más flexible para acomodar el increíble espectro de tamaños de pantallas móviles, también pueden ser útiles para sitios con altos volúmenes de dispositivos móviles. Sin embargo, si se apega a la llamada ''web de escritorio'', creo que podemos decir que el 95% de las veces hay cosas más importantes que preocuparse que los tamaños de pantalla, la resolución y la relación de aspecto.

En primer lugar, vamos a abordar el más fácil. Realmente no entiendo por qué te importaría tanto la relación de aspecto: ya no nos importa tanto la tontería ''debajo del pliegue'', ¿verdad? La web es un medio vertical: el desplazamiento siempre tendrá un lugar en los sitios web. Tener todo por encima de la línea mágica de 600px es simplemente estúpido.

A continuación, resolución / tamaño de la pantalla: Nuevamente, me resulta difícil de defender.

Los usuarios con pantallas grandes generalmente no maximizan las ventanas de su navegador, ya que encuentran que la mayoría de los sitios web no los aprovechan. Mientras que la web se ajusta al usuario, el usuario también se ajusta a la web. Aunque podría argumentar que se trata de un problema de huevo y gallina, el hecho es que el sitio web generalmente está diseñado para el mínimo común denominador. No defiendo esta posición, sino que la señalo como la tendencia predominante actual en la industria.

Hay ciertas cosas que simplemente no funcionan con una resolución demasiado alta o demasiado baja. Hay, por ejemplo, un pequeño rango de anchuras que permite a las personas leer cómodamente en la pantalla. Más tiempo y la cantidad de movimiento para el ojo a la siguiente línea sería molesto. Demasiado bajo y el texto parecería estrecho. El hecho de que la web fue diseñada para ser neutral en cuanto a la resolución significa que, paradójicamente, no se han hecho muchas disposiciones para aquellos que desean construir diseños fluidos. min-height y max-height ayudaría, por supuesto, pero cuanto más amplio sea el rango, más dificultades tendrás. Cosas como elementos huérfanos, imágenes desplazadas, fondos que se agotan, etc. son inevitables para sitios realmente flexibles construidos con la tecnología actual.

Así que mi opinión es que el método más simple para tratar con resoluciones múltiples es ignorarlo por completo, con la tecnología de hoy en día no hay muchas opciones de todos modos, y diseñar para el mínimo común denominador.

Su sitio no puede funcionar perfectamente para cada pantalla. Incluso si tuviera suficientes horas en el día (o debería decir año / década) para diseñar para cada pantalla posible, tendría que hacerlo cada vez que salga un nuevo dispositivo.

En mi desarrollo, todavía trato religiosamente de evitar el desplazamiento horizontal, y eso no es demasiado difícil con divs flotantes / divs de ancho variable. Pero más allá de eso, realmente estamos en la "hay una aplicación para eso" en la encrucijada, donde se necesita una pantalla especialmente diseñada para dispositivos específicos.

Una estrategia que uso es reducir la dependencia de una sola pantalla: un cliente probablemente no necesite ver toda su página web para hacer lo que vino a hacer. Puede analizar la funcionalidad de páginas web más pequeñas / simples que escalan mejor en dispositivos de diferentes tamaños.

En el trabajo, tengo un poco más de "poder", por así decirlo: puedo desarrollar aplicaciones web internas que están "diseñadas para ejecutarse en ... un navegador específico, una configuración de pantalla específica, etc.". Use otras configuraciones en tu propio riesgo ". Esto, solo después de lograr que los gerentes acuerden pasar una semana extra en desarrollo (y aún más en actualizaciones / mantenimiento futuro) solo para aplacar a ese vegetariano del otro lado del campus que se niega a usar IE realmente no vale la pena el costo . En ese caso, necesitamos otra aplicación web Timmy, no más flexible, que se vea bien en su navegador favorito no IE.

Tenga cuidado con la configuración de DPI alta

Creo que uno de los problemas más indiscutibles que enfrenta el desarrollo web front-end hoy en día es probar en sistemas de alto DPI. Todos han aprendido a probar y probar y probar en diferentes navegadores, pero los diseñadores / desarrolladores no se han puesto a prueba en diferentes configuraciones de DPI.

Los valores altos (o incluso bajos) de PPP rompen los diseños cuando se cambian las fuentes, pero las imágenes no (lo que puede suceder), pueden hacer que las imágenes se vean borrosas / borrosas, y los objetos absolutamente posicionados pueden no aparecer en la ubicación deseada (que Sería devastador para los menús de CSS.) Si nada más, pruebe sus imágenes a una alta DPI y vuelva a procesarlas según sea necesario.

Esto nunca ha sido un problema hasta hace poco con el lanzamiento de Windows 7 y las personas que compran computadoras con monitores de alta resolución. En primer lugar, Windows 7 usa 96DPI por defecto (que es diferente del resto del mundo de la informática que ha utilizado 72DPI como estándar.) Además, Windows 7 ajustará automáticamente la configuración de DPI y he visto personas con DPI del 150% de lo normal (96 DPI en Windows).

Aquí hay un gran enlace para discutir este tema en más detalles: http://webkit.org/blog/55/high-dpi-web-sites/

El objetivo es un excelente sitio web entre navegadores diseñado con estándares web, pero no se olvide de las pruebas DPI.