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

Tamaño de una página web: Medidas estándar y dimensiones ideales

Tabla de Contenidos

¿Cuáles son las medidas recomendadas para una página web? ¿Existe una medida estándar o todo depende del sitio y el contenido? Si estás pensando en montar tu propia página web, seguramente te has hecho estas preguntas.

A la hora de diseñar tu página web y de pensar en el tamaño ideal debes tener en cuenta varios factores. No sólo estar atento a los dispositivos desde los que los usuarios podrían acceder a tu contenido, sino el tipo de servicio que ofreces y las tendencias dentro de tu nicho. Evidentemente, al día de hoy es una torpeza pensar en un diseño único; teniendo en cuenta la gran diversidad de aparatos desde los que se navega. Por eso, es muy importante decidirse por un diseño responsive (que se adapte a los diversos formatos de visualización).

Pero volviendo al tema que nos ocupa, en este artículo te daremos algunas nociones iniciales sobre qué cosas debes tener en cuenta para escoger el tamaño ideal para tu página web.

¿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. 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 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 en el tamaño de una página web y la plantilla debemos plantearnos un asunto relevante: la resolución. 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 ésa 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 600 px, las medianas suelen presentar resoluciones de 1280 x 720 px, mientras que las grandes, 1400 x 900 px o 1600 x 1200 px.

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 1024 px. Las tabletas de Microsoft, Surface W8 RT tenemos una resolución de 768 x 1280, 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 966 (en tabletas de 7 pulgadas) y de 800 x 1280 (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 1280 px (Samsung Galaxy Nexus) hasta los 3200 x 1440 (Samsung Galaxy Note 20). El resto de los móviles, la mayoría de ellos con sistema operativo Android, oscila entre los 480 x 800 px y los 1080 x 1920 px.

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. Aunque, te recomendamos que sigas leyendo.

Lo que deseamos es que Internet divulgue la igualdad, por eso, pensar un diseño sólo 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. ¿No te parece? 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.

La recomendación

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 aquéllas 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 pixeles, para el total del tamaño de la web, e idear la plantilla de trabajo de una resolución de 1200 px 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 200 px de margen.

Página web : breaking points

Conclusión

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? Déjanos tu comentario, para que podamos ayudarte a plantear de la mejor forma posible tu proyecto web.

Fuentes : Ad Ventures, Sharp Programming, Phases design studio

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *