Aprenda a diseñar tamaños de página basados en resoluciones de monitor

Antes de pasar demasiado tiempo considerando las resoluciones exactas del monitor para su diseño, debe recordar que todo el diseño web moderno es receptivo, lo que significa que está diseñado para adaptarse a varias resoluciones de pantalla. Con un solo diseño, debe admitir todo, desde las pantallas móviles más pequeñas hasta los monitores de escritorio ultra HD.

Con un diseño web receptivo, establece diseños móviles, tabletas y de escritorio más generales. Cuándo y cómo cada elemento de página cambia a su lugar para estos diseños está determinado por puntos de corte especiales escritos en su CSS. Estos puntos de corte están determinados por ciertas resoluciones de pantalla comunes.

& lt; / img & gt ;

Si bien ganó & amp; apos; t apunte resoluciones específicas o configure un tamaño fijo para sus diseños, considerará las resoluciones de pantalla al establecer puntos de corte y crear transiciones suaves para que su sitio se vea bien en cada dispositivo y tamaño de pantalla.

Video destacado

Resoluciones comunes de escritorio

& lt; / img & gt ;
Pixabay

• 1280×720 Standard HD – Puede conocer este mejor como 720p. Era la resolución HD estándar cuando HD se estaba convirtiendo en algo común. Probablemente haya ganado & amp; apos; t encuentra muchos monitores nuevos que usan esta resolución, pero todavía hay muchos en la naturaleza de cuando eran más populares.
• 1366×768 – It & amp; apos; s algo de una resolución inusual, pero es muy popular en computadoras portátiles más pequeñas y algunas tabletas. Si usted y amp; apos; están lidiando con Chromebooks de gama baja, hay una buena posibilidad de que esta sea la resolución a la que usted y amp; apos; re apuntando.
• 1920×1080 El más común – Cuando usted y amp; apos; están pensando en escritorios, usted y amp; apos; probablemente estén lidiando con 1920×1080, mejor conocido como 1080p. Esta resolución está absolutamente en todas partes. La mayoría de los monitores de escritorio siguen siendo 1080p, y muchas computadoras portátiles de tamaño completo también lo son. You & amp; apos; ll también encontrará una parte decente de tabletas en 1080p en el paisaje también.
• 2560×1440 – 1440p es otro término medio extraño en la imagen de resolución del monitor. Es más alto que lo que usted & amp; apos; d considera 2k, pero es & amp; apos; t bastante 4k. Dicho esto, es una resolución común en el mercado de monitores de juegos, y es una alternativa asequible a 4k completos. Dependiendo de su sitio, puede o no valer la pena soportar 1440p.
• 3840×2160 El futuro cercano – Esto es 4k completo o Ultra HD. Mientras que 4k generalmente está reservado para PC de gama alta ahora, los precios están cayendo, la tecnología gráfica está mejorando y la demanda de 4k está siendo impulsada por el mercado de la televisión, donde es mucho más común. Es seguro asumir que en los próximos años, 4k superará fácilmente 1080p como el estándar de facto, por lo que definitivamente vale la pena contabilizar 4k ahora.

Resoluciones comunes de tableta / paisaje

Las tabletas pueden no ser tan populares como antes, y el aumento del tamaño de los teléfonos emparejados con computadoras portátiles convertibles parece haber reducido significativamente su participación en el mercado. Aún así, la contabilidad de las resoluciones de tabletas se superpone significativamente con las computadoras de escritorio y portátiles. Es posible que pueda usar puntos de corte de tabletas para crear puntos de corte para ciertos elementos problemáticos que no encajan perfectamente en ciertas resoluciones.

& lt; / img & gt ;
Pixabay

• También debe tener en cuenta las resoluciones de la tableta para los dispositivos que se mantienen en modo vertical. No todos navegarán en su tableta sostenida en el paisaje, por lo que debe agregar al menos un punto de interrupción para una tableta común en retrato.
• 1280×800 Una resolución que solía ser común – Las tabletas más viejas, las tabletas de gama baja y las tabletas más pequeñas suelen tener algunas de las tabletas Amazon & amp; apos; s Fire también usan 1280×800. Esta es una de las últimas resoluciones verdaderamente móviles sobre tabletas.
• 1920×1200 Común en 7 & amp; quot; y 8 & amp; quot; tabletas – En el paisaje, puede confiar en los mismos puntos de corte que 1080p, la mayor parte del tiempo. Sin embargo, cuando ves uno de estos en el paisaje, la situación es muy diferente. Esta resolución es común entre muchas tabletas de 7 y 8 pulgadas, incluido Amazon Fire.
• 2048×1536 Apple Tablets – Esta es la resolución de tableta más común de Apple & amp; apos;. Es similar a 1440p para hacer muy poca diferencia, pero nuevamente, el retrato es inusual. En cualquier caso, es una buena idea probar su sitio a esta resolución para asegurarse de que no ocurra nada extraño en los iPads.

