Tablo Tabanlı Yerleşim Yaklaşımı

E-posta istemcileri — özellikle Microsoft Word'ün oluşturma altyapısını kullanan Windows Outlook — flexbox, grid ve hatta güvenilir blok düzeyi düzen desteğine sahip değildir. Tablolar, tüm büyük e-posta istemcilerinde tutarlı biçimde oluşturulan tek yapısal yapı taşıdır.

Her uyarlanabilir e-posta, e-posta gövdesi görevi gören %100 genişlikte bir dış <table> ile başlar; bunu gerçek içeriği taşıyan sabit genişlikte bir iç tablo (genellikle 600px) izler. Bu iki düzeyli kalıp, neredeyse her üretim şablonunun temelidir.

Her tabloya daima cellpadding="0" cellspacing="0" border="0" ekleyin. Bunlar olmadığında Outlook beklenmeyen boşluklar ekler. role="presentation" eklemek, ekran okuyucularına tablo anlamını atlamalarını söyler; bu doğrudur, çünkü düzen tabloları veri tabloları değildir.

Birden fazla sütun oluşturmak için içerik satırının içine iki <td> hücresi bulunan bir tablo yerleştirin. Her hücre bir sütun içerir. div+float kullanmaktan kaçının; Outlook float değerini yok sayar ve sütunları yine dikey olarak alt alta dizer, böylece tasarım bozulur.

Fiilî masaüstü önizleme bölmesi yaklaşık 600px genişliğindedir. Bu genişlik için tasarım yapmak, e-postanın Outlook, masaüstü Gmail, Apple Mail, Yahoo ve Thunderbird'de aynı anda yatay kaydırma olmadan rahatça görünmesini sağlar.

Küçük ekranlarda, iç tablonun hücrelerini genişliği %100 ve display değerini block olarak ayarlayan bir medya sorgusuyla hedefleyin; böylece sütunlar dikey olarak alt alta dizilir. iOS Mail ve Android Gmail medya sorgularını dikkate alır; masaüstü Outlook 365 bunları yok sayar, ancak 600px'lik masaüstü düzenini korur.

Arka plan renkleri ve görselleri div'lere değil, <td> hücrelerine uygulanmalıdır. Outlook, td üzerindeki bgcolor özniteliğini güvenilir biçimde desteklerken div üzerindeki CSS background-color, istemciye bağlı olarak kaldırılabilir veya tamamen yok sayılabilir.

Outlook, arka plan görselleri için Vektör İşaretleme Dili'ne (VML) ihtiyaç duyar. Modern CSS background-image değerini koşullu <!--[if mso]>...<![endif]--> yorumları içinde satır içi v:rect yedeğiyle sarın; böylece Outlook görseli oluştururken diğer tüm istemciler CSS'yi kullanır.

flexbox, grid, özel özellikler (sınırlı destek) ve konumlandırmanın çoğunu kullanmayın. display: block/inline, öznitelikler üzerinden sabit genişlikler ve satır içi stillerle yetinin. Çıktı web standartlarına göre eski görünümlü olur, ancak her gelen kutusunda aynı şekilde oluşturulur.

İç boşluk için cellpadding özniteliğini ve tek bir iç dolgulu <td> kullanın. Tablo hücrelerindeki kenar boşlukları Outlook'ta güvenilmezdir; td üzerindeki iç dolgu evrensel olarak çalışır. div kullanmadan "kart" bileşenleri oluşturmak için bgcolor ve iç dolguyu aynı td üzerinde birleştirin.

Her düzen tablosuna role="presentation" ekleyerek ekran okuyucularının "satır, 2 sütundan 1. sütun" ifadesini duyurmasını engelleyin. Ayrıca her görsele alternatif metin, tüm içerik için gerçek metin (metin görselleri değil) ve açık bir hiyerarşik başlık sırası ekleyin.

E-postaların düzeninde neden CSS flexbox kullanan div'ler değil de tablolar kullanılır?

HTML e-posta düzeni, cellpadding/cellspacing/border sıfır ve role="presentation" içeren iç içe tablolardan yararlanır. %100'lük dış tablo, 600px'lik iç tabloyu ortalar; iç içe td hücreleri, medya sorgularının mobilde alt alta dizebileceği sütunları oluşturur. flexbox/grid kullanmayın, td üzerinde bgcolor kullanın ve Outlook arka planları için VML yedekleri ekleyin.