Push bildirim tasarım rehberi

Push bildirimleri: görsel ve video

Medya push bildirimleri için görseller, içinde eklenebilir What adımında, görselin URL’si girilerek Android Medya URL’si ve iOS Medya URL’si metin alanlarına ayrı ayrı ya da medya dosyalarını cihazdan yükleyerek. gif ve video biçimlendirilmiş medya push’ları yalnızca iOS cihazları tarafından desteklenir.

Medya Ekle

Görsel	iOS	Android
Dosya türleri	Önerilen: jpg, jpeg, png, gif	Önerilen: jpg, jpeg, png
Çözünürlük	Önerilen: 2:1 en-boy oranında yatay  Yaygın Boyutlar: 512x256px   1440x720px Minimum Genişlik: 300 piksel Maks. Genişlik: 4096 piksel	Önerilen: 2:1 en-boy oranında yatay  Yaygın Boyutlar: 512x256px   1440x720px Minimum Genişlik: 300 piksel Maks. Genişlik: 2000 piksel

iOS medya URL’si için desteklenen video dosya türleri

Video biçimlendirilmiş medya push’ları yalnızca desteklenir iOS cihazları için.

Video	Desteklenen dosya türleri	Maksimum boyut
Video	MPEG MPEG-2 MP4 AVI	5 MB

Netmera widget görsel boyutları

Widget’leriniz çeşitli çözünürlüklere ve boyutlara uyacak şekilde özelleştirilebildiğinden, ideal görsel boyutunu belirlemek esnek bir süreçtir ve katı gereksinimler yoktur. Uygun görsel boyutunu kullanabilirsiniz; widget’ler istenen boyutlara göre ayarlanmış çözünürlüklerle hazırlanabilir.

Tam genişlikte görsel widget’ler için ipuçları:

Tam genişlikte bir görünüm tercih ediyorsanız, widget boyutunu görsel boyutuna eşitleyerek widget boyutunu görsel boyutuyla uyumlu hale getirmek uygun bir yaklaşım olabilir. Bu esneklik, widget görsellerini özel ihtiyaçlarınıza göre uyarlamanızı sağlar.

Push bildirimi stilleri

1. Tarayıcı Simgesi Manifest’te başlangıçta tanımlanan ve tekil mesajlar için düzenlenemeyen simge.

2. Başlık 30 Karakter (kısaltılmadan önce).

3. Bildirim Zamanı Bildirim ne kadar eski olduğunu gösterir.

4. Uygulama Adı Web Uygulaması Manifesti’nde kaydedildiği şekliyle uygulama adı (düzenlenemez).

5. Mesaj Metni 120-150 karakter (kısaltılmadan önce).

Web Push

macOS Monterey için Chrome

a. Tarayıcı Simgesi Chrome simgesi. Bu değiştirilemez.

b. Başlık 60-80 karakter ile sınırlıdır.

c. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

d. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil). Genişletildiğinde büyür.

e. İçerik 120-150 karakter ile sınırlıdır.

f. Eylem Düğmeleri En fazla 2 düğmeyi destekler.

Karakter sınırlamalarının, bir simge olup olmamasına ve kullanılan karakterlere bağlı olarak değiştiğini unutmayın.

macOS Monterey için Firefox

a. Tarayıcı Simgesi Firefox simgesi. Bu değiştirilemez.

b. Başlık 60-80 karakter ile sınırlıdır.

c. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

d. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil). Genişletildiğinde büyür.

e. İçerik 120-150 karakter ile sınırlıdır.

f. Eylem Düğmeleri En fazla 2 düğmeyi destekler.

Karakter sınırlamalarının, bir simge olup olmamasına ve kullanılan karakterlere bağlı olarak değiştiğini unutmayın.

macOS Monterey için Safari

a. Simge Bu bir kez ayarlanır ve tek tek mesajlar için değiştirilemez. 256×256 olmalıdır. PNG, JPG, GIF (animasyonlu değil).

b. Başlık 60-80 karakter ile sınırlıdır.

c. İçerik 120-150 karakter ile sınırlıdır.

Windows 11 için Chrome

a. Banner Görseli 360×180 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonlu değil).

b. Tarayıcı + Tarayıcı Simgesi Değiştirilemez.

c. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

d. Eylem Düğmeleri En fazla 2 düğmeyi destekler.

e. Diğer Seçenekler Bildirim ayarlarını ve odak yardımını içerir.

f. Kapat Bildirimi kapatır.

g. Başlık 60 karakter ile sınırlıdır.

h. İçerik 120 karakter ile sınırlıdır.

i. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

Windows, hem banner görselinin hem de simgenin görüntülendiği en geniş görsel alanı sunar.

