Una de las cosas que un diseñador web debe tener en cuenta antes de comenzar a trabajar, es conocer qué resolución de pantalla usar para diseñar una web.

De esta manera, podrá adaptarse así a la resolución de la pantalla del usuario. 

La resolución es uno de los factores más importantes a la hora de diseñar un sitio web, pues no es posible dejarlo todo en manos del “diseño responsive”, ya que de lo contrario estaríamos confundiendo diferentes conceptos.

La resolución de la pantalla en tu dispositivo

En pocas palabras, la resolución es la cantidad de píxeles que pueden ser mostrados en una determinada pantalla. Por tanto, cuantos más píxeles sean mostrados en una pantalla, significará que mejor será la resolución de lo que estamos viendo.

Antes de adentrarnos, decir que no existe una resolución de pantalla ideal, pero en cambio, si existe una recomendación o reglas específicas para poder realizar un diseño web correcto. 

Diseñar bajo una resolución u otra, va a depender de varios factores.

De hecho, principalmente los factores predominantes van a ser el público al que nos dirigimos, y por otro lado las tendencias existentes de los usuarios. 

¿Qué tipos de resoluciones existen?

Hoy en día existen numerosas resoluciones de pantalla, y mi consejo es que te centres en aquella resolución más versátil para que tu sitio web pueda verse correctamente en cualquier navegador.

Esta resolución, no tiene por qué ser necesariamente la más utilizada, y te voy a explicar por qué a lo largo de este artículo.

Existen hoy en día una gran cantidad de dispositivos y marcas, por lo que, dependiendo del tipo de dispositivo, podremos encontrar una resolución común a cada uno de ellos:

Resoluciones en ordenadores desktop o escritorio:

Las pantallas pequeñas de ordenadores suelen ofrecer una resolución de 1024×768, por lo que considerar esta resolución con respecto al desarrollo de nuestro contenido, a priori podría ser interesante. 

Ahora bien, si quieres abarcar todas las resoluciones posibles, efectivamente tendrás que tener en cuenta que tu contenido esté dentro de esos 1024 píxeles, aunque no es lo recomendable.

¿Por qué?

Sencillamente porque a día de hoy es una de las resoluciones menos utilizadas.

Ten en cuenta que las resoluciones en escritorio, van desde los 1024×768 a los 1920×1080. Por tanto, dependiendo de donde nos estemos dirigiendo, podemos tener en cuenta este rango de píxeles para nuestro contenido 1024-1920, con el mínimo de los 1024.

Resoluciones en móviles

Existen tantas resoluciones de móviles, como marcas de ellos existen.

Así pues, no resulta nada recomendable realizar el diseño web teniendo en cuenta una resolución de pantalla específica. 

Ahora bien, tener en cuenta la visualización de un sitio web en un dispositivo móvil, debe considerarse desde el inicio, pues un alto porcentaje del tráfico en internet proviene de estos dispositivos. 

La resolución más utilizada a día de hoy en el mundo, sería la de 360×800 que equivaldría a dispositivos tales como el Galaxy S21, seguida del iPhone 12, que sería una resolución de 390×844.

Resoluciones en tabletas

También es importante considerar las tabletas como dispositivo de visualización web, aunque no es lo más utilizado hoy en día.

En este caso, la resolución que reina es la de 768×1024 que correspondería con el iPad 6/Mini 5.

Estos son solo algunos de los ejemplos de resoluciones en cada una de las categorías de dispositivos existentes, pero te recomiendo que no te marees demasiado con esto.

¿Cuál es la resolución más común en la actualidad?

Si nos fijamos en diferentes estudios, los cuales nos sirven de referencia, desde 2012 hasta el 2018 la resolución utilizada con más presencia había sido la 1366×768. 

Esto es debido en parte porque desde 2019 ha ido aumentando otro tipo de resoluciones, tales como la de 1536×864 o bien 1280×720.

Una de las resoluciones muy presentes, como se puede apreciar (en enero de 2023 se utilizó casi en el 20% de los navegadores), es la de 1920×1080. 

No obstante, como ya comentaba, debemos conocer a qué tipo de público nos estamos dirigiendo, en qué país, si nuestro público objetivo utiliza más o menos el ordenador, etc. 

Y es que, teniendo en cuenta las resoluciones en desktop, y más concretamente en Europa, obtenemos nuevamente que la resolución ganadora es la de 1920×1080. Le sigue la resolución 1536×864, por lo que la resolución 1366×768 estaría quedando en tercer lugar:

¿Cuál es la resolución más recomendada para diseñar una web?

Ahora que ya conoces cuantas resoluciones existen, y cuál es la más común, lo recomendado desde mi punto de vista es diseñar con un lienzo de 1920×1080 con ciertos matices.

Lo ideal es diseñar en esta resolución, pero teniendo en cuenta que nuestro contenido ocupe la resolución 1366×768.

Esta, desde mi punto de vista, es la resolución más versátil conforme a los principios del diseño web a día de hoy.

Si diseñamos por ejemplo a resoluciones más altas, tales como 1920×1090, existirían elementos web que posiblemente no se verían en una resolución de 1366×768, por lo que tendremos que realizar numerosas revisiones y modificaciones para adecuarla, incluso a nivel estructural. 

Por tanto, lo ideal es diseñar con un lienzo de resolución de 1920px ocupando un contenido a 1366px como máximo.

Ahora bien, tendremos que tener en cuenta los márgenes laterales, que podremos dejar en blanco o bien rellenar el espacio por medio de algún color o textura. 

Trabajando en esta resolución, debemos comprobar que nuestro sitio web se visualice correctamente en las diferentes resoluciones.

Otra opción es utilizar 1024 píxeles para ocupar nuestro contenido, con un lienzo más pequeño, pero hay que tener en cuenta que la resolución 1024×768 apenas se utiliza hoy en día.

En caso de diseñar teniendo en cuenta esta resolución, estaríamos desaprovechando mucho espacio en los márgenes laterales. 

Utilizando un espacio de trabajo de 1920px, tendremos un espacio total en los márgenes de 554px, lo que equivale a 277px en cada uno de los márgenes. De esta manera podremos centrar así el contenido en nuestro espacio de trabajo y dispondremos de 1366 píxeles para ocupar todo nuestro contenido.

Con ello, nos podremos adaptar a casi todos los dispositivos de una manera adecuada, obviamente siempre teniendo en cuenta que nuestro sitio web debe ser responsive. 

Los Breakpoints

Debes tener en cuenta que, una vez diseñado el sitio web, se pueden observar saltos que da el diseño cuando se cambia de una visualización a otra que hace que la web se ajuste al dispositivo actual en donde se visualiza la web. 

Pensar en diseñar una web teniendo en cuenta los diferentes saltos de diseño, no es nada recomendable.

Por tanto, la mejor conclusión es diseñar teniendo en cuenta las resoluciones más populares para cada uno de los dispositivos (ordenador, móvil y tablet).

¿Qué ocurre con las resoluciones menores de los teléfonos móviles?

En estos casos, nuestro sitio web quedaría fuera de dichas resoluciones. Sin embargo, gracias al diseño responsive, nuestra web se adaptará de acuerdo al tipo de pantalla y dispositivo en donde se cargue. 

Independientemente de la resolución de pantalla, por medio de este diseño responsive, deberemos tener en cuenta diferentes versiones, para escritorio de ordenador, móvil y tableta.

Seguramente haya que modificar y revisar diferentes elementos web para acomodar todo en su conjunto. 

Contar los píxeles de la resolución de tu pantalla

Si partimos de una resolución de referencia de 768px de alto, (resolución de 1366×768) tenemos que tener en cuenta que unos 80px son para nuestro header o menú principal.

Lo que lo ideal es reservar 560-600 px para la imagen hero (o bien la parte superior de la web que es lo primero que se ve al acceder).

El resto de píxeles los podríamos dejar para la barra de menú del navegador y la barra de marcadores en caso de que el usuario la tenga visible.

Si quieres contar los píxeles de una web en tu propia pantalla, la extensión Page Ruler te permite realizar esta medición de píxeles sin mayor dificultad.

De este modo, podrás conocer a ciencia cierta qué elementos de la web está visualizando el usuario dependiendo del tipo de resolución. 

¿Cómo puedo conocer la resolución en la que se muestra un sitio web? 

Si quieres comprobar una web, en las diferentes resoluciones existentes, te recomiendo visitar este comprobador de diseño responsivo. Podrás verificar como se visualiza una web en diferentes resoluciones, tanto en los dispositivos de móviles, ordenadores y tablets.

Pues bien, con todo ello, hasta aquí te he mostrado los consejos sobre qué resolución de pantalla usar para diseñar una web.

Si te estás planteando diseñar una web y necesitas ayuda, no dudes en contactarnos. En Nakama Marketing somos especialistas en diseño web.

Conclusiones

Como conclusión, te recomiendo tener en cuenta diferentes factores tales como las tendencias de las resoluciones hoy en día, en qué país enfocamos nuestro sitio web, ¿es local? ¿internacional?, a qué público nos estamos dirigiendo, etc. 

Existen tantas resoluciones, como dispositivos y marcas existen a día de hoy.

Actualmente, dada su versatilidad y dado que engloba a la resolución 1366px, la mejor opción en mi opinión sería diseñar con un lienzo de 1920px en desktop, ocupando nuestro contenido entre 1024px – 1366px.

Si queremos tener en cuenta resoluciones de 1024px para desktop, tendremos que dedicar nuestro contenido en esa cantidad de píxeles, lo que puede ocasionar disponer de bastante espacio en nuestros márgenes laterales.