Android için HTML e-posta kodlama ve kontrol etme: Pratik rehber
Kısa cevap: E-postayı max-width ~600px olan tablolarla kodlayın, satır içi stiller kullanın, butonları tablo içindeki bağlantılar olarak oluşturun, görsellerin esnek olmasını sağlayın ve gerçek cihazlarda Gmail, Outlook ile Android'in yerleşik istemcilerinde görüntülemeyi kontrol edin (karanlık tema ve ~100 KB HTML limitine özellikle dikkat edin).
Kodlamadan önce dikkat edilmesi gerekenler
E-posta istemcileri HTML/CSS'i kısıtlar: modern web yığınındaki birçok şey desteklenmez. Ana kural — "e-posta ≠ web sitesi" şeklinde düşünmektir.
- Düzen: flex/grid yerine tablolar (
,
, ). - Stiller: Kritik stiller satır içi (style="..."); head bölümünde — basit seçicilerle minimum CSS.
- Yazı tipleri: yalnızca sistem yazı tipleri + yedek seçenek (Arial, Helvetica, sans‑serif).
- Genişlik: ana kapsayıcı 600–640 px; mobilde daralacaktır.
- E-posta boyutu: >100–102 KB HTML'den kaçının — birçok istemci içeriği keser.
- Görseller: width belirtin, height zorunlu değil ancak style="display:block;width:100%;max-width:600px;height:auto;" ve doğru alt ekleyin.
E-postanın amacını önceden belirleyin (tek ana CTA). Bu, blokların önceliğini ve e-postanın uzunluğunu etkiler.
Hızlı şablon ve pratik teknikler
Aşağıda başlangıç olarak kullanabileceğiniz kompakt bir "iskelet" bulunmaktadır.
Notlar:
- meta viewport ekleyin.
- Semantik için tablolarda role="presentation" kullanın.
- CTA'yı arka planlı bir tablo hücresi içinde bağlantı olarak uygulayın.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <style> body{margin:0;background:#f5f5f5} table{border-collapse:collapse} img{border:0;display:block;line-height:0} @media only screen and (max-width:600px){ .mobile-full{width:100% !important;display:block !important} } </style> </head> <body style="margin:0;padding:0;background:#f5f5f5;"> <center> <table role="presentation" width="100%"> <tr><td align="center"> <table role="presentation" width="100%" style="max-width:600px;background:#fff;"> <tr><td style="padding:20px 24px;"><img src="https://..." alt="Logo" width="120" style="display:block;"></td></tr> <tr><td style="padding:0 24px 16px;font-family:Arial,Helvetica,sans-serif;font-size:22px;line-height:28px;color:#111;font-weight:700;">E-posta başlığı</td></tr> <tr><td style="padding:0 24px 24px;font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#333;">Kısa giriş metni.</td></tr> <tr><td align="center" style="padding:0 24px 32px;"> <table role="presentation" align="center"><tr><td bgcolor="#0066ff" style="border-radius:4px;"> <a href="https://..." target="_blank" style="display:inline-block;padding:12px 24px;color:#fff;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:15px;">Git</a> </td></tr></table> </td></tr> <tr><td style="padding:16px;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#999;">Abonelikten çık | İletişim</td></tr> </table> </td></tr> </table> </center> </body> </html>Temel teknikler:
- Sütunlar için iç içe geçmiş tablolar ve medya kuralıyla .mobile-full sınıfını kullanın.
- İkonlar için inline SVG'yi dikkatli kullanın: tüm istemciler desteklemez; PNG veya gömülü base64 daha iyidir, ancak boyuta dikkat edin.
Önce e-postanın minimal sürümünü (iskelet) oluşturun, kendinize test gönderin — ancak kontrol ettikten sonra ek bloklar ekleyin.
Android'de test etme — adım adım kontrol listesi
- Hazırlık
- Nihai HTML'i kaydedin veya ESP'ye yükleyin. Tüm görseller genel URL'ler üzerinden erişilebilir olmalıdır (file:// olmadan).
- Test gönderimleri
- Test e-postalarını Gmail (Android uygulaması), Outlook (Android uygulaması) ve yerleşik istemcide açılan bir hesaba (Samsung Email vb.) gönderin.
- Önizleme özelliği olan ESP'niz varsa (Litmus/Email on Acid), paralel olarak kullanın ancak yalnızca bunlara güvenmeyin.
- Gerçek cihazda kontrol (zorunlu)
- Yatay kaydırma yok; metin küçücük boyuta sıkışmamış.
- Görseller: düzgün yükleniyor, bozulmuyor, görseller engellendiğinde alt metni görünüyor.
- Butonlar/bağlantılar: tıklanabilir alan boyutu ~44×44 px (yeterli padding).
- Karanlık tema: Android'in karanlık temasında kontrol edin — beyaz üzerinde açık gri veya açık arka plan üzerinde beyazdan kaçının.
- Tıklama kontrolü: bağlantılar doğru kaynaklara gidiyor, UTM etiketleri mevcut.
- Belgelendirme
- Üst kısım, ana blok ve alt bilginin ekran görüntülerini alın. Sorunlu alanları not edin ve düzeltmelerden sonra testi tekrarlayın.
Ekran görüntüleri tasarımcı/geliştirici ile iletişimi kolaylaştırır: belirli öğeleri işaretleyin (metnin nerede yapıştığı, butonun nerede çok küçük olduğu).
Sık yapılan hatalar
- Tablolar yerine flex/grid kullanımı → çoğu e-posta istemcisinde bozulma.
- Görsellerde ve tablolarda width eksikliği → öngörülemez ölçeklendirme.
- Tüm stillerin harici dosyada olması veya karmaşık seçiciler → istemciler bunları yok sayar.
- Alternatif olmadan resimde "çizilmiş" metin → görseller engellendiğinde e-posta anlamını yitirir.
- E-postayı aşırı yükleme: çok fazla görsel ve büyük HTML → alıcıda içeriğin kesilmesi.
SSS
-
S: Karanlık tema ile ne yapılmalı? C: Metin altında sabit arka plan kullanın (ters çevirmeye güvenmeyin), kontrastı kontrol edin ve koyu arka planda açık gri tonlardan kaçının.
-
S: Web fontları kullanılabilir mi? C: Bunlara güvenmemek daha iyidir; çoğu Android istemcisi bunları yüklemez. Net yedek seçeneklerle sistem yazı tiplerini kullanın.
-
S: Etkileşimli öğeler nasıl kontrol edilir? C: Çoğu etkileşim (formlar, JS) e-posta istemcilerinde çalışmaz. Eylemi açılış sayfasına bağlantı üzerinden uygulayın.
-
S: E-postanın kesilme riskini nasıl azaltabilirim? C: HTML'i kısaltın (gereksiz yorumları ve gizli kodu kaldırın), gömülü görsel ve CSS sayısını azaltın — ~100 KB altında kalın.
-
S: Görsel varsayılan olarak yüklenmezse ne olur? C: Bilgilendirici alt metni mutlaka ekleyin, tasarımı öyle yapın ki ana bilgiler ve CTA yalnızca görsellerde değil, metinde de olsun.
Bu iş akışı — basit şablon + gerçek Android cihazlarında zorunlu testler ve karanlık tema kontrolü — alıcıda e-postanın "bozulma" riskini en aza indirir.
Ayrıca bakınız