Windows 11 için Microsoft Edge

a. Banner Görseli 360×180 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonlu değil).

b. Tarayıcı + Tarayıcı Simgesi Değiştirilemez.

c. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

d. Eylem Düğmeleri En fazla 2 düğmeyi destekler.

e. Diğer Seçenekler Bildirim ayarlarını ve odak yardımını içerir.

f. Kapat Bildirimi kapatır.

g. Başlık 60 karakter ile sınırlıdır.

h. İçerik 120 karakter ile sınırlıdır.

i. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

Windows 11 için Firefox

a. Tarayıcı + Tarayıcı Simgesi Değiştirilemez.

b. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

c. Diğer Seçenekler Bildirim ayarlarını ve odak yardımını içerir.

d. Kapat Bildirimi kapatır.

e. Başlık 60 karakter ile sınırlıdır.

f. İçerik 120 karakter ile sınırlıdır.

g. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

Windows 11’deki Firefox’ta, Chrome ve Edge’deki gibi bir banner görseli veya eylem düğmeleri bulunmadığını unutmayın.

Android 12 için Chrome

a. Rozet 72×72 veya daha büyük. Şeffaf arka planlı beyaz olmalıdır. PNG.

b. Başlık 50 karakterle sınırlıdır.

c. Gövde 150 karakterle sınırlıdır.

d. Büyük Görsel 1024×512 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonlu değil).

e. Tarayıcı Değiştirilemez.

f. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

g. Zaman Damgası Mesajın alındığı zaman.

h. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

i. Eylem Düğmeleri En fazla 2 düğmeyi destekler.

Mobil push

iOS 15 yerel

a. Uygulama Simgesi Uygulamanın varsayılan simgesini kullanır ve değiştirilemez.

b. Zengin Medya 1024×1024 veya 1:1 en-boy oranı. PNG, JPG, GIF, MP4, MP3, WAV.

c. Başlık 25-50 karakter ile sınırlıdır.

d. Zaman Damgası Mesajın alındığı zaman.

e. Mesaj 150 karakterle sınırlıdır.

f. Eylem Düğmeleri En fazla 4 düğmeyi destekler.

iOS ayrıca bir alt başlığı da destekler. Android’den farklı olarak, iOS şu anda web push desteğine sahip değildir; ancak iOS web push desteğinin yakında gelebileceğini düşünüyoruz.

Android 12 yerel

a. Küçük Simge Tüm cihaz boyutlarına uyacak şekilde 24×24 – 96×96. Şeffaf arka planlı beyaz olmalıdır. PNG.

b. Başlık 50 karakterle sınırlıdır.

c. Gövde 150 karakterle sınırlıdır.

d. Büyük Görsel 1440×720 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonlu değil).

e. Uygulama Adı Değiştirilemez.

f. Zaman Damgası Mesajın alındığı zaman.

g. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

h. Eylem Düğmeleri En fazla 3 düğmeyi destekler.

Eski web işletim sistemleri

Referans için işletim sistemleri (macOS Big Sur, iOS 14, Android 11).

macOS Big Sur için Chrome

a. Tarayıcı Simgesi Chrome simgesi. Bu değiştirilemez.

b. Başlık 60-80 karakter ile sınırlıdır.

c. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

d. İçerik 120-150 karakter ile sınırlıdır.

e. Tarayıcı Değiştirilemez.

f. Zaman Damgası Mesajın alındığı zaman.

g. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil). Genişletildiğinde büyür.

h. Eylem Düğmeleri En fazla 2 düğmeyi destekler.

Karakter sınırlamalarının, bir simge olup olmamasına ve kullanılan karakterlere bağlı olarak değiştiğini unutmayın. macOS Big Sur ile önceki sürümler arasındaki temel fark, mesajların daha büyük bir simgeyle genişletilebilmesi ve tarayıcı simgesinin daha küçük olmasıdır; bu da içerik için daha fazla alan sağlar.

macOS Big Sur için Firefox

a. Tarayıcı Simgesi Firefox simgesi. Bu değiştirilemez.

b. Başlık 60-80 karakter ile sınırlıdır.

c. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

d. İçerik 120-150 karakter ile sınırlıdır.

e. Tarayıcı Değiştirilemez.

f. Zaman Damgası Mesajın alındığı zaman.

g. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil). Genişletildiğinde büyür.

h. Eylem Düğmeleri Bunlar Firefox için özelleştirilemez.

Karakter sınırlamalarının, bir simge olup olmamasına ve kullanılan karakterlere bağlı olarak değiştiğini unutmayın. macOS Big Sur ile önceki sürümler arasındaki temel fark, mesajların daha büyük bir simgeyle genişletilebilmesi ve tarayıcı simgesinin daha küçük olmasıdır; bu da içerik için daha fazla alan sağlar.

