image


Especificaciones de Diseño


Contenido

  1. Notificaciones web
    1. Navegador Chrome
      1. Ejemplos en Mac Chrome
      2. Ejemplos en Windows Chrome
      3. Ejemplos en Android Crome
    2. Navegador Firefox
      1. Ejemplos en Mac Firefox
      2. Ejemplos en Windows Firefox
      3. Ejemplos en Android Firefox
    3. Navegador Safari
      1. Ejemplos en Mac Safari
  2. Notificaciones en aplicación móvil
    1. Dispositivos Android
      1. Ejemplos Notificación Sin Imagen
      2. Ejemplos Notificación Con Imagen
      3. Ejemplos Notificación Con GIF
      4. Diferencias en función de la versión del s.o.
    2. Dispositivos iOS
      1. Ejemplos Notificación Sin Imagen
      2. Ejemplos Notificación Con Imagen
      3. Ejemplos Notificación Con GIF
      4. Diferencias en función de la versión del s.o.

1. Notificaciones web

Cada navegador tiene su propio maquetado dependiendo de la plataforma, y además no permiten personalizar la apariencia. El número máximo de líneas y caracteres también varía en cada caso. Además del maquetado hay otros aspectos que afectan al tamaño máximo:

  • El ancho de las palabras.
  • El ancho de los caracteres empleados en el mensaje.
  • El ancho de la pantalla del dispositivo.

1.1 Navegador Chrome:

  • Notificaciones CON IMAGEN: Esta es la opción de envío que nosotros aconsejamos debido a su impacto visual que provoca según nuestra experiencia una mayor interacción del usuario con la push. Sus especificaciones de diseño son las siguientes:

    • Titulo: 22 caracteres máximo
    • Cuerpo:
      • Mac: 22 caracteres máximo (En bandeja de entrada del sistema 80 caracteres máximo)
      • Windows: 35 caracteres máximo
    • Icono:tamaño máximo 128x128px, y 256x256px en pantallas retina)
    • Imagen:
      • Resolución mínima 480x240px
      • Peso cuanto menos mejor (p.e. 20KB)
      • Formato recomendado jpg 30%

  • Notificaciones SIN IMAGEN:

    • Titulo: 22 caracteres máximo
    • Cuerpo:
      • Mac: 22 caracteres máximo (En bandeja de entrada del sistema 80 caracteres máximo).
      • Windows: 80 caracteres máximo
    • Icono: tamaño máximo 128x128px, y 256x256px en pantallas retina

  • Notificaciones webPush en Chrome Android: Cuando se realizan recepciones en la versión móvil del navegador Chrome, hay que tener en cuenta que el espacio disponible es menor por lo que para una correcta visualización hay que modificar el máximo de caracteres en el texto:
    • Con IMAGEN:
      • Titulo: 30 caracteres máximo
      • Cuerpo: 43 caracteres máximo (para la notificación expandida y sin expandir)
    • Sin IMAGEN:
      • Titulo: 30 caracteres máximo
      • Cuerpo:
        • Notificación sin expandir: 43 carácteres máximo
        • Notificación expandida: 80 caracteres máximo

1.1.1 Ejemplos en Mac Chrome

Cabe reseñar que la visualización de las notificaciones se ve afectada por el s.o. del dispositivo, esto quiere decir que no se verán igual las notificaciones en Mac que en Windows para el mismo navegador. En el caso concreto de dispositivos con s.o. Mac para Chrome las notificaciones con imagen no están soportadas y se verán igual que las notificaciones sin imagen, tal y como se muestra a continuación:

chromeMac

En los dispositivos Mac podremos tener también guardada la notificación en la bandeja de entrada del sistema que actúa a modo de buzón. Como se aprecia en la siguiente imagen aqui podremos ver el texto completo del cuerpo siempre y cuando no exceda el máximo de 80 caracteres :

buzonMacChrome

1.1.2 Ejemplos en Windows Chrome

En el caso del s.o. Windows las notificaciones con foto si estan soportadas y por lo tanto podremos recibir notificaciones con y sin imagen, igualmente el sistema implementa una bandeja de entrada de notificaciones que incluye las notificaciones recibidas por el navegador:

Ejemplo de push SIN IMAGEN en Chrome Windows:

En este tipo de notificaciones podemos ver el titulo en la parte superior seguido del texto y el icono en la parte superior izquierda.

