image


Design Specifications


Content

  1. Web Notifications
    1. Chrome Browser
      1. Examples in Mac Chrome
      2. Examples in Windows Chrome
      3. Examples in Android Crome
    2. Firefox Browser
      1. Examples in Mac Firefox
      2. Examples in Windows Firefox
      3. Examples in Android Firefox
    3. Safari Browser
      1. Examples in Mac Safari
  2. Mobile App Notifications
    1. Android Devices
      1. Examples Notification without Image
      2. Examples Notification with Image
      3. Examples Notification with GIF
      4. Differences depending on the OS version
    2. iOS Devices
      1. Examples Notification without Image
      2. Examples Notification with Image
      3. Examples Notification with GIF
      4. Differences depending on the OS version

1. Web Notifications

Each browser has its own layout depending on the platform and is not possible to custom the view. For example, the number of lines and characters changes in each case. Moreover there are another aspects that limit to the maximum size:

  • The width of the words.
  • The width of the characters that are being used in the message.
  • The width of the device screen.

1.1 Chrome Browser:

  • Notifications WITH IMAGE: This is the shipping option that we recommender due to its visual impact. According to our experience this kind of notification generate more user interaction with the push. Their desing specifications are the next:

    • Title: 22 characters maximum
    • Body:
      • Mac: 22 characters maximum (In the system inbox 80 characters maximum)
      • Windows: 35 characters maximum
    • Icon: maximum size 128x128px, y 256x256px in retina Screen.
    • Image:
      • Minimun resolution 480x240px
      • Weight, the minimun as possible (p.e. 20KB)
      • Recommended format. jpg 30%

  • Notifications WITHOUT IMAGE:
    • Title: 22 characters maximum
    • Body:
      • Mac: 22 characters maximum (In the system inbox 80 characters maximum)
      • Windows: 80 characters maximum
    • Icon: maximum size 128x128px, y 256x256px in retina Screen.
  • Notifications WebPush in Chrome Android: When the receptions are realised in the mobile version of the Chrome browser, the user have to have in count that the available space is less that in its web version. For this reason and to can show the content of the notification correctly, the user have to modify the maximum number of character in the notification body and title:
    • With IMAGE:
      • Title: 30 characters maximum
      • Body: 43 characters maximum (for the notification unfolded and without unfolding)
    • Without IMAGE:
      • Title: 30 characters maximum
      • Body:
        • Notification without unfolding: 43 characters maximum
        • Notificación unfolded: 80 characters maximum

1.1.1 Examples in Mac Chrome

The display of the notification is afeccted by the device OS, it is mean that the notification is not show by the same way in Mac and Windows for the same browser. In the concrete case of Chrome in Mac the notifications with image is not supported and it will be shown equal than the notificactions without image:

chromeMac

In Mac devices, the user can have the notification saved in the system inbox too. As we can see in the image, here the user can see the whole text of the notification body (Of course if it does not overcome the 80 characters maximum):

buzonMacChrome

1.1.2 Examples in Windows Chrome

Windows OS supports the notifications with image. This allow us to receive notifications with and without image. Equally we have the system inbox to show the notifications some time after of the reception if the user did not have interaction with the push:

Example of push WITHOUT IMAGE in Chrome Windows:

In this kind of notifications, the user can see the title at the top followed by the text and icon at the top left.

ChromeAndroidConImagen

Example of push WITH IMAGE in Chrome Windows:

As it can see in the next image, for Chrome in Windows the notification will have the image in the top, under the image will be the title followed by the body of the notification and the icon the bottom left.

ChromeAndroidConImagen

Example of push in system inbox in Chrome Windows:

  • Notification without unfolding sin desplegar:

    ChromeAndroidConImagen

  • Notification unfolded:

    ChromeAndroidConImagen

1.1.3 Examples in Android Chrome

In Mobile browser, the available space for the icon is reduced, so we recommended that the icon does not have letters because the letters could suffer a wrap as see in the next images:

Example of push WITHOUT IMAGE in Chrome Android: In the next images, there are difference between the view when the notification is unfolded and when is without unfolding.

When the user receives the notification, if in the system inbox there are a lot of notifications, our notification will appear without unfolding. This affects to the number of character that will be shown in the body of the notification being less when the notification is without unfolding.

If the number of characters is more than the maximum number of characters for the notification without unfolding (43 characters), the tex will be shown cut and followed by three dots. When the user unfold the notification if the text is less than the maximum number of characters for the notification unfolded (80 caracteres) , the text of body will be shown whole.

  • Notification without unfolding:

    ChromeAndroidConImagen

  • Notification unfolded:

    login

Example of push WITH IMAGE in Chrome Android:

When the notification has an image, this is shown only when the notification is unfolded. By the same way the reserved space for the body when the notification has image, is reduced more allowing 43 characters at maximum. If the number of characters is bigger than the maximum number of character let, independently of the notification state , the text is shown cut and followed by a several dots and the user will not have any way to see whole text.

  • Notification without unfolding:

    ChromeAndroidConImagen

  • Notification unfolded:

    login

1.2 Firefox Browser

  • Notification WITH IMAGE:

    • Title: 30 characters maximum.
    • Body: 80 characters maximum.
    • Icon: maximum size 128x128px, and 256x256px in retina screen.
    • Image:
      • Minimum resolution 80x80px (160x160px in retina screen)
      • Weight, the minimum as possible.(p.e. 20KB)
      • Recommended format is jpg 30%
      • Is mandatory to include the domain, from which the user made the register in the service.

  • Notifications WITHOUT IMAGE:

    • Title: 30 characters maximum.
    • Body: 80 characters maximum.
    • Icon: Maximum size 128x128px, and 256x256px in retina screen.

  • Notifications webPush in Firefox Android: When a notification reception is produced in the mobile browser version, as occured with mobile Chrome, the user has to have in count that the space to show the notification is reduced and for this reason is neccessary modified the maximum number of character let:

    • WITH IMAGE:
      • Title: 30 characters maximum.
      • Body: 43 characters maximum (for the notification unfolded and without unfolding).
    • WITHOUT IMAGE:
      • Title: 30 characters maximum.
      • Body:
        • Notification without unfolding: 43 characters maximum.
        • Notification unfolded: 80 characters maximum.

1.2.1 Examples in Mac Firefox

As we commented previously the display of the notification is affected by the state of the notification (unfolded and without unfolding), by the browser (Chrome, Firefox and Safari) and by the OS (MAC, Windows and Android). In the case of Firefox in Mac, the images are supported and are shown in the position of the icon inside the notification:

Example of push WITHOUT IMAGE in Firefox Mac:

FirefoxMac

Example of push WITH IMAGE in Firefox Mac:

FirefoxMac

Equal that occurred in Chrome, our Firefox notification will be stored in the system inbox, as it is shown in the next image:

buzonMacFirefox

1.2.2 Examples in Windows Firefox

Example of the push WITHOU IMAGE in Firefox Windows:

In the notifications without image, we can see that the title fills the top of the notification and in the bottom, we have at the left the icon and at the right the notification body.

FirefoxAndroidConImagen

Example of the push WITH IMAGE in Firefox Windows:

In the notifications with Image in Firefox and Windows, we do not have the icon and in its place we can see the image.

FirefoxAndroidConImagen

1.2.3 Examples in 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:

Example of the push WITHOUT IMAGE in 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

Example of the push WITH IMAGE in Firefox Android:

The difference between Chrome and Firefox in Android is the user loses the icon view independently of the notification state (unfolded or withougt unfolding), in its place we can see the image view. The state of the notification only will afecct to the space for the text in the notification body.

  • Notification without unfolding:

    FirefoxAndroidConImagen

  • Notification unfolded:

    FirefoxAndroidConImagenOpen

1.3 Safari Browser

  • Notifications WITHOUT IMAGE

    • Title: 30 characters maximum.
    • Body: 80 characters maximum.
    • Icon: Maximum size 128x128px.

1.3.1 Examples in Mac Safari

In Safari, like occured in Chrome the notifications with image are not supported. For this reason in Safari did not see notifications with image:

SafariMac

Our Safari notification in the system inbox will see like is shown in the next image:

buzonMacSafari

2. Notifications in mobile aplication.

2.1 Android Devices

  • NOTIFICATIONS WITHOUS IMAGE:

    • Title: 40 characters maximum.
    • Body: 120 characters maximum.
    • Icon: Maximum size 128x128px and 256x256px in retina screen.

  • NOTIFICATIONS WITH IMAGE:

    • Title: 40 characters maximum
    • Body: 120 characters maximum (para versiones v2.3.1 e inferiores el tamaño máximo del cuerpo deberá ser de 40 caracteres)
    • Icon: Maximum size 128x128px and 256x256px in retina screen.
    • Image: (Recommended size 720x360px):
      • Relación de aspecto 2:1
      • Maximum resolution 960x480px (smartphones plus, big tablets)
      • Minimum resolution 480x240px
      • Weight, the minimun as possible (f.e. 20KB)
      • Maximum weight 100KB
      • Recommended format jpg 30

  • NOTIFICATIONS WITH ANIMATED GIF: Este tipo de notificaciones es un tipo de notificacion con Imagen.

    • Title: 40 caracteres máximo
    • Body: 120 caracteres máximo (para versiones v2.3.1 e inferiores el tamaño máximo del cuerpo deberá ser de 40 caracteres)
    • Icon: Maximum size 128x128px and 256x256px in retina screen.
    • Gif:
      • Maximum number of images: 3.
      • Aspect relationship 2:1
      • Maximum resolution of the image 500x250px (smartphones plus, tablets big)
      • Weight, the minimun as possible (f.e. 90KB)
      • Maximum weight 300KB
      • Time to change the imageT: 3 seconds

2.1.1 Examples Notification without Image

  • Notificación sin desplegar:

    AndroidSinImagen

  • Notificación desplegada:

    AndroidSinImagenDesplegada

2.1.2 Examples Notification with Image

  • Notification without unfolding:

    AndroidConImagen

  • Notificaction unfolded:

    AndroidConImagenDesplegada

2.1.3 Examples Notification with GIF

  • Notification without unfolding:

    AndroidGIF

  • Notificaction unfolded:

    AndroidGIFDesplegada

2.1.4 Differences depending on the OS version

  • DEVICES WITH ANDROID 4 (Kitkat):

    In devices with this OS version, the reception of the push is noticed to user only in the system notifications bar throught the app icon. This is meant that the notifications is not shown to user like a pop-up when it is received. Moreover in this kind of devices the notification can not be contracted so the notification will be shown in the system bar always unfolded. As you can see in the next image, the icon is shown in the notification, the title is located at right, the text of the body under the title and the image that was sent in the notification:

    Android6

  • DEVICES WITH ANDROID 5 (Lollipop):

    In Android 5, several changes were introduced respect the notification display of previous OS version:

    1. The notification is shown like a pop-up to the user and then is stored in the system inbox.
    2. There is a new icon, the monochrome icon, that is shown over the icon in round format. This monochrome icon will use primary color of the app as background color.
    3. The notification can not be unfolded. For this reason in Android 5, the image of the notification will not show and there will not be diference between notifications with and withouth image.
    4. Due to the previuos point the maximum size of the body text must be 43 characters. By this way we will avoid text appears cut.

    Next, we can see a couple of images, that show how the the image would be displayed in this kind of devices:

    • Reception of the notification: How we can see, the little arrow that allowed us unfold the notification is not present in the notification. Moreove the gesture of dragging the finger to unfold the notification is not accepted too.

      Android6

    • Notification in the system inbox: In the system inbox, the notification has not the litle arrow availabled for unfold the notification and show the image. Moreover in the bellowed image the text is bigger than 43 characters that is the maximum and so our text appears cut.

    Android6

  • DEVICES WITH ANDROID 6 (Marshmallow):

    In Android 6 the possibility of unfold the notification is introduced through the gesture of dragging the finger. By this way the notification is unfolded show it directly in the system inbox.

    • Notification unfolded:

      Android6

    • Notification without unfolding:

      Android6

  • DEVICES WITH ANDROID EQUAL OR BIGGER THAN ANDROID 7(Nougat, Oreo, Pie):

    In Android 7 a several changes in the way to show the notification were added:

    1. The icon monochrome is not shown over the app icon and it is located in the header of the notification.
    2. The name of app is added at the right of the icon monochrome.
    3. The little arrow to unfold the notification is added when the notification is shown to the users before it was stored in the system inbox.

    Next, we can see an example:

    Android6

2.2 iOS Devices

  • NOTIFICATIONS WITHOUT IMAGE:

    • Title: 40 characters maximum.
    • Body: 120 characters maximum.
    • Icon: Maximum size 128x128px and 256x256px in retina screens.

  • NOTIFICATIONS WITH IMAGE:

    • Title: 40 characters maximum.
    • Body: 120 characters maximum.
    • Icon: Maximum size 128x128px and 256x256px in retina screens.
    • Image (Recommended size 720x360px):
      • Aspect relationship 2:1
      • Maximum resolution 960x480px (smartphones plus, big tablets)
      • Minimum resolution 480x240px
      • Weight, the minimun as possible (f.e. 20KB)
      • Maximum weight100KB
      • Recommended format jpg 30

  • NOTIFCATIONS WITH ANIMATED GIF:

    • Title: 40 characters maximum.
    • Body: 120 characters maximum.
    • Icon: Maximum size 128x128px and 256x256px in retina screens.
    • Gif:
      • 3 images as maximum.
      • Aspect relationship 2:1
      • Resolución máxima de imagen 500x250px (smartphones plus, tablets grandes)
      • Weight, the minimun as possible (f.e. 90KB)
      • Maximum weight 300KB
      • Minimum time to change the image: 3 seconds

2.2.1 Examples Notification without Image

  • Notification without unfolding with the app in BACKGROUND:

    iosSinImagen

  • Notification unfolded with the app in BACKGROUND:

    iosSinImagenDesplegada

  • Notification with the app in FOREGROUND:

    When the notification is received with the app in foreground, an alert is shown:

    iosPPalert

    When the user click in the alert, the notification is shown by the next way:

    iosPPSinImagenOpen

2.2.2 Examples Notification with Image

  • Notification without unfolding with the app in BACKGROUND: How the user can see in the next image, the image is inserted as miniature at the bottom right:

    iosConnImagen

  • Notification unfolded with the app in BACKGROUND: When the user unfold the notification, the content is distributed, now the image occupies all width of the notification and leaves the space at bottom for the title and body of the notification:

    iosConImagenDesplegada

  • Notification withe the app in FOREGROUND: When the notification is received with the app is in foreground, the alert that is shown is the same alert that is shown when the notification without image is sent:

    iosPPalert

    When the user click in the alert, the notification is shown by the next way:

    iosPPConImagenOpen

2.2.3 Examples Notification with GIF

  • Notification without unfolding: When the notification is without unfolding the GIF is not executed, the view that is show will be the same view that you can see when a simple notification is sent. This view will be the first image that was upload when the user created the notification from the panel.

    AndroidGIF

  • Notification unfolded: When the notification is unfolded we can see the gif execution by the next way:

    AndroidGIFDesplegada

2.2.4 Differences depending on the OS version.

iOS has its own layout system depending on the OS version. Moreover the system does not allow to customize the appearance. The user only has to have in count the OS version that it is the responsable of the behaviour limitations respect to shipping and reception of the notifications and how they are displayed:

  • DEVICES WITH IOS 9 AND LESS:

    In these versions of OS the shipping of notifications without image is not supported. The option to unfold the notification is not possible too so the user only can send notifications without image:

    ios9

  • DEVICES WITH IOS 10 IN IPHONE 5:

    In this OS version the notifications with image can be sent but the option to unfold the push is not availabed. For this reason this kind of notifications only shows the image in miniature at the bottom right as we can see in the following image:

    ios10

  • DEVICES WITH IOS 11 AND IPHONE 6 WITH IOS 10:

    In this case, the option to unfold the notification is availabled so the user can see the notification with image and can see the gif execution.

    • Notification without unfolding:

      ios10

    • Notification unfolded:

      ios10