I) Tamaños recomendados para ventanas emergentes (Pop Up)
No hay un tamaño exacto "correcto" para las ventanas emergentes, todo depende de su diseño.
El ancho del área de contenido puede ser de 480-900px, la altura máxima recomendada es de 650px.
Para dispositivos móviles, las ventanas emergentes pueden tener un aspecto similar al de las versiones de escritorio. El propio editor cambia el tamaño de los elementos en función del tamaño de la pantalla.
De todos modos para dispositivos móviles hay algunas recomendaciones:
1. Las imágenes en las ventanas emergentes móviles pueden tardar demasiado tiempo en cargarse. Por lo tanto, recomendamos evitarlos y apegarse a un diseño más simple. Si tiene una imagen de fondo en la ventana emergente de su escritorio, debe eliminarla en el móvil (tiende a parecer confusa en un espacio limitado).
2. Los controles deben ser más grandes para ser accionables y fáciles de tocar (botón CTA, enlaces, botón de cierre).
3. Para la versión móvil, haga que el texto sea un poco más grande que en el escritorio. Dado que el editor reduce la ventana emergente dependiendo del tamaño de la pantalla, el tamaño del texto también se reduce y, a menudo, el texto de la versión de escritorio es demasiado pequeño para dispositivos móviles. Así, por ejemplo, si en la versión para escritorio el tamaño de fuente es de 18px, entonces para móviles habria que aumentarlo a 22px.
Las mismas reglas se aplican a las barras de mensajes (elementos visuales, texto y tamaño de botón).
En cuanto al ancho del área de contenido, si para el escritorio recomendamos usar un ancho de 480px-900px, el ancho máximo recomendado para dispositivos móviles es de 600px.
Si es necesario, desdoblar las reglas según el dispositivo es muy sencillo:
1) Crear la regla para escritorio con la creatividad para escritorio.
2) En Segmentos seleccionar:
3) Copiar la regla
4) A la copia cambiarle en nombre usualmente es el mismo con (móvil) al final.
5) Cambiar la creatividad para móvil según las recomendaciones del punto anterior.
6) Cambiarle el segmento
7) Guardar la regla
II) Tamaños de las imágenes
Recomendamos los siguentes formatos y medidas:
1. Formato de archivo preferido: JPEG (JPG), PNG, GIF
Las imágenes deben guardarse y cargarse como JPG. Este tipo de archivo puede manejar todos los colores en un tamaño de archivo relativamente pequeño y eficiente.
Las imágenes con partes transparentes, logotipos e imágenes con mucho texto en ellas, deben guardarse como PNG. Los PNG admiten transparencia y tienen una calidad más alta que los JPG. Por otro lado, son más grandes que los JPG, lo que significa que generalmente son más lentos de cargar.
Si está utilizando una foto con texto sobre ella, y la mayoría de la imagen es una fotografía, utilice JPEG.
Recomendamos utilizar el formato GIF solo para imágenes animadas.
2. Tamaño de la imagen (en píxeles)
Las imágenes deben ser tan grandes como sea necesario para llenar sus "contenedores", o un poco más grandes para que se vean más nítidas y de alta calidad. Para obtener los mejores resultados, recomendamos utilizar un ancho de imagen del 100-130% del ancho del contenedor.
3. Resolución de la imagen (píxeles por pulgada (PPI))
Cuanto mayor sea su resolución, mayor será el tamaño del archivo y tomará mucho más tiempo cargarlo. La mayoría de los monitores de ordenador muestran 72ppi, por lo que cualquier resolución más alta que eso hace que su imagen sea innecesariamente grande.
4. Tamaño de la imagen (en Kb)
El tamaño de archivo óptimo para las imágenes en ventanas emergentes no debe ser mayor de 100 KB. Intente mantener el tamaño del archivo lo más pequeño posible
Si tiene la opción en el programa de diseño que utiliza, utilice siempre "Guardar para web", lo que le dará a su imagen una resolución y tamaño amigables con la web.
Otra forma de ayudar a que las imágenes se carguen más rápido es comprimirlas a un tamaño más pequeño mediante el uso de herramientas gratuitas de compresión de imágenes como Optimazilla o TinyJPG.
No tenga miedo de reducir la calidad: los resultados visuales a menudo son muy buenos y los ahorros en el tamaño del archivo pueden ser bastante grandes. Al comparar imágenes 100% de calidad vs. 70% de calidad después de comprimirlas, por ejemplo, es posible que no vea la diferencia.