Responsive Email Nasıl Yapılır?

Email tasarımı yaparken en büyük sorunlardan biri de responsive email yapmak. Neden derseniz Google, style etiketleri içinde yazdığımız kodları zararlı kod olarak görüyor ve temizliyor.

Dolayısıyla cihaz boyutları için kullanıdığımız @media kodları çalışmıyor ve mail responsive özelliğini kaybediyor.

Bunu aşmanın iki yolu var. Birincisi maili doğrudan php üzerinden göndermek. Böylece mail base64 olarak şifrelenmiyor ve kullanıcı cihazında olduğu haliyle görünüyor. Style etiketleri bu aşamada google tarafından temizlenmiyor. Ancak maili forward ettiğinizde yine responsive özelliğini kaybediyor.

O yüzden farklı bir yaklaşım tarzı benimsemek gerekiyor. Hybrid Design denilen eski bir teknik.

@media sorguları daha icat edilmeden yapılan bir responsive kodlama türü.

Kısaca tekniği şöyle anlatalım. Bu teknikte style etiketlerini hiç yokmuş gibi inline-css yazıyoruz.

Diyelim ki 3 sütunumuz var. Bunlara doğrudan genişlik vermek yerine yüzde cinsinden bir maksimimum genişlik değeri veriyoruz. Tabi bu sütunları kapsayan bir de genel div vermemiz gerekli.

<div style="max-width: 948px; margin: 0 auto;">
	<table width="100%" align="center" style="max-width:33.33%;">
		...
	</table>
	...
</div>

Böylece maksimum genişliği 948px olan 3 parçalı bir sütun yapısı elde ettik. Şu an her cihazda 3 sütun görünecek. Ama istediğimiz şey bu değil. Mobil cihazlarda tek sütun halinde görünmesi gerekiyor.

İşte işin püf noktası burada. Minimum genişlik değeri veriyoruz ve bunu da yüzde değil piksel cinsinden veriyoruz. Peki bu değeri nasıl hesaplayacağız? Kapsayıcı div' in genişliğini sütun sayısına bölerek. 

948 / n = minimum genişlik

Peki bunu neden veriyoruz? maksimum genişlik yüzde 33 olsun demiştik. Ancak cihaz boyutu küçüldüğünde bu sütunlar iyice daralacak. Bu yüzden bir de minimum genişlik değeri veriyoruz ki o değerden dar olmasın. Kapsayıcı div' in 3' e bölümü olarak yapıyoruz ki büyük ekranda da görüntü bozulmasın. 

Yani şöyle;

<div style="max-width: 948px; margin: 0 auto;">
	<table width="100%" align="center" style="max-width:33.33%; min-width:314px">
		...
	</table>
	...
</div>

Bu şekilde responsive bir mail görünümü elde etmiş olduk.