macOS Big Sur için Safari

a. Simge Bu bir kez ayarlanır ve tek tek mesajlar için değiştirilemez. 256×256 olmalıdır. PNG, JPG, GIF (animasyonlu değil).

b. Başlık 60-80 karakter ile sınırlıdır.

c. İçerik 120-150 karakter ile sınırlıdır.

d. Web Sitesi Adı Değiştirilemez.

e. Zaman Damgası Mesajın alındığı zaman.

macOS Catalina için Chrome

a. Tarayıcı Simgesi Chrome simgesi. Bu değiştirilemez.

b. Başlık 20-40 karakter ile sınırlıdır.

c. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

d. İçerik 20-80 karakter ile sınırlıdır.

e. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

Karakter sınırlamalarının, bir simge olup olmamasına ve kullanılan karakterlere bağlı olarak değiştiğini unutmayın. macOS için Chrome ayrıca 2 eylem düğmesini destekler.

macOS Catalina için Firefox

a. Tarayıcı Simgesi Firefox simgesi. Bu değiştirilemez.

b. Başlık 60-80 karakter ile sınırlıdır.

c. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

d. İçerik 20-80 karakter ile sınırlıdır.

e. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

Karakter sınırlamalarının, bir simge olup olmamasına ve kullanılan karakterlere bağlı olarak değiştiğini unutmayın.

macOS Catalina için Safari

a. Simge Bu bir kez ayarlanır ve tek tek mesajlar için değiştirilemez. 256×256 olmalıdır. PNG, JPG, GIF (animasyonlu değil).

b. Başlık 40 karakter ile sınırlıdır.

c. İçerik 90 karakter ile sınırlıdır.

Safari’nin bir tarayıcı simgesine sahip olmadığını fark edeceksiniz. Ayrıca alan adını da göstermez.

Windows 10 için Chrome

a. Banner Görseli 360×180 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonlu değil).

b. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

c. Tarayıcı Değiştirilemez.

d. Eylem Düğmeleri En fazla 2 düğmeyi destekler.

e. Başlık 60 karakter ile sınırlıdır.

f. İçerik 120 karakter ile sınırlıdır.

g. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

Windows, hem banner görselinin hem de simgenin görüntülendiği en geniş görsel alanı sunar.

Windows 10 için Firefox

a. Başlık 40 karakter ile sınırlıdır.

b. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

c. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

d. İçerik 140-190 karakter ile sınırlıdır.

e. Ayarlar Değiştirilemez.

Windows 10 için Microsoft Edge

a. Başlık 40 karakter ile sınırlıdır.

b. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

c. Tarayıcı Değiştirilemez.

d. İçerik 140-190 karakter ile sınırlıdır.

e. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

Android 11 için Chrome

a. Rozet 72×72 veya daha büyük. Şeffaf arka planlı beyaz olmalıdır. PNG.

b. Başlık 50 karakterle sınırlıdır.

c. Gövde 150 karakterle sınırlıdır.

d. Büyük Görsel 1024×512 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonlu değil).

e. Tarayıcı Değiştirilemez.

f. Alan Adı Kullanıcının abone olduğu web sitesi. Değiştirilemez.

g. Zaman Damgası Mesajın alındığı zaman.

h. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

Eski mobil işletim sistemleri

Android 11 yerel

a. Küçük Simge Tüm cihaz boyutlarına uyacak şekilde 24×24 – 96×96. Şeffaf arka planlı beyaz olmalıdır. PNG.

b. Başlık 50 karakterle sınırlıdır.

c. Gövde 150 karakterle sınırlıdır.

d. Büyük Görsel 1440×720 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonlu değil).

e. Eylem Düğmeleri En fazla 3 düğmeyi destekler.

f. Uygulama Adı Değiştirilemez.

g. Zaman Damgası Mesajın alındığı zaman.

h. Simge 192×192 veya daha büyük. PNG, JPG, GIF (animasyonlu değil).

iOS 14 yerel

a. Uygulama Simgesi Uygulamanın varsayılan simgesini kullanır ve değiştirilemez.

b. Zengin Medya 1024×1024 veya 1:1 en-boy oranı. PNG, JPG, GIF, MP4, MP3, WAV.

c. Başlık 25-50 karakter ile sınırlıdır.

d. Mesaj 150 karakterle sınırlıdır.

e. Uygulama Adı Değiştirilemez.

f. Seçenekler Değiştirilemez.

g. Eylem Düğmeleri En fazla 4 düğmeyi destekler.

iOS ayrıca bir alt başlığı da destekler. Android’den farklı olarak, iOS şu anda web push desteğine sahip değildir.