Cuando tomo Responsive Web Design (RWD) y busco pantallas de diferentes formas y tamaños, creo que los consumidores no tienen en cuenta que la resolución de la pantalla no es tan grande como la de un sitio web (y se ven bien) en su dispositivo móvil.
Ya se trate de tabletas / iPads, teléfonos inteligentes / iPhones, parece haber una idea errónea de que cualquiera que sea la resolución que el dispositivo enumera en su página de especificaciones, bueno, ahora esas son las dimensiones que debe asumir el sitio web. O más al punto, debería ser capaz de asumir.
Pero esta suposición es incorrecta y con una buena razón: si un sitio web sigue estrictamente la resolución de un dispositivo (como un iPad con soporte Retina), se verá muy pequeño.
Resolución de pantalla vs ventana gráfica
Donde la confusión parece estar (y culpo en parte a los fabricantes por esto) es doble:
la resolución según la lista del fabricante
Entender DPI (puntos por pulgada) o PPI (píxeles por pulgada) y cómo afecta a cada dispositivo, especialmente cuando el tamaño físico de la unidad es el mismo que el de aquellos con resoluciones más bajas.
La ventana gráfica resultante (el área de visualización real del dispositivo que está sosteniendo en la mano) es por lo general mucho más pequeña de lo que podría pensar, si solo tiene en cuenta la resolución.
El ejemplo de iPad
En cuanto a un ejemplo de tableta popular, el iPad de Apple, la resolución del dispositivo ha aumentado dramáticamente desde que salió al mercado, con la 1ra generación y el iPad 2 con una resolución de 1024w x 768h (cuando se mantiene en modo horizontal). Desde el iPad 3 y la presentación de la pantalla Retina, la resolución ha aumentado a 2048w x 1536h y, sin embargo, lo importante es que el tamaño de la pantalla física no ha cambiado . La ventana gráfica de un iPad de primera generación es, por lo tanto, exactamente la misma que la del iPad 4 o iPad Air.
diferentes resoluciones de ipad
En lugar de aumentar el tamaño de la pantalla física, Apple descubrió una manera de meter más píxeles en el espacio que ya tenían, lo que significa que el iPad 1/2 tiene 132 ppp (o ppi - pixels por pulgada) y cuando se lanzó el iPad 3, 264 ppp.
Otros fabricantes se apresuraron a seguir su ejemplo. El problema que encuentro es que la ventana gráfica no es algo que se encuentra usualmente al mirar las especificaciones de un dispositivo en particular.
Trabajando con viewports
Con la gran cantidad de dispositivos que existen en la actualidad, con diferentes tamaños de pantalla y resoluciones cada vez mayores, como desarrollador web cada vez es más difícil crear sitios web que adopten un diseño receptivo y que sigan teniendo el aspecto deseado en las muchas tabletas y teléfonos disponibles.
Conocer la ventana gráfica de estos dispositivos es clave para este desafío, y luego desarrollar mis consultas de medios de forma apropiada. Debo mencionar aquí también que no trato de enfocarme en cada dispositivo específico cuando se trata de consultas de medios, y en su lugar busco tener varios “bloques” adecuados que se adapten bien a un mayor rango de dispositivos (manteniendo las imágenes fuera de la ecuación aquí para el momento).
Habiendo dicho todo eso, aún necesitaba saber la vista de los dispositivos, así que sabía mejor dónde poner mis “puntos de quiebre”. Y para ese fin, recientemente encontré un par de sitios web muy útiles que me ayudaron con eso:
la publicación de i-Skool sobre diseño web para teléfonos móviles y tabletas: tamaños de ventanas
Otro sitio simplemente llamado tamaño de ventanas
Ambos tienen una gran lista de dispositivos (y también se actualizan con bastante regularidad), y me gusta que el enlace de i-Skool me muestre el tamaño de la pantalla física y el valor de dpi, mientras que Viewport Sizes tiene una opción de filtro muy práctica.
Curso de Responsive Design 2016
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