Las tabletas de mayor resolución comienzan a entrar en territorio de escritorio. La mayoría de las veces, usted no necesita rendir cuentas porque la resolución cae en un rango que usted y otros ya han tenido en cuenta. Sin embargo, siempre es una buena idea probar, para estar absolutamente seguro.

Resoluciones móviles comunes

Los dispositivos móviles son fácilmente los más complicados de manejar. Existe una gama tan diversa de dispositivos, incluidos los más antiguos que aún están en uso, no es fácil cubrirlos a todos. Es por eso que el diseño móvil primero es tan popular. La filosofía es simple. Comience primero con el diseño móvil más simple y desarrolle en él pantallas más grandes y grandes. De esta manera, incluso los dispositivos más antiguos y más pequeños funcionan, pero con menos contenido y menos funciones. El sitio es & amp; apos; t hampstrung, simplemente muestra primero la información más importante y de acceso común.

& lt; / img & gt ;
Pixabay & amp; amp; nbsp ;

Aquí & amp; apos; s es un truco interesante para tratar con teléfonos; gire las resoluciones de escritorio de su lado. Claro, hay valores atípicos inusuales, pero la mayoría de los teléfonos actuales siguen este patrón.

• 720×1280 común en dispositivos más antiguos – durante varios años, 720p activado fue el estándar más común para un dispositivo móvil. En ese caso, usted no necesita preocuparse por el modo horizontal, ya que es lo mismo que el escritorio 720p. Simplemente cubra la resolución del retrato con un ancho de 720 píxeles.
• 1080×1920 el término medio – 1080p ha sido el estándar durante mucho tiempo. Todavía es muy común en dispositivos de rango medio. Si usted y amp; apos; van a admitir solo una resolución móvil, esta es.
• 1440×2560 extremo superior actual – Los dispositivos móviles siguen creciendo y las pantallas siguen obteniendo resoluciones cada vez más altas. 1440p es un estándar interesante porque hay una variedad de anchos de pantalla, longitudes en este caso, que caen en ese rango. Tanto en computadoras de escritorio como en dispositivos móviles, la más común es 1440×2560. Eso le da a la pantalla la relación de aspecto común de 16: 9. En dispositivos móviles, importa un poco menos que los escritorios porque la longitud del dispositivo no afecta mucho a sus diseños.

Antes de que solo respalde tres resoluciones móviles, también debe darse cuenta de que algunas personas están usando teléfonos ridículamente viejos con pantallas pequeñas. Siempre debe incorporar una resolución mínima desde abajo para asegurarse de que su sitio se vea bien incluso para alguien que usa un teléfono desde hace varios años.

Consejos simples a tener en cuenta

Es fácil tomar un montón de datos sobre resoluciones de pantalla, escorrentía y comenzar a burlarse de diseños, y eso es exactamente cuando te metes en problemas. Hay algunas ideas clave a tener en cuenta cada vez que usted y amp; apos; re diseñan un sitio web, y son válidas en la mayoría de las situaciones, si no en todas.

• El diseño receptivo es fluido – Puede sentir la inclinación de construir una gran variedad de puntos de corte en su CSS para tener en cuenta cada tamaño y situación de pantalla posible. Esa es una excelente manera de volverse loco. El diseño web receptivo debe ser lo suficientemente flexible como para llenar vacíos e irregularidades. Si te encuentras definiendo demasiados números estáticos, ya sea que estén en consultas con los medios o para los elementos mismos, tú y otros probablemente se dirigen por el camino equivocado.
• Las personas donan & amp; apos; t siempre maximizan su navegador – Este tipo de va de la mano con el punto anterior. Puede diseñar para tamaños de pantalla, pero cuando alguien no lo hace y lo hace, no puede maximizar la ventana de su navegador, todo eso se convierte en humo. Al mantener las cosas en su fluido de diseño, puede evitar problemas con diferentes tamaños de ventana del navegador.
• Pruebe todo – Intente romper su sitio. Esa es la única forma en que usted y amp; apos; van a encontrar todos los errores e inconsistencias que arruinarán la experiencia de un visitante y amp; apos; s. Chrome tiene herramientas integradas para probar resoluciones de dispositivos con una lista completa de dispositivos populares para trabajar. Siempre tiene la opción de arrastrar la ventana de su navegador a diferentes tamaños usted mismo para ver cómo se ve el sitio en varios tamaños y cómo se adapta y se rompe.
• Don & amp; apos; t Espere que sus usuarios tengan lo último y lo mejor – Esto se remonta al punto anterior sobre teléfonos más antiguos y pequeñas resoluciones. Puede & amp; apos; t esperar que las personas tengan nuevos dispositivos. Eso se aplica tanto a la resolución de pantalla como a la potencia de procesamiento. Cargar un sitio con demasiados gráficos y demasiado JavaScript es una buena manera de hacer que las personas con un dispositivo lento se vayan y nunca regresen.

& amp; # x203A; Informática