Tasarım Kılavuzu
Push Bildirimleri: Görsel & Video
Medya push bildirimleri için görseller, What adımında görselin URL'si girilerek eklenebilir Android Media URL and IOS Media URL metin alanlarına ayrı ayrı veya cihazdan medya dosyaları yükleyerek. gif and video formatlı medya push'ları yalnızca IOS cihazları tarafından desteklenir.
Dosya türleri
Önerilen: jpg, jpeg, png, gif
Önerilen: jpg, jpeg, png
Çözümleme
Ö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 Media URL için Desteklenen Video Dosya Türleri
Video formatlı medya push'ları yalnızca desteklenir IOS cihazları için.
Video
MPEG
MPEG-2
MP4
AVI
5 MB
Netmera Widget Görsel Boyutları
Widget'lar için ideal görsel boyutunu belirlemek esnek bir süreçtir çünkü katı gereksinimler yoktur; widget'lar farklı çözünürlük ve boyutlara uyacak şekilde özelleştirilebilir. Uygun görsel boyutunu kullanarak widget'lar istenen boyutlara göre ayarlanmış çözünürlüklerle hazırlanabilir.
Tam Genişlik Görsel Widget'ları için İpuçları:
Tam genişlik görüntülemeyi tercih ediyorsanız, widget boyutunu görsel boyutuna eşitleyerek widget boyutunu görsel boyutuyla hizalamak uygun bir yaklaşım olabilir. Bu esneklik, widget görsellerini ihtiyaçlarınıza göre uyarlamanızı sağlar.
Push Bildirimi Stilleri
Tarayıcı İkonu Manifestte ilk tanımlanan ve bireysel mesajlar için düzenlenemeyen ikon.
Başlık 30 Karakter (kısaltılmadan önce).
Bildirim Zamanı Bildirimin ne kadar süre önce olduğunu gösterir.
Uygulama Adı Web Application Manifest'te kaydedilen uygulama adı (düzenlenemez).
kullanıcı etkileşimini artırmayı hedefler. 120-150 karakter (kısaltılmadan önce).
Web Push
macOS Monterey için Chrome
a. Tarayıcı İkonu Chrome ikonu. 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. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz). Genişletildiğinde büyür.
e. İçerik 120-150 karakter ile sınırlıdır.
f. Aksiyon Butonları En fazla 2 butonu destekler.
İkonun varlığına ve kullanılan karakterlere bağlı olarak karakter sınırlamalarının değişebileceğini unutmayın.
macOS Monterey için Firefox
a. Tarayıcı İkonu Firefox ikonu. 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. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz). Genişletildiğinde büyür.
e. İçerik 120-150 karakter ile sınırlıdır.
f. Aksiyon Butonları En fazla 2 butonu destekler.
İkonun varlığına ve kullanılan karakterlere bağlı olarak karakter sınırlamalarının değişebileceğini unutmayın.
macOS Monterey için Safari
a. İkon Bu bir kez ayarlanır ve bireysel mesajlar için değiştirilemez. 256×256 olmalıdır. PNG, JPG, GIF (animasyonsuz).
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 (animasyonsuz).
b. Tarayıcı + Tarayıcı İkonu Değiştirilemez.
c. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
d. Aksiyon Butonları En fazla 2 butonu destekler.
e. Daha Fazla Seçenek 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örseli hem de ikonun gösterilmesiyle görseller için en fazla ekran alanını sunar.
Windows 11 için Microsoft Edge
a. Banner Görseli 360×180 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonsuz).
b. Tarayıcı + Tarayıcı İkonu Değiştirilemez.
c. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
d. Aksiyon Butonları En fazla 2 butonu destekler.
e. Daha Fazla Seçenek 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ı İkonu Değiştirilemez.
b. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
c. Daha Fazla Seçenek 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.
Firefox'un Windows 11'de Chrome ve Edge gibi bir banner görseli veya aksiyon butonları olmadığını unutmayın.
Android 12 için Chrome
a. Rozet (Badge) 72×72 veya daha büyük. Şeffaf arka plan üzerinde beyaz olmalıdır. PNG.
b. Başlık 50 karakter ile sınırlıdır.
c. Gövde 150 karakter ile sınırlıdır.
d. Büyük Görsel 1024×512 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonsuz).
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 ne zaman alındığını gösterir.
h. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
i. Aksiyon Butonları En fazla 2 butonu destekler.
Mobil Push
iOS 15 Native
a. Uygulama İkonu Uygulamanın varsayılan ikonunu 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 ne zaman alındığını gösterir.
e. Mesaj 150 karakter ile sınırlıdır.
f. Aksiyon Butonları En fazla 4 butonu destekler.
iOS ayrıca bir alt başlık (subtitle) desteğine sahiptir. Android'in aksine iOS şu anda web push desteğine sahip değildir; fakat yakın zamanda iOS web push desteğinin gelebileceğini düşünüyoruz.
Android 12 Native
a. Küçük İkon 24×24 – 96×96 tüm cihaz boyutlarına uyacak şekilde. Şeffaf arka plan üzerinde beyaz olmalıdır. PNG.
b. Başlık 50 karakter ile sınırlıdır.
c. Gövde 150 karakter ile sınırlıdır.
d. Büyük Görsel 1440×720 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonsuz).
e. Uygulama Adı Değiştirilemez.
f. Zaman Damgası Mesajın alındığı zaman.
g. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
h. Aksiyon Butonları En fazla 3 butonu destekler.
Eski Web İşletim Sistemleri
Referans için işletim sistemleri (macOS Big Sur, iOS 14, Android 11).
macOS Big Sur için Chrome
a. Tarayıcı İkonu Chrome ikonu. 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 ne zaman alındığını gösterir.
g. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz). Genişletildiğinde büyür.
h. Aksiyon Butonları En fazla 2 butonu destekler.
İkonun varlığına ve kullanılan karakterlere bağlı olarak karakter sınırlamalarının değişebileceğini unutmayın. macOS Big Sur ile öncekiler arasındaki başlıca fark, mesajların daha büyük bir ikon ile genişletilebilmesi ve tarayıcı ikonunun daha küçük olması, böylece içeriğe daha fazla alan bırakılmasıdır.
macOS Big Sur için Firefox
a. Tarayıcı İkonu Firefox ikonu. 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 ne zaman alındığını gösterir.
g. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz). Genişletildiğinde büyür.
h. Aksiyon Butonları Bunlar Firefox için özelleştirilemez.
İkonun varlığına ve kullanılan karakterlere bağlı olarak karakter sınırlamalarının değişebileceğini unutmayın. macOS Big Sur ile öncekiler arasındaki başlıca fark, mesajların daha büyük bir ikon ile genişletilebilmesi ve tarayıcı ikonunun daha küçük olması, böylece içeriğe daha fazla alan bırakılmasıdır.
macOS Big Sur için Safari
a. İkon Bu bir kez ayarlanır ve bireysel mesajlar için değiştirilemez. 256×256 olmalıdır. PNG, JPG, GIF (animasyonsuz).
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 ne zaman alındığını gösterir.
macOS Catalina için Chrome
a. Tarayıcı İkonu Chrome ikonu. 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. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
İkonun varlığına ve kullanılan karakterlere bağlı olarak karakter sınırlamalarının değişebileceğini unutmayın. macOS için Chrome ayrıca 2 aksiyon butonunu destekler.
macOS Catalina için Firefox
a. Tarayıcı İkonu Firefox ikonu. 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. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
İkonun varlığına ve kullanılan karakterlere bağlı olarak karakter sınırlamalarının değişebileceğini unutmayın.
macOS Catalina için Safari
a. İkon Bu bir kez ayarlanır ve bireysel mesajlar için değiştirilemez. 256×256 olmalıdır. PNG, JPG, GIF (animasyonsuz).
b. Başlık 40 karakter ile sınırlıdır.
c. İçerik 90 karakter ile sınırlıdır.
Safari'nin neden bir tarayıcı ikonuna sahip olmadığını ve alan adını göstermediğini fark edin.
Windows 10 için Chrome
a. Banner Görseli 360×180 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonsuz).
b. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
c. Tarayıcı Değiştirilemez.
d. Aksiyon Butonları En fazla 2 butonu 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örseli hem de ikonun gösterilmesiyle görseller için en fazla ekran alanını sunar.
Windows 10 için Firefox
a. Başlık 40 karakter ile sınırlıdır.
b. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
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. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
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 (Badge) 72×72 veya daha büyük. Şeffaf arka plan üzerinde beyaz olmalıdır. PNG.
b. Başlık 50 karakter ile sınırlıdır.
c. Gövde 150 karakter ile sınırlıdır.
d. Büyük Görsel 1024×512 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonsuz).
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 ne zaman alındığını gösterir.
h. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
Eski Mobil İşletim Sistemleri
Android 11 Native
a. Küçük İkon 24×24 – 96×96 tüm cihaz boyutlarına uyacak şekilde. Şeffaf arka plan üzerinde beyaz olmalıdır. PNG.
b. Başlık 50 karakter ile sınırlıdır.
c. Gövde 150 karakter ile sınırlıdır.
d. Büyük Görsel 1440×720 veya 2:1 en-boy oranı. PNG, JPG, GIF (animasyonsuz).
e. Aksiyon Butonları En fazla 3 butonu destekler.
f. Uygulama Adı Değiştirilemez.
g. Zaman Damgası Mesajın alındığı zaman.
h. İkon 192×192 veya daha büyük. PNG, JPG, GIF (animasyonsuz).
iOS 14 Native
a. Uygulama İkonu Uygulamanın varsayılan ikonunu 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 karakter ile sınırlıdır.
e. Uygulama Adı Değiştirilemez.
f. Seçenekler Değiştirilemez.
g. Aksiyon Butonları En fazla 4 butonu destekler.
iOS ayrıca bir alt başlık (subtitle) desteğine sahiptir. Android'in aksine iOS şu anda web push desteğine sahip değildir.
Last updated
Was this helpful?