ChromeAndroidConImagen

Ejemplo de push CON IMAGEN en Chrome Windows:

Como se puede observar en la siguiente imagen, en Chrome y Windows la notificación tendrá la imagen en la parte superior, por debajo el titulo seguido del cuerpo de la notificación y el icono en la parte inferior izquierda.

ChromeAndroidConImagen

Ejemplo de push en bandeja del sistema en Chrome Windows:

  • Notificación sin desplegar:

    ChromeAndroidConImagen

  • Notificación desplegada:

    ChromeAndroidConImagen

1.1.3 Ejemplos en Android Chrome

Como ocurría con el texto al pasar a la versión móvil del navegador se reduce el espacio disponible para el logo, por lo que nosotros no recomendamos que este contenga letras, ya que pueden verse deformadas tal y como se muestra a continuación:

Ejemplo de push SIN IMAGEN en Chrome Android:

Como se puede observar en las siguientes imágenes existe diferencia en la vista cuando la notificación está expandida o desplegada a cuando no lo esta.

Cuando recibimos la notificación, si en la bandeja del sistema existen más notificaciones es probable que veamos la notificación contraida, ésto afecta al número de carácteres que se visualizarán en el cuerpo de la notificación siendo significativamente menor a cuando esta expandida la push.

Si el número de caracteres excede el máximo número de caracteres para la notificación sin expandir (43 caracteres) el texto aparecerá cortado y acompañado de unos puntos suspensivos. Cuando el usuario despliega la notificación si el texto no excede el máximo número de caracteres (80 caracteres) para la notificación expandida podrá verse el texto al completo.

  • Notificación sin desplegar:

    ChromeAndroidConImagen

  • Notificación desplegada:

    login

Ejemplo de push CON IMAGEN en Chrome Android:

Cuando la notificación tiene incluida una imágen, ésta solo se visualizará cuando la notificación este expandida. Igualemente el espacio reservado para el cuerpo cuando notificación lleva imagen se reduce todavía más permitiendo como máximo un total de 43 caracteres. Si se excede el número de caracteres independientemente de si la notificación esta expandida o contraida el texto aparecerá cortado y acompañado de unos puntos suspensivos y no tendremos manera de visualizarlo por completo. A continuación se muestra como se vería:

  • Notificación sin desplegar:

    ChromeAndroidConImagen

  • Notificación desplegada:

    login

1.2 Navegador Firefox

  • Notificaciones CON IMAGEN:

    • Titulo: 30 caracteres máximo
    • Cuerpo: 80 caracteres máximo
    • Icono: tamaño máximo 128x128px, y 256x256px en pantallas retina.
    • Imagen:
      • Resolución mínima 80x80px (160x160px en pantalla retina)
      • Peso cuanto menos mejor (p.e. 20KB)
      • Formato recomendado jpg 30%
      • Obligan a incluir en la firma el dominio desde el que el usuario realizó el alta del servicio.

  • Notificaciones SIN IMAGEN:

    • Titulo: 30 caracteres máximo
    • Cuerpo: 80 caracteres máximo
    • Logo del servicio (tamaño máximo 128x128px, y 256x256px en pantallas retina)
    • URL (con sus parámetros) que se abrirá en caso de que el usuario interactúe.

  • Notificaciones webPush en Firefox Android: Cuando se realizan recepciones en la versión móvil del navegador Firefox como ocurria en Chrome, hay que tener en cuenta que el espacio disponible es menor por lo que para una correcta visualización hay que modificar el máximo de caracteres en el texto:

    • Con IMAGEN:
      • Titulo: 30 caracteres máximo
      • Cuerpo: 43 caracteres máximo (para la notificación desplegada y sin desplegar)
    • Sin IMAGEN:
      • Titulo: 30 caracteres máximo
      • Cuerpo:
        • Notificación sin expandir: 43 carácteres máximo
        • Notificación expandida: 80 caracteres máximo

1.2.1 Ejemplos en Mac Firefox

Como comentabamos anteriormente la visualización de la notificación no solo se ve afectada por el estado de la misma (desplegada o sin desplegar) o por el navegador (Chrome, Firefox o Safari), si no que el sistema operativo (Mac, Windows o Android) también afecta a la vista. En el caso de Firefox en Mac, si que se soportan imagenes que sustituyen al icono de la notificación:

Ejemplo de push SIN IMAGEN en Firefox Mac:

FirefoxMac

Ejemplo de push CON IMAGEN en Firefox Mac:

FirefoxMac

Igual que ocurría en Chrome, nuestra notificación de Firefox quedará almacenada en la bandeja del sistema de la siguiente manera:

buzonMacFirefox

1.2.2 Ejemplos en Windows Firefox

Ejemplo de push SIN IMAGEN en Firefox Windows:

En las notificaciones sin Imagen podremos ver con el titulo ocupa la parte superior y en la parte inferior tenemos a la izquierda el icono y a la derecha el cuerpo de la push.

FirefoxAndroidConImagen

Ejemplo de push CON IMAGEN en Firefox Windows:

En las notificaciones con Imagen en Firefox y Windows como podemos comprobar si comparamos con Chrome, no veremos el icono, tendremos el titulo de la notificación a modo de encabezado y debajo podremos ver el cuerpo de la push y la imagen en la parte inferior izquierda.

FirefoxAndroidConImagen

1.2.3 Ejemplos en Android Firefox

Como ocurría con el texto al pasar a la versión móvil del navegador se reduce el espacio disponible para el logo, por lo que nosotros no recomendamos que este contenga letras, ya que pueden verse deformadas tal y como se muestra a continuación:

Ejemplo de push SIN IMAGEN en Firefox Android:

Al igual que ocurría en Chrome, la vista de notificación varía en función de si esta desplegada o no, cortando el cuerpo de la notificación si esta excede los 43 caracteres máximos.

  • Notificación sin desplegar:

    FirefoxAndroidSinImagen

  • Notificación desplegada:

    FirefoxAndroidSinImagenOpen

Ejemplo de push CON IMAGEN en Firefox Android:

La diferencia que existe con respecto a Chrome en la notificaciones con imagen en Firefox es que perdemos la vista del icono independientemente de si la notificación esta desplegada o no. En su lugar podremos ver la imagen siempre en la posición en la que en Chrome teníamos el icono. El hecho de que la push este desplegada o no afectará únicamente al cuerpo de la misma.

  • Notificación sin desplegar:

    FirefoxAndroidConImagen

  • Notificación desplegada:

    FirefoxAndroidConImagenOpen

1.3 Navegador Safari

  • Notificaciones SIN IMAGEN

    • Titulo: 30 caracteres máximo
    • Cuerpo: 80 caracteres máximo
    • Icono : tamaño máximo 128x128px

1.3.1 Ejemplos en Mac Safari

En Safari, como sucedía en Chrome las notificaciones con imágen no están suportadas por lo que para este navegador solo tendremos notificaciones sin imagen:

SafariMac

Nuestra notificación de Safari en la bandeja del sistema se verá de la siguiente manera:

buzonMacSafari

2. Notificaciones en aplicación móvil

2.1 Dispositivos Android

  • NOTIFICACIONES SIN IMAGEN:

    • Titulo: 40 caracteres máximo
    • Cuerpo: 120 caracteres máximo
    • Icono: tamaño máximo 128x128px, y 256x256px en pantallas retina.

  • NOTIFICACIONES CON IMAGEN:

    • Titulo: 40 caracteres máximo
    • Cuerpo: 120 caracteres máximo (para versiones v2.3.1 e inferiores el tamaño máximo del cuerpo deberá ser de 40 caracteres)
    • Icono: tamaño máximo 128x128px, y 256x256px en pantallas retina.
    • Imagen (tamaño recomendado 720x360px):
      • Relación de aspecto 2:1
      • Resolución máxima 960x480px (smartphones plus, tablets grandes)
      • Resolución mínima 480x240px
      • Peso cuanto menos mejor (p.e. 20KB)
      • Peso máximo 100KB
      • Formato recomendado jpg 30

  • NOTIFICACIONES CON GIF ANIMADO: Este tipo de notificaciones es un tipo de notificacion con Imagen.
    • Titulo: 40 caracteres máximo
    • Cuerpo: 120 caracteres máximo (para versiones v2.3.1 e inferiores el tamaño máximo del cuerpo deberá ser de 40 caracteres)
    • Icono: tamaño máximo 128x128px, y 256x256px en pantallas retina.
    • Gif:
      • Máximo de 3 imágenes.
      • Relación de aspecto 2:1
      • Resolución máxima de imagen 500x250px (smartphones plus, tablets grandes)
      • Peso cuanto menos mejor (p.e. 90KB)
      • Peso máximo 300KB
      • Tiempo mínimo entre cada frame: 3 segundos

2.1.1 Ejemplos Notificación Sin IMAGEN

  • Notificación sin desplegar:

    AndroidSinImagen

  • Notificación desplegada:

    AndroidSinImagenDesplegada

2.1.2 Ejemplos Notificación Con IMAGEN

  • Notificación sin desplegar:

    AndroidConImagen

  • Notificación desplegada:

    AndroidConImagenDesplegada

2.1.3 Ejemplos Notificación Con GIF

  • Notificación sin desplegar:

    AndroidGIF

  • Notificación desplegada:

    AndroidGIFDesplegada

2.1.4 Diferencias en función de la versión del s.o.

  • DISPOSITIVOS CON ANDROID 4 (Kitkat):

    En dispositivos con esta versión de s.o. la recepción de la push se notifica al usuario únicamente en la barra de de notificaciones del sistema mediante el icono de la app, esto significa que la notificación no se muestra al usuario a modo de pop-up cuando se recepciona además en este tipo de dispositivos no existe el término desplegado o sin desplegar, la imagen se mostrara en la bandeja del sistema siempre desplegada.

    Cómo se observa en la siguiente imagen, podremos ver el icono de la app, el título a su derecha y debajo el texto del cuerpo y la imagen que se envío en la notificación:

    Android6

  • DISPOSITIVOS CON ANDROID 5 (Lollipop):

    En Android 5 se ha introducido una sería de modificaciones con respecto a la visualización de las notificaciones de la versión anterior:

    1. La notificación se muestra como un pop-up al usuario y luego es almacenada en la bandeja del sistema a modo de buzón (como en la versión anterior).
    2. Se ha introducido el icono monocromo que se puede visualizar sobre el icono de la app en formato redondo. Este icono monocromo utilizará como fondo el color primario que lleve seteado la app.
    3. Sólo tendremos posibilidad de tener notificaciones contraidas o sin desplegar por lo que en dispositivos con este s.o. no se podrán visualizar las notificaciones con imagen.
    4. Debido al punto anterior el tamaño máximo del cuerpo debe ser de 43 caracteres máximo, para evitar que el texto aparezca cortado.

    A continuación podemos ver un par de imágenes de cómo se verían las notificaciones con imagen en este tipo de dispositivos:

    • Recepción de la notificación: Como se puede observar en la imagen no nos aparece la flechita que nos permite desplegar la notificación y tampoco nos reconoce el gesto de arrastrar el dedo que nos permitía en versiones superiores de Android.

      Android6

    • Notificación en la bandeja del sistema: Como podemos ver en la siguiente imágen tampoco aquí tendremos disponible la flecha que nos permite desplegar la notificación y visualizar la imagen, igualmente como el texto utilizado sobrepasa los 43 caracteres de máximo, nuestro texto aparece cortado.

    Android6

  • DISPOSITIVOS CON ANDROID 6 (Marshmallow):

    En Android 6 se introduce la posibilidad de desplegar la notificación mediante la detección del gesto de arrastrar el dedo hacia abajo, de esta manera la notificación se despliega, mostrándola directamente en la bandeja del sistema.

    • Notificación Desplegada :

      Android6

    • Notificación sin Desplegar:

      Android6

  • DISPOSITIVOS CON ANDROID IGUALES O SUPERIORES A ANDROID 7(Nougat, Oreo, Pie):

    En Android 7 se incluyeron una serie de modificaciones relativas a la visualización de la notificación:

    1. El icono monocromo deja de aparecer sobre el icono de la app en la notificación y pasa a encabezar la notificación.
    2. Se añade el nombre de la app a la derecha del icono monocromo.
    3. Se añade la flechita que nos permite desplegar la notificación cuando esta en la bandeja del sistema.

    A continuación podemos ver un ejemplo:

    Android6

2.2 Dispositivos iOS

  • NOTIFICACIONES SIN IMAGEN:

    • Titulo: 40 caracteres máximo
    • Cuerpo: 120 caracteres máximo
    • Icono: tamaño máximo 128x128px, y 256x256px en pantallas retina.

  • NOTIFICACIONES CON IMAGEN:

    • Titulo: 40 caracteres máximo
    • Cuerpo: 120 caracteres máximo
    • Icono: tamaño máximo 128x128px, y 256x256px en pantallas retina
    • Imagen (tamaño recomendado 720x360px):
      • Relación de aspecto 2:1
      • Resolución máxima 960x480px (smartphones plus, tablets grandes)
      • Resolución mínima 480x240px
      • Peso cuanto menos mejor (p.e. 20KB)
      • Peso máximo 100KB
      • Formato recomendado jpg 30

  • NOTIFICACIONES CON GIF ANIMADO: Este tipo de notificaciones es un tipo de notificacion con Imagen.
    • Titulo: 40 caracteres máximo
    • Cuerpo: 120 caracteres máximo
    • Icono: tamaño máximo 128x128px, y 256x256px en pantallas retina.
    • Gif:
      • Máximo de 3 imágenes.
      • Relación de aspecto 2:1
      • Resolución máxima de imagen 500x250px (smartphones plus, tablets grandes)
      • Peso cuanto menos mejor (p.e. 90KB)
      • Peso máximo 300KB
      • Tiempo mínimo entre cada frame: 3 segundos

2.2.1 Ejemplos Notificación Sin IMAGEN

  • Notificación sin desplegar con la app en BACKGROUND:

    iosSinImagen

  • Notificación desplegada con la app en BACKGROUND:

    iosSinImagenDesplegada

  • Notificación con la app en PRIMER PLANO: Cuando llega la notificación con la app en primer plano, se mostrará un alert como el siguiente:

    iosPPalert

    Cuando se pulsa en el alert, se mostrara la notificación de la siguiente manera:

    iosPPSinImagenOpen

2.2.2 Ejemplos Notificación Con IMAGEN

  • Notificación sin desplegar con la app en BACKGROUND: Como se puede apreciar a continuación, la imagen se inserta en miniatura en la parte inferior derecha:

    iosConnImagen

  • Notificación desplegada con la app en BACKGROUND: Al desplegar la notificación el contenido se redistribuye ocupando ahora la imagen todo el ancho de la notificación dejando espacio en la parte inferior para el titulo y el cuerpo de la push:

    iosConImagenDesplegada

  • Notificación con la app en PRIMER PLANO: Cuando llega la notificación con la app en primer plano, el alert que se muestra es el mismo que para las notificaciones sin imagen, como se puede ver a continuación:

    iosPPalert

    Cuando se pulsa en el alert, se mostrara la notificación de la siguiente manera:

    iosPPConImagenOpen

2.2.3 Ejemplos Notificación Con GIF

  • Notificación sin desplegar: Cuando la notificación esta sin desplegar el gif no se ejecutará, la vista que tendremos será la misma que si la notificación fuera una push con imagen simple en la que la imagen que se ve se corresponderá con la primera que se cargo en el momento de crear la notificación.

    AndroidGIF

  • Notificación desplegada: Una vez desplegada podemos ver la ejecución del gif de la siguiente manera:

    AndroidGIFDesplegada

2.2.4 Diferencias en función de la versión del s.o.

iOS tiene su propio maquetado dependiendo de la versión del OS, y además no permite personalizar la apariencia. Únicamente deberemos tener en cuenta la versión del s.o que es la que limita ciertos comportamientos respecto al envío y recepción de las notificaciones y como estas se visualizan:

  • DISPOSITIVOS CON IOS 9 E INFERIORES:

    Esta versión del s.o. no permite el envío de notificaciones con imagen, ni tampoco nos permite desplegar la notificación por lo que Únicamente tendremos la opción de hacer envíos de notificaciones sin imagen, que se visualizarán de la siguiente manera:

    ios9

  • DISPOSITIVOS CON IOS 10 EN IPHONE 5:

    En esta versión del s.o. las notificaciones sí se permite el envío de notificaciones con imagen pero seguimos sin poder desplegar la push, por este motivo este tipo de notificaciones solo permitirán la posibilidad de ver la imagen en miniatura en la parte inferior derecha de la notificación, tal y como vemos a continuación:

    ios10

  • DISPOSITIVOS CON IOS 11 y IPHONE 6 CON IOS 10:

    En este caso ya se nos permite desplegar la notificación por lo que podremos no solo ver la notificación con imagen si no que damos opción para que se ejecute el gif.

    • Notificación sin desplegar:

      ios10

    • Notificación desplegada:

      ios10