Medidas diseño web

¿Cuáles son las medidas de una página web?

En el diseño web ésta es una pregunta muy importante, y la realidad es que no tiene respuesta precisa… Es una decisión que se debe tomar antes de empezar el diseño, pero no hay nada que diga cual es la opción adecuada.

Pero no tienes de que preocuparte, estás en tu programa de diseño favorito por que vas a comenzar a trazar una nueva página web, comienzas definiendo la medida del canvas en tu nuevo documento y te preguntas ¿cuáles son las medidas de una página web? ¿Existe una medida estándar o al menos un tamaño sugerido?

Al final de este artículo incluiremos unas medidas que podrían serte de gran ayuda pero en definitiva antes de elegirla debes considerar los tres factores siguientes:

La resolución de pantalla

La resolución de pantalla es el factor más importante a considerar para el tamaño de un sitio web, aunque no el único, para esto hay que tener en cuenta las resoluciones de pantalla más comunes. Hasta hace un tiempo la resolución más popular era 1024×768 pixeles pero eso ha cambiado en los últimos años y ahora el tamaño más común es 1366×768, en segundo lugar un tamaño mucho mayor 1920×1080.

Ahora, si la resolución de pantalla más común es de 1366×768 ¿debería diseñar el sitio de este tamaño? Pues tampoco es necesariamente, te seguiremos explicando los otros factores que también debes considerar.

Las personas a las que se dirige

Siendo más específicos al tipo de dispositivos que usan esas personas, si nos dirigimos a un sector con un poder adquisitivo alto sus equipos posiblemente tengan resoluciones muy altas, si el tipo de sitio va a ser mayormente consultado por personas que trabajan en oficinas de gobierno la resolución promedio de sus equipos serían de unos 1280 a 1024. El sitio también podría estar dirigido a personas que solo lo visiten a través de sus teléfonos inteligentes y una resolución de 800 px bastaría.

El tipo de contenido

Este es otro factor importante que se debe tener en cuenta, si el tipo de contenido son principalmente textos, como los blogs o los sitios de noticias, no es necesario pensar en un ancho de pantalla de 1900px ¿se imaginan leer ese párrafo extra ancho? tendríamos que mover la cabeza como carro de maquina de escribir para leerlo. Las columnas de texto no muy anchas se agradecen. En cambio si el contenido del sitio son principalmente imágenes o vídeo de alta calidad lo recomendable es hacer sitios pensado en resoluciones grandes que permitan destacar su contenido mucho más.

La recomendación

Nuestra recomendación para la medida de un sitio web es de 940 a 1000 pixeles de ancho para el área de contenido de la página web. El canvas, lienzo o área de trabajo en tu programa de diseño, como Photoshop, que tenga unos 1200 o 1400px en total. Por el alto no hay límite, verticalmente podrá crecer tanto como lo requiera tu contenido. De acuerdo a los estándares y tendencias actuales mostrar el contenido haciendo “scroll down” es una magnífica practica de usabilidad que incluso es obligada para los dispositivos móviles.

Se recomienda hacer el documento cuando menos unos 400 pixeles más ancho que el área de contenido para que consideres el fondo que tendrá el sitio web. Si tendrá una textura, un patrón o color específico se podrá percibir como luce en su conjunto con el contenido del web. Normalmente el área de contenido va en el centro del documento dejando unos 200px de cada lado.

Si vas a utilizar una imagen como fondo del sitio entonces te recomiendo considerar dejar esos 200 pixeles de cada lado libres después de que termina la imagen para que te asegures que no queda cortada la imagen. O si vas a querer que sin importar la resolución la imagen siempre se vea a todo lo ancho de la pantalla deberás elegir una imagen suficientemente grande y cuidada de tal manera que cuando se escale no se vean los pixelotes mas feos.

Eso si, el tamaño en bytes de esa imagen de fondo no debe ser muy pesada o tardará muchísimo en cargar, se sugiere hasta un tamaño máximo de 250kb si es que esa imagen realmente lo vale, todo sea por el diseño. Si sigues este consejo evitarás que ese usuario que tiene una Mac Book Pro de 21″ con su vanidosa resolución de 1920 pixeles le haga mal ojo al sitio por que el fondo esta cortado o pixeleado.

¿Por que si la resolución de pantalla mas común es de 1366 no lo hago de ese tamaño? En realidad hacerlo para una resolución específica es un error, al hacerlo dentro de un rango de 960 a 1000 pixeles el sitio se verá bien desde resoluciones de 1024 px que aún son muy populares hasta resoluciones mayores.

Este tamaño de sitio es muy bueno y aseguras que el sitio podrá ser visto por la mayoría usuarios con un equipo de escritorio “desktop”. Al diseñar la plantilla de tu página web eso es lo menos que deberías procurar.

Sin embargo, los dispositivos con resoluciones menores, tabletas y teléfonos inteligentes quedarán fuera y eso actualmente es un gran porcentaje de usuarios que no verían correctamente tu sitio. La solución a este problema es considerando un sitio con un diseño responsivo, que se adaptará de acuerdo al tipo de pantalla y dispositivo en la que se cargue.



En un sitio responsivo lo usual es que se tenga una versión para las computadoras de escritorio y se consideren modificaciones en el acomodo y tamaño de los elementos para que este se ajuste y tenga una versión para tabletas y otra para teléfonos. También es posible que se tenga una versión para monitores más grandes si se quiere.

No necesariamente tenemos que especificar como sería el diseño de estas versiones mas pequeñas, si nos basamos en convenciones de diseño responsivo para adaptar el contenido, solo bastará con ajustar los mismos elementos de contenido al nuevo tamaño. Ahora si se desea detallar claramente como lucirían estos diseños los tamaños sugeridos serían:

Para la versión para tablets de 940 a 780 pixeles de ancho, para la versión “portrait” o vertical. La orientación horizontal generalmente soporta la versión de escritorio. En este caso no es necesario dejar un espacio en el canvas extra y ese sería el tamaño total del documento de diseño.

Para la versión para teléfonos recomiendo un tamaño de 780 de ancho y serviría para la orientación horizontal y vertical por igual.

Esperando que haya sido de mucha utilidad la información  ¡Te enviamos un montón de buena vibra en tamaños responsivos!