Resolución de pantalla y viewport: ¿Son lo mismo?

Mi compañera diseñadora (Nora Ferreirós) hizo un curso sobre proceso de diseño y en una de las clases, tuvo que explicar si era lo mismo resolución de pantalla y viewport, y la verdad, es algo complicado de explicar.

Llevamos ya unos cuantos años con los smartphones en nuestras vidas, y cada día hay dispositivos nuevos. Todos navegamos mucho y cada vez más a través de móvil. Hoy en día se accede a sitios web desde todo tipo de dispositivos: escritorio, tablet, móvil, y estamos en un punto que hay un montón de pantallas como el navegador del coche, neveras, smartwatch…

¿Tenemos que adaptar el diseño a todos los dispositivos?

Aquí entra un poco el debate de los recursos del proyecto. Como desarrolladora, si necesitan que adapte a TODOS los dispositivos, el diseñador o diseñadora de turno, tiene que diseñar por cada dispositivo que quieran adaptar. Esto es algo que me cuesta explicar a algunos diseñadores. También depende del diseño, porque hay muchos de ellos que con que me envíen uno, ya puedo adaptar bien en todos.

Si tu por ejemplo, me diseñas un sitio web en escritorio y no me envías la versión móvil (me ha pasado muchas veces) tengo que hacer yo la tarea del diseñador, es decir, yo me tengo que inventar como adaptar todos esos componentes en esa versión. Y ni sé hacerlo (no es mi trabajo) ni quiero (por tiempo). Y lo peor de todo, es que no saldrá un buen proyecto.

Al final piensa que, en escritorio los diseñadores tienen mucho más espacio y mucha más versatilidad a la hora de diseñar y hacer un diseño más espectacular, ya que, también se navega diferente y hay que pensar en esto.

Te muestro un ejemplo de como mi compañera diseñadora, me envía los diseños para que yo empiece a maquetar:

Mobile First

Lo primero que tengo que explicar, a parte de saber qué es el viewport y que es resolución de pantalla es qué es el Mobile First Design (Primero móvil). Como os he dicho antes, en prácticamente todos los sitios web, hay mínimo de tráfico de un 60% a través de móvil. Hace un tiempo, escribí un artículo sobre este tema que puede ser interesante.

Sinceramente, soy bastante pesada con esto del Mobile First, pero no te haces una idea de los profesionales que todavía no lo aplican a sus proyectos. Y si puedo dar mi punto de vista sobre esto, mucho mejor. Que todos los diseñadores y desarrolladores tenemos derecho a ser felices 🤣🤣🤣

¿Qué es lo que llamamos resolución de pantalla?

Es el número de píxeles que puede ser mostrado en la pantalla. Viene dada por el producto del ancho por el alto con el cual se obtiene una relación llamada «relación de aspecto.

Wikipedia: https://es.wikipedia.org/wiki/Resoluci%C3%B3n_de_pantalla

¿Fácil, no? Al final una resolución de pantalla es el número total de píxeles que pueden ser mostrados por pantalla. Ya sean en el monitor de ordenador de escritorio, un teléfono móvil, una tablet, el navegador del coche, un televisor o cualquier dispositivo que tenga pantalla.

¿Qué es el viewport?

La definición de viewport siempre me cuesta hacerla. Hace no mucho, lo estuve hablando con un amigo, que también es desarrollador, y no sabía la diferencia (es desarrollador de software) y tampoco supe muy bien como explicarle. Así que por eso decidí buscar a ver cómo lo definían otros blogs.

Viewport, (ventana gráfica) es el área visible que el usuario puede ver en una interfaz web. La definición que más me ha gustado ha sido la siguiente:

El viewport de un dispositivo es el tamaño teórico que tiene la pantalla de dicho dispositivo, el cual no tiene por qué coincidir con la resolución real de la pantalla (de hecho no coincide casi nunca en dispositivos modernos).

Fuente: https://bit.ly/3fclar7

Entonces ¿Cuál es es la diferencia entre resolución de pantalla y viewport?

Para este artículo le he pedido ayuda a mi diseñadora, para que me haga una imagen y veas bien la diferencia que hay entre resolución de pantalla, ya que creo que en este caso una muy buena forma de entenderlo es con una imagen.

En definitiva, la resolución de pantalla es la cantidad de píxeles que tiene una pantalla y el viewport es el tamaño visible de una pantalla en cualquier dispositivo. ¿Se pueden confundir? Casi siempre, pero aunque parezcan lo mismo, casi nunca coinciden.

Esta web es una de las que más consulto para saber los dispositivos y sus viewports: https://www.mydevice.io/#compare-devices

Espero que te haya quedado claro y si tienes cualquier duda escríbeme en comentario, poniéndome un mensaje en mi formulario de contacto o por redes sociales.

Imagen destacada: https://www.shutterstock.com/es/image-photo/business-responsive-design-technology-concept-close-459465685