Mobil E-Posta Bülteni Tasarımı: Küçük Ekranda Kırılan Yerler

Bülten tasarımı masaüstünde denenip mobilde kırılıyor, çünkü e-posta istemcileri tarayıcı gibi davranmıyor. Bir bülten aynı anda telefonda, tablette, on yıllık bir masaüstü istemcisinde ve görselleri kapalı bir hesapta açılabilir. Aşağıdakiler, bu dört ihtimalin hepsinde ayakta kalan bir düzenin nasıl kurulacağıyla ilgili.

Tek sütun, media query olmadan da ayakta kalmalı

Duyarlı bülten denince akla ilk gelen şey media query oluyor. Peki istemci <style> bloğunu tümden atarsa ne kalır geriye? Outlook'un masaüstü sürümleri gibi kendi motoruyla çalışan istemcilerde media query hiç çalışmaz, bazı kurumsal webmail arayüzleri de head içeriğini temizler. Bu yüzden düzenin dar ekranda çalışması media query'ye bağlı olmamalı: yüzde genişlikli tek sütun, sabit piksel yerine esneyen tablo hücreleri, en fazla 600 piksel dış genişlik. Media query kalsın, ama iyileştirme olarak kalsın, temel olarak değil.

İki sütunlu bir alan gerekiyorsa sütunları yan yana duran bloklar olarak değil, dar ekranda doğal olarak alt alta düşen bloklar olarak kurun. Böylece hiçbir kuralın çalışmadığı istemcide bile içerik okunur sırada kalır.

Dokunma alanı ve tıklanabilir metin

Parmakla dokunulacak her hedef için Apple'ın arayüz kılavuzu 44x44 nokta, Google'ın Material rehberi 48x48 dp alt sınır veriyor. Bültende bu ölçü çoğunlukla butonun görsel boyutuyla değil, çevresindeki boşlukla sağlanır: yan yana duran iki bağlantı arasında yeterli dikey aralık yoksa yanlış olana basılır. Metin içine gömülmüş "buradan inceleyin" bağlantıları da aynı sebeple zayıf; satır yüksekliği kadar bir hedef alanları olur.

Ana eylemi tek ve büyük tutun. Bir bültende üç ayrı çağrı varsa kullanıcı hiçbirine basmıyor, ilkine bakıp kapatıyor.

Görseller kapalı geldiğinde geriye ne kalıyor

Birçok istemci görselleri varsayılan olarak engelliyor, kullanıcı "görselleri göster" demeden bültenin resim katmanı yok sayılıyor. Eylem butonunu görsele gömmem; görseller kapalıyken o bülten tıklanacak bir şey içermiyor demektir. Buton, arka plan rengi verilmiş bir tablo hücresi ve içinde gerçek metin olarak kurulduğunda her koşulda görünür.

Aynı sebeple her görsele anlamlı bir alt metni yazın. Ekran okuyucu kullanıcısı için zaten gerekli, görselleri kapalı okuyan için de bültenin tek anlatısı o metin oluyor.

Mobilde başlayıp masaüstünde biten okuma

Bültenler tek oturumda tüketilmiyor. Kullanıcı sabah telefonda başlığı görüyor, ilgisini çekiyorsa e-postayı okunmadı işaretliyor ya da kendine iletiyor, akşam bilgisayarda açıyor. Bu davranış iki şeyi belirler: konu satırı tek başına hatırlatıcı olarak çalışmalı, bağlantılar da hangi cihazdan açılırsa açılsın aynı içeriğe gitmeli.

Cihaza göre farklı adrese yönlendirme fikri kulağa iyi geliyor, pratikte kırılgan. Kullanıcı bağlantıyı kopyalayıp başka bir yerde açtığında ya da masaüstünden mobil sürüme düştüğünde deneyim bozuluyor. Tek adres verip hedef sayfayı duyarlı yapmak daha az iş ve daha az hata.

Test etmeden gönderilmiş sayılmaz

Gönderim öncesi kontrol listesi kısa olabilir: bir iOS istemcisi, bir Android istemcisi, Outlook masaüstü ve görselleri kapalı bir hesap. Bu dördü, kırılmaların çoğunu yakalıyor. Karanlık mod da buraya girmeli; bazı istemciler renkleri kendiliğinden ters çeviriyor ve şeffaf arka planlı bir logo aniden okunmaz hale geliyor.

Ölçüm tarafında açılma oranı tek başına yanıltıcı; görsel engelleme açılmaları eksik sayıyor. Tıklama ve tıklama sonrası davranış daha güvenilir bir sinyal.