2.4.3. Resolución de pantalla

La resolución de pantalla consiste en la cantidad de píxeles de ancho y alto que soporta cada interfaz de video, monitor, TV, teléfono “inteligente” (smartphone) o dispositivo móvil. La resolución configura el escenario visible de cada pantalla.

Resoluciones de pantalla

El tamaño estándar recomendado para el diseño de páginas web es el SVGA de 800 x 600 píxeles, a fin de brindar soporte a los usuarios que aún utilizan esta resolución de pantalla.

Generalmente en nuestras computadoras utilizamos resoluciones más amplias (1024 x 768px, 1280 x 1024px, etc.) pero algunos monitores o placas de video no pueden mostrar en la pantalla más que 800 x 600 píxeles, por lo que esta medida se sigue considerando como el tamaño estándar para la Red aunque para la mayoría de los casos haya quedado obsoleto.

Si diseñamos un MDM excediendo ese ancho, la página web, sus imágenes y los renglones de texto ya no disponen del espacio necesario para reproducirse en su totalidad dentro del área de un monitor configurado con esa resolución. En ese caso aparece una barra de desplazamiento horizontal (scroll) en la parte de abajo del navegador, lo que genera incomodidad para la lectura y una experiencia de usuario muy deficiente.

Leer con atención

Esta especificación condiciona las dimensiones de las imágenes que se integran al diseño web, ya que si incluimos imágenes muy anchas, excederemos el espacio disponible para la resolución estándar.

El tamaño de las imágenes y el peso de los archivos vuelven a ser consideraciones que requieren especial atención, a partir de la popularidad de dispositivos móviles que permiten explorar sitios web en pantallas muy pequeñas. Para estos casos se recomienda no exceder el tamaño de 480 píxeles de ancho, aunque los primeros teléfonos móviles no podían abarcar imágenes superiores a los 320 píxeles de ancho.

diferentes soportes de páginas web — Diferentes soportes de una misma página web. Fuente: <themeforest.net/>.

Tamaño de las imágenes en relación a las dimensiones de la pantalla

Para reflexionar

-¿Por qué en diseño web se recomienda acotar el límite de ancho máximo de las imágenes a 480 píxeles?
- Para brindar soporte a los usuarios que utilizan resoluciones de pantallas de 800 píxeles de ancho en computadoras y de 480 píxeles de ancho en teléfonos móviles.

Observemos que ocurre con el tamaño de las imágenes en la interfaz de una página web que se reproduce en una pantalla de resolución estándar:

Página web que brinda soporte a la resolución de pantalla estándar

Página Web que da soporte a resoluciones de pantalla estándares — Esquema de una pantalla con un **área total de 800 x 600 píxeles**. El **menú de navegación** a la izquierda mide 200 píxeles de ancho. El **área de contenido** ubicado a la derecha dispone de 600 píxeles de ancho total. A cada lado del **flujo de contenido** se disponen dos columnas de 50 píxeles para separar el texto del menú izquierdo y la barra de *scroll* a la derecha. Quedan 500 píxeles disponibles. **La imagen mide 480 píxeles de ancho**, dentro de los 500 píxeles del flujo de contenido. Quedan 20 píxeles libres, 10 a cada lado como área de seguridad.

Captura de pantalla con un ejemplo del esquema anterior — Un ejemplo del esquema anterior en una página web que brinda soporte a pantallas de 800 x 600 píxeles. Nótese que hay una **barra de desplazamiento** vertical, pero no una horizontal.

Ahora observemos que ocurre en la interfaz de una página web que se reproduce en una pantalla de resolución estándar cuando integramos una imagen más ancha de 480 píxeles. Para el ejemplo vamos a integrar una imagen de 720 píxeles:

Página Web que NO brinda soporte a la resolución de pantalla estándar

Página Web que NO brinda soporte a resoluciones de pantalla estándares — Esquema de una pantalla con un **área total de 800 x 600 píxeles**. El **menú de navegación** a la izquierda mide 200 píxeles de ancho. El **área de contenido** ubicado a la derecha dispone de 600 píxeles de ancho total. A cada lado del flujo de contenido se disponen dos columnas de 50 píxeles para separar el texto del menú izquierdo y la barra de *scroll* a la derecha. Quedan disponibles 500 píxeles. **La imagen mide 720 píxeles** de ancho. Por lo tanto, ensanchará a 720 píxeles los 500 píxeles originales del flujo de contenido, además de los 50 píxeles a cada lado. El área de contenidos ahora requiere 820 píxeles y el ancho total de la página web se expande a **1020 píxeles**.

En estos casos el flujo de contenido adopta la medida del objeto más ancho en la página, y repercutirá en la columna de texto. Así, para leer esos párrafos habrá que mover la barra de desplazamiento inferior cada vez que pasemos al próximo renglón.

Leer con atención

La complejidad de algunos gráficos requiere un tamaño de ancho de imagen mayor a ese límite. Un ejemplo frecuente son las capturas de pantalla, los mapas o las infografías muy elaboradas. Existen soluciones muy profesionales a este inconveniente, pero una alternativa simple consiste en ampliar el archivo de imagen en una ventana distinta de la página de contenidos, tal como se reproduce el gráfico de teoría del lenguaje visual.