Tamaño de una página web: Medidas y dimensiones recomendadas

Hoy es este nuevo artículo que te presentamos desde Galerna Estudio – Diseño Web Asturias, queremos explicarte un concepto fundamental en el diseño web: el tamaño de una página web.

¿Alguna vez has pensado en cómo el tamaño de tu página puede afectar la experiencia de tus usuarios? Déjame contarte por qué es tan importante.

Cuando hablamos del tamaño de una página web, nos referimos a varios aspectos.

Por un lado, tenemos el tamaño visual, que se relaciona con cómo se ve y se ajusta la página en diferentes dispositivos.

Imagina que visitas un sitio desde tu móvil y todo se ve desordenado o tienes que hacer zoom constantemente. No es una buena experiencia, ¿verdad?

Por otro lado, está el tamaño en términos de datos, que es cuánto pesa tu página en megabytes o kilobytes. Esto influye directamente en el tiempo de carga.

Es importante que sepas que una página pesada puede hacer que tus usuarios se impacienten y se vayan antes de que se termine de cargar.

Quiero compartir contigo algunos factores clave que determinan estos tamaños y cómo puedes optimizarlos para mejorar la usabilidad y la rapidez de tu sitio.

Lo que me encanta de este tema es que con algunos ajustes simples, puedes hacer una gran diferencia en la experiencia de tus visitantes.

A lo largo de este artículo, te voy a mostrar cómo equilibrar estos aspectos para que tu sitio no solo luzca genial, sino que también funcione de manera eficiente.

También podrás ver ejemplos prácticos y consejos que te ayudarán a implementar estas mejoras en tu propia página.

Así que, si estás listo para aprender cómo el tamaño de tu página web puede impactar su rendimiento y la satisfacción de tus usuarios, sigue leyendo.

Como puedes ver, optimizar el tamaño de tu web no es solo una cuestión técnica, sino una estrategia esencial para el éxito online.

¿Cuál es el tamaño de una página web adecuado?: Medidas o dimensión ideal

Las medidas ideales para una página web van variando con el correr de los años.

No hay, por lo tanto, un tamaño de página web único o ideal, Debido a la gran oferta de dispositivos a través de los cuales podemos acceder a Internet, es un aspecto que está en constante evolución y cada dispositivo usa un determinado tamaño.

Y este es el punto fundamental a analizar antes de decidirnos por el formato.

¿Desde dónde se van a conectar los usuarios? ¿Qué medidas tienen los aparatos más populares?

¿Cómo conseguir que se visualice correctamente desde cualquier dispositivo? Son preguntas importantísimas, cuyas respuestas te llevarán a escoger las medidas adecuadas para tu sitio.

La resolución de pantalla

A la hora de pensar el tamaño de página web más adecuado para cada caso, debemos plantearnos un asunto relevante: la resolución de pantalla. Esto significa, el tamaño en vertical y horizontal que ocupará dentro de las pantallas.

Conviene decir que, aunque tu tengas un monitor 4K (de 3840 x 2160 píxeles), probablemente muy pocos usuarios cuenten con esta resolución, que todavía no se ha convertido en el estándar; por eso, hacer tu página web en esa resolución será una decisión inadecuada.

Debes buscar una que se ajuste a una gran cantidad de opciones de visionado.

Hasta no hace mucho la resolución estándar en Internet era 1024 x 768 px. En el presente, la más usada es 1366 x 768 px, que se corresponde con la resolución estándar de Windows 8. Decidirse por una resolución mayor podría provocar que, en ciertos dispositivos, tu web no se aprecie correctamente.

Ahora bien: ¿y si los usuarios tienen una mayor resolución; verán mal mi página web?

No, siempre y cuando tengas en cuenta esta eventualidad. Para ello, lo ideal es rellenar el espacio exterior de la página con un color o una textura que pueda repetirse.

De esta manera, desde cualquier dispositivo tu sitio se verá correctamente.

Una cosa importante: no es recomendable usar una foto de fondo, porque las imágenes no se pueden redimensionar con CSS, por lo que no completarán infinitamente el espacio.

Además, mientras que un color o una trama no ocupa espacio en tu servidor, una fotografía sí; y esa es otra contra para este tipo de fondos.

A la hora de pensar en el tamaño de la pantalla tienes que tener en cuenta que, si bien no existe una resolución ideal, sí contamos con ciertas medidas estándares: ciertas tendencias que pueden servirnos de referencia a la hora de crear nuestro diseño.

Una vez hemos analizado estos aspectos de la resolución debemos pensar en el tipo de diseño sobre el que vamos a trabajar.

Dependiendo del nicho en el que estemos, del estilo que deseemos para nuestra web y de nuestros recursos, nos convendrá decantarnos por un camino más o menos dinámico.

Lo que sí o sí debes tener en cuenta en el tamaño de una página web, más allá de las medidas, es que sea un diseño responsivo, que se adapte a diversos tipos de dispositivos, es fundamental, si quieres que tu página web sea un éxito.

Veamos ahora las tendencias en las resoluciones, teniendo en cuenta los diversos dispositivos.

Desktop o escritorio

No es conveniente plantear para nuestro diseño tomando como punto de partida las resoluciones más populares de los dispositivos; puesto que una cosa es la resolución de la pantalla y otra la norma de Internet (que sigue siendo muy inferior a las posibilidades de los sistemas comercializados).

No obstante, tener en cuenta estas tendencias, puede orientarnos para conocer cuáles son las medidas estándar.

En el caso de los ordenadores de escritorio, se ha establecido desde hace unos años una clara diferenciación, entre pantallas pequeñas, medianas y grandes.

Mientras que las pequeñas más usadas suelen ofrecer una resolución estándar de 1024 x 600px, las medianas suelen presentar resoluciones de 1280 x 720px, mientras que las grandes, 1400 x 900px o 1600 x 1200px.

Tener en cuenta estos valores, te puede servir para tomar la decisión.

Tabletas

Si en el terreno de los ordenadores tenemos una gran variedad de resoluciones, en el de las tabletas y los móviles la variedad de resoluciones supera todas las expectativas.

Casi podríamos decir que existen tantas resoluciones como marcas, aunque, evidentemente no sería del todo cierto, pero mejor exagerar para entendernos mejor.

Dada esta gran diversidad es imposible acertar con una medida específica con la gran mayoría de dispositivos desde los que se accederá a nuestro sitio; por eso, debemos decantarnos por aquellas resoluciones más populares.

Te contamos algunas de las que más frecuentemente vas a encontrarte.

En los modelos de tabletas de Apple (iPad y iPad Mini) tenemos una media de 1024 x 768 px.

En Samsung Galaxy Tab encontramos en las tabletas de 7 pulgadas una resolución de 1024 x 768 px, mientras que a partir de las 7 y en adelante la resolución suele ser 600 x 1024px.

Las tabletas de Microsoft, Surface W8 RT tenemos una resolución de 768 x 1280px, que también se maneja en muchas tabletas de segundas marcas.

Por otro lado, las Nexus más comunes ofrecen una resolución de 603 x 966px (en tabletas de 7 pulgadas) y de 800 x 1280px (en tabletas de 10 pulgadas).

Pensar en todas estas posibilidades te ayudará a dar con el tamaño de una página web más recomendable.

Móviles

En el mundo de los teléfonos móviles hay casi tantas resoluciones como marcas y modelos existen en el mercado. No obstante, existen algunas resoluciones que se han establecido como norma. Hablemos sobre ellas.

A grandes rasgos encontramos que en la marca iPhone tenemos desde los 320 x 480 px de resolución (iPhone 3GS) hasta los 1242 x 2688 px de resolución (iPhone 11 Pro Max).

Samsung ofrece resoluciones que van desde 720 x 1280px (Samsung Galaxy Nexus) hasta los 3200 x 1440px (Samsung Galaxy Note 20).

El resto de los móviles, la mayoría de ellos con sistema operativo Android, oscila entre los 480 x 800px y los 1080 x 1920px.

No puedes pensar en una página web dejándote fuera el mundo de los móviles, ya que, se cree que más del ochenta por ciento del tráfico que viaja en Internet proviene de estos dispositivos.

De ahí que sea tan importante pensar en un diseño que se adapte a estos usuarios.

Las personas a las que se dirige

Tener en cuenta el origen principal de tu tráfico web es otro de los aspectos que debes analizar con calma.

Si tu web va dirigida a un público de alto poder adquisitivo, es muy probable que, la gran mayoría, disponga de ordenadores y dispositivos de última generación.

Por lo que pensar en un diseño de alta resolución y con ciertas exigencias de sistema, no sería una idea del todo inaceptable.

Lo que deseamos es que Internet divulgue la igualdad, por eso, pensar un diseño solo teniendo en cuenta un grupo no parece la idea más sensata.

Muchos usuarios de la red viven en zonas con problemas de conexión o pertenecen a un sector menos favorecido económicamente y no disponen de ordenadores de última generación.

También es muy común que, ciertas personas, no consideren este aparato como un bien de primera necesidad y no les importe mantenerlo a lo largo de muchos años. Esto dificultará su acceso a cierto contenido.

No es una buena idea, pensar en tu diseño dejando fuera a estas personas. Por eso, es idóneo plantear estos aspectos tratando de incluir a la mayor cantidad de gente posible; para que todos puedan disfrutar de tu magnífico trabajo.

Pero aquí hay que hacer un pequeño comentario. Todo depende también del tipo de contenido.

Si te dedicas a crear contenido donde lo fundamental es el texto: sitio de noticias, blog literario o web corporativa de empresa, te conviene enfocarte en que todos los usuarios puedan acceder correctamente a esa parte del contenido: el texto.

Pero si te dedicas a la moda o tienes una tienda tendrás que dar prioridad a las imágenes, lo que supone pensar en una resolución que permita que tu web se vea linda.

Aunque discriminar a aquellos usuarios que no acceden a internet desde dispositivos de última generación no es un buen plan, a veces hay que tomar decisiones difíciles, para evitar que todas las personas tengan una mala experiencia con tu sitio.

Reduce el peso todo lo que puedas, pero no reduzcas la calidad de tu sitio.

Listado de tamaños de página web más frecuentes

Es relevante considerar que estos son solo algunos de los tamaños de página web o resoluciones más comunes.

La resolución óptima para una página web variará dependiendo del público objetivo y del tipo de contenido que se pretenda mostrar.

Dispositivos móviles

• 360 x 640 (móvil pequeño)
• 375 x 667 (móvil medio)
• 360 x 720 (móvil grande)
• 414 x 896 (iPhone X)
• 411 x 731 (Pixel 2)

Tabletas

• 768 x 1024
• 800 x 1280
• 1024 x 768
• 1280 x 800

Ordenadores portátiles

• 1366 x 768
• 1440 x 900
• 1920 x 1080

Escritorios

• 1920 x 1080
• 2560 x 1440
• 3840 x 2160

Los breakpoints

Hay otro concepto que debes tener en cuenta a la hora de pensar en el diseño de tu sitio web: los breakpoints.

¿A qué hace referencia este concepto? En el desarrollo responsivo, podría decirse que se trata de los saltos que da el diseño al cambiar de una plantilla a otra, para ajustarse al dispositivo desde el que se la quiere visualizar.

Para que nuestro diseño se ajuste a las diversas resoluciones, debemos tener en cuenta aquellas más populares, pero crear los saltos teniendo en cuenta resoluciones específicas no es una buena idea, porque entonces deberías crear tantas plantillas como resoluciones existen, a fin de que se vean correctamente en todos los dispositivos.

Por eso, tener en cuenta las resoluciones es muy importante, pero no debería ser absolutamente determinante de tu trabajo; porque es fundamental el grupo al que va dirigida tu web.

Es decir, se trata de ofrecer una experiencia lo más satisfactoria posible para el público al que te interesa llegar.

Lo ideal es apostar por una resolución de 940 a 1000 píxeles, para el total del tamaño de la web, e idear la plantilla de trabajo de una resolución de 1200px aproximadamente.

Estamos hablando del ancho de la web, dado que la extensión vertical no es tan relevante, porque se podrá acceder al contenido vertical deslizando la pantalla tanto como se necesite, tal como estamos acostumbrados a hacerlo.

En definitiva: lo ideal es preparar la plantilla de unos 400 px más ancha que el área donde irá el contenido; de modo que nos aseguremos que desde cualquier dispositivo se aprecie correctamente.

Esto supone ubicar el área del contenido en el centro de la plantilla, dejando unos 200px de margen.

Consejos para seleccionar la resolución adecuada para tu página web

El diseño web adaptable es una práctica casi obligada que permite que una página web se adapte de manera efectiva a diversos dispositivos y resoluciones.

Esto garantiza que tu sitio web se visualice correctamente en cualquier pantalla, independientemente de su resolución.

Si estás en el proceso de diseño de una página web, se aconseja el uso de un diseño web adaptable. De esta manera, te aseguras de que tu página se visualice correctamente en todos los dispositivos y esté accesible para una audiencia más amplia.

Considera a tu audiencia principal

Si tu público objetivo utiliza principalmente dispositivos móviles, es esencial optimizar tu página web para estas plataformas.
Dispositivos móviles: Si tu público objetivo utiliza principalmente smartphones o tablets, prioriza resoluciones como 360 x 640, 375 x 667 o 414 x 896.
Escritorio: Si tu público objetivo usa mayormente ordenadores, enfócate en resoluciones como 1920 x 1080, 2560 x 1440 o 3840 x 2160.

Evalúa el tipo de contenido que planeas presentar

Si planeas exhibir imágenes o vídeos de alta resolución, entonces necesitarás una resolución más elevada.
Imágenes y vídeos: Si tu contenido incluye elementos multimedia de alta calidad, una resolución superior (como 4K) será necesaria para una visualización óptima.
Texto: Si tu página web se basa principalmente en texto, una resolución menor puede ser suficiente, como 1366 x 768.

Realiza pruebas con distintas resoluciones

Experimenta con diferentes configuraciones de resolución para determinar cuál funciona mejor para tu público objetivo.
Como hemos visto, no existe una única «resolución ideal» para todas las páginas web. Experimenta con diferentes opciones y analiza el comportamiento de tu público en cada caso.
Monitoriza métricas como la tasa de rebote, el tiempo de carga y las conversiones para determinar qué resolución ofrece la mejor experiencia de usuario.

Recursos y herramientas

Existen herramientas online que te permiten previsualizar cómo se verá tu página web en diferentes dispositivos y resoluciones.
Una de las mejores es Website Responsive Test Checking Tool – Online
También puedes consultar plataformas como Google Search Console o PageSpeed Insights para obtener información sobre la velocidad de carga y la optimización de tu página web para diferentes dispositivos.

Llegados a este punto debemos aclarar que no existe el tamaño de una página web ideal, porque dependerá del tipo de contenido y de las personas a las que va dirigido.

Analizar con calma estos aspectos te servirá para decidir el tamaño adecuado de cada página, a fin de que pueda visualizarse de forma correcta en la mayor cantidad de dispositivos posible.

Eso sí, sea como sea tu diseño, piensa en la importancia de desarrollarlo para ajustarse a diversos dispositivos; para ello, escoge un buen diseño responsivo, para evitarte dolores de cabeza y ofrecer la mejor navegación posible para tus usuarios.

Siguiendo estos consejos, seguramente, sabrás encontrar el tamaño idóneo para tu sitio y plantearás un diseño con muchas posibilidades de éxito.

¿Te han quedado dudas? Contacta con alguno de nuestros expertos en diseño web a medida o diseño web corporativo o déjanos tu comentario, para que podamos ayudarte a plantear de la mejor forma posible tu proyecto web.

FUENTES

• Sharp Programming
• Phases design studio