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 varios resoluciones de pantalla. Con un diseño único, debe admitir todo, desde las pantallas móviles más pequeñas hasta los monitores de escritorio ultra HD.
Con diseño web adaptable, establece diseños más generales para dispositivos móviles, tabletas y computadoras de escritorio. Cuándo y cómo cada elemento de la página cambia a su lugar para estos diseños está determinado por puntos de interrupción especiales escritos en su CSS. Estos puntos de interrupción están determinados por determinadas resoluciones de pantalla comunes.
Si bien no apuntará a resoluciones específicas ni establecerá un tamaño fijo para sus diseños, considerará la pantalla resoluciones para establecer puntos de interrupción y crear transiciones suaves para que su sitio se vea bien en todos los dispositivos y tamaño de pantalla.
Resoluciones de escritorio comunes
- 1280x720 HD estándar - Es posible que conozca este mejor como 720p. Era la resolución HD estándar cuando HD se estaba convirtiendo en algo común. Probablemente no encontrará muchos monitores nuevos con esta resolución, pero hay muchos de ellos todavía en estado salvaje desde que eran más populares.
- 1366x768 - Es una resolución algo inusual, pero es muy popular en computadoras portátiles más pequeñas y algunas tabletas. Si se trata de productos de gama baja Chromebooks, es muy probable que esta sea la resolución a la que se dirige.
- 1920x1080 El más común: Cuando piensas en computadoras de escritorio, probablemente estés tratando con 1920 x 1080, más conocido como 1080p. Esta resolución está absolutamente en todas partes. La mayoría de los monitores de escritorio siguen siendo de 1080p, y también lo son muchas computadoras portátiles de tamaño completo. También encontrará una buena cantidad de tabletas en 1080p en el paisaje.
- 2560x1440 - 1440p es otro punto intermedio extraño en la imagen de resolución del monitor. Es más alto de lo que considerarías 2k, pero no es del todo 4k. Dicho esto, es una resolución común en el mercado de monitores de juegos y es una alternativa asequible a los 4k completos. Dependiendo de su sitio, puede que valga la pena o no admitir 1440p.
- 3840x2160 El futuro cercano - Esto es 4k completo o Ultra HD. Si bien el 4k generalmente se reserva para las PC de gama alta, los precios están cayendo, la tecnología de gráficos 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 a 1080p como estándar de facto, por lo que definitivamente vale la pena tener en cuenta 4k ahora.
Resoluciones comunes de tableta / paisaje
Es posible que las tabletas no sean tan populares como lo fueron antes, y el aumento de tamaño de los teléfonos junto con las computadoras portátiles convertibles parece haber reducido significativamente su participación de mercado. Aún así, la contabilidad de las resoluciones de las tabletas se superpone significativamente con las computadoras de escritorio y portátiles. Es posible que pueda usar puntos de interrupción de la tableta para crear puntos de interrupción para ciertos elementos problemáticos que no se ajustan bien a ciertas resoluciones.
- También debe tener en cuenta las resoluciones de la tableta para los dispositivos en modo vertical. No todo el mundo navegará en su tableta en posición horizontal, por lo que debe agregar al menos un punto de interrupción para una tableta común en posición vertical.
- 1280x800 Una resolución que solía ser común - Las tabletas más antiguas, las tabletas de gama baja y las tabletas más pequeñas comúnmente tienen algunas de las tabletas Fire de Amazon que también usan 1280x800. Esta es una de las últimas resoluciones verdaderamente móviles en tabletas.
- 1920x1200 Común en tabletas de 7 "y 8" - En paisaje, puede confiar en los mismos puntos de interrupción que 1080p, la mayor parte del tiempo. Sin embargo, cuando ve 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.
- 2048x1536 tabletas de Apple -Esta es la resolución de tableta más común de Apple. Es lo suficientemente similar a 1440p como para hacer muy poca diferencia, pero nuevamente, el retrato es inusual. En cualquier caso, es una buena idea probar su sitio con 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, ni siquiera es necesario que los tenga en cuenta porque la resolución se encuentra en un rango que ya ha tenido en cuenta. Sin embargo, siempre es una buena idea probarlo 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 todavía están en uso. No es fácil cubrirlos todos. Es por eso que el diseño de dispositivos móviles primero es tan popular. La filosofía es simple. Primero, comience con el diseño móvil más simple y construya sobre él para pantallas cada vez más grandes. De esta manera, incluso los dispositivos más antiguos y pequeños funcionan, pero con menos contenido y menos funciones. El sitio no está paralizado, simplemente muestra solo la información más importante y de acceso común primero.
Aquí hay un truco interesante para lidiar con teléfonos; ponga 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.
- 720x1280 común en dispositivos más antiguos - Durante varios años, 720p se convirtió en el estándar más común para un dispositivo móvil. En ese caso, no necesita preocuparse por el modo horizontal, ya que es el mismo que el de la computadora de escritorio de 720p. Simplemente cubra la resolución vertical con un ancho de 720 píxeles.
- 1080x1920 el término medio - 1080p ha sido el estándar durante mucho tiempo. Sigue siendo muy común en dispositivos de gama media. Si va a admitir solo una resolución móvil, esta es.
- 1440x2560 extremo superior actual - Los dispositivos móviles son cada vez más grandes y las pantallas tienen cada vez más resoluciones. 1440p es un estándar interesante porque hay una variedad de anchos de pantalla, longitudes en este caso, que caen dentro de ese rango. Tanto en computadoras de escritorio como en dispositivos móviles, el más común es 1440x2560. Eso le da a la pantalla la relación de aspecto común de 16: 9. En los dispositivos móviles, importa un poco menos que en las computadoras de escritorio porque la longitud del dispositivo no afecta mucho sus diseños.
Antes de que felizmente solo admita tres resoluciones móviles, también debe darse cuenta de que algunas personas están usando teléfonos ridículamente viejos con pantallas diminutas. Siempre debe crear una resolución mínima para asegurarse de que su sitio se vea bien incluso para alguien que usa un teléfono de hace varios años.
Consejos sencillos para tener en cuenta
Es fácil tomar una gran cantidad de datos sobre resoluciones de pantalla, escurrimiento y comenzar a simular diseños, y eso es exactamente cuando te metes en problemas. Hay algunas ideas clave que debe tener en cuenta siempre que esté diseñando un sitio web, y son válidas en la mayoría de las situaciones, si no en todas.
- El diseño receptivo es fluido: Es posible que sienta la inclinación de crear una gran variedad de puntos de interrupción en su CSS para tener en cuenta todos los tamaños y situaciones de pantalla posibles. Esa es una excelente manera de volverse loco. El diseño web receptivo está destinado a ser lo suficientemente flexible como para llenar vacíos e irregularidades. Si se encuentra definiendo demasiados números estáticos, ya sea en consultas de medios o para los elementos mismos, probablemente se esté dirigiendo por el camino equivocado.
- La gente no siempre maximiza su navegador - Esto va de la mano con el punto anterior. Usted puede diseño para tamaños de pantalla, pero cuando alguien no maximiza la ventana de su navegador, todo eso se esfuma. Si mantiene las cosas en su diseño de forma fluida, puede evitar problemas con los diferentes tamaños de las ventanas del navegador.
- Prueba todo - Intenta romper tu sitio. Esa es la única forma en que encontrará todos los errores e inconsistencias que arruinarán la experiencia de un visitante. Chrome tiene herramientas integradas para probar las resoluciones de los dispositivos con una lista completa de dispositivos populares con los que trabajar. Siempre tiene la opción de arrastrar la ventana de su navegador a diferentes tamaños para ver cómo se ve el sitio en varios tamaños y cómo se adapta y se rompe.
- No 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. No se puede esperar que la gente tenga nuevos dispositivos. Eso se aplica tanto a la resolución de pantalla como a la potencia de procesamiento. Cargando un sitio con demasiados gráficos y demasiados JavaScript es una buena forma de hacer que las personas con un dispositivo lento se vayan y nunca regresen.