Imaginemos que en este momento te encuentras pensando en el diseño que quieres crear para comenzar a desarrollar tu sitio web y te preguntas:

 

 

Estas preguntas son sencillas de responder; no hay una medida específica. 

 

Al final de este posts te sugerimos algunas medidas pero en definitiva antes de elegirla debes considerar lo siguiente:

 

 

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?

 

La respuesta es NO.

 

 

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.

 

Recomendamos 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 debes 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 que granos de adolescente.

 

Eso si, el tamaño en bytes de esa imagen de fondo no debe ser muy pesada o tardará muchísimo en cargar, me atrevería a sugerir hasta un tamaño máximo de 250kb si es que esa imagen realmente lo vale, todo sea por el diseño aunque mis colegas programadores obsesionados con el rendimiento seguramente se infartarían. 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 fuchi al sitio por que el fondo esta cortado o pixeleado.

 

 

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 adaptable de acuerdo al tipo de pantalla y dispositivo en la que se cargue.

En un sitio adaptable 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.

---

Redes Sociales

 

Utilizar fotografías cuidadas y unificadas en cuanto a tamaños proyecta una mejor imagen sobre nosotros y genera mayor confianza en el usuario.

 

En este post vamos a ver sobre los tamaños de imágenes de redes sociales. Y es que cada red social tiene fijados unos estándares de tamaños para las imágenes a utilizar, tanto de perfil o portada (según los casos) como para las publicaciones.

 

Así pues, en lo que sigue hacemos un repaso por los tamaños y formatos de fotografías vigentes actualmente en las principales plataformas sociales.

 

---

¿Qué medidas debes tener en cuenta si quieres publicar fotografías en Instagram?

• Foto de perfil: el tamaño recomendado es de 110×100 píxeles.
• Foto cuadrada: 1080×1080 píxeles es lo recomendado, y el tamaño máximo permitido es de 2080×2080 píxeles.
• Foto vertical: 1350×1080 píxeles.
• Foto horizontal: 1080×566 píxeles.
• Tamaño de Stories (foto): 1080x1920 píxeles es lo estipulado.
• Tamaño de vídeos: En Instagram deben tener una duración máxima de 60 segundos y unas medidas de 640×640 píxeles.

---

¿Qué medidas debes tener en cuenta si quieres publicar fotografías en Twitter?

• Foto de perfil. Debe medir 400×400 píxeles (ó 200x200) y tener un límite de peso de 2MB.
• Foto de portada. 1500×500 píxeles (ó 1024x280) de ancho y alto respectivamente, y un peso máximo de imagen de 5MB.
• Tweets con imagen. Para aquellos tuits que lleven imagen, se recomienda un tamaño mínimo de 600×335 píxeles. No obstante, es mejor utilizar imágenes un poco más grandes, de forma que el usuario pueda expandir al clickar sobre ellas.
• Tweets con link. En este caso las medidas aceptadas son de 440x220 píxeles.

---

¿Qué medidas debes tener en cuenta si quieres publicar fotografías en Pinterest?

• Imagen de perfil. Lo estipulado es subirla a un tamaño de 165x165 píxeles.
• Pines. El ancho de los pines debe ser de 600 píxeles. El alto, lo que quieras. Aunque existen herramientas que te recomendarán subirlos a 236 píxeles.
• Imagen de tablero. Debe ser de 222x150 píxeles.

---

¿Qué medidas debes tener en cuenta si quieres publicar fotografías en LinkedIn?

• Foto de perfil: 400×400 píxeles, teniendo en cuenta una dimensión mínima de 130×130 píxeles.
• Tamaño cabecera para perfiles: 1584×396 píxeles.
• Tamaño logotipo: 300×300 píxeles.
• Tamaño foto de portada para páginas de empresa: El tamaño recomendado es de 1536×768 píxeles.
• Banner de página de empresa 646×220 píxeles
• Imagen de post: 520×320 píxeles.
• Post con enlace: En este caso las imágenes a utilizar deben tener 520×272 píxeles.

---

¿Qué medidas debes tener en cuenta si quieres publicar fotografías en Youtube?

• Foto de perfil: 800x800 píxeles.
• Foto de portada: El tamaño recomendado es de 2560×1440 píxeles, y un tamaño máximo de 6 MB.
• Tamaño miniatura de YouTube: 1280×720 píxeles.