Güncelleme: Gmail Duyarlı Tasarım, Gelişmiş Yazı Tipi Stili + Erişilebilirlik için CSS Desteği Sunuyor

Yayınlanan: 2016-09-30

30 Eylül sabahının erken saatlerinde Gmail, e-posta dünyasının uzun süredir yaygarasını kopardığı şeyi desteklemek için değişiklikleri uygulamaya başladı: gömülü stiller ve duyarlı tasarım.

Ne hakkında konuşuyoruz?

Gmail, e-posta tasarımcılarını e-postalarını biçimlendirmek için satır içi CSS kullanmaya zorlayan bir e-postanın <head> bölümündeki sınıfları veya kimlikleri tarihsel olarak desteklememiştir. Artık Gmail, Gmail'de satır içi CSS ihtiyacını ortadan kaldıran sınıflar ve kimlikler ile gömülü CSS'yi destekleyecektir. Bu aynı zamanda Gmail'in sonunda medya sorgularını ve yanıt veren e-postayı destekleyeceği anlamına geliyor.

Sadece haberleri mi takip ediyorsun? Biz kullanıma sunmayı izlerken Live Ticker'daki güncellemelerimizi takip edin veya aşağıda beklenen tüm değişikliklerin bir özetini ve bunların e-posta pazarlamacıları için ne anlama geldiğini okuyun.

Gmail Güncelleme Canlı Ticker

Güncellenen Gmail e-posta istemcilerinin güncel bir görünümü:

Gmail İstemcisi

Güncelleme Yayınlandı

Masaüstü web postası

yeşil kontrol

Mobil web postası

kontrol-X

Gmail Android uygulaması (Gmail hesabı)

yeşil kontrol

Gmail Android uygulaması (Gmailified hesap)

yeşil kontrol

Gmail Android uygulaması (POP/IMAP hesabı)

kontrol-X

Gmail iOS uygulaması

yeşil kontrol

Inbox by Gmail (web postası)

yeşil kontrol

Inbox by Gmail (iOS)

yeşil kontrol

Inbox by Gmail (Android)

yeşil kontrol

G Suite Basic (eski adıyla Google Apps for Work)

yeşil kontrol

Google Apps Ücretsiz Sürümü (eski)

kontrol-X

  • 7 Kasım, 11:30 EDT

Gmail iOS uygulamasına yapılan büyük bir güncelleme, <style> ve medya sorgularını desteklemek için işleme güncellemesini içerir! Tüm Gmail mobil uygulamaları artık duyarlı e-postayı destekliyor. Ayrıca, oluşturma güncellemesiyle birlikte tüm G Suite hesaplarını da görüyoruz.

  • 12 Ekim, 09:00 EDT

ABD dışındaki G Suite hesaplarının (Litmus Önizlemelerini içerir) oluşturma güncellemesini aldığını görmeye başlıyoruz. Tüm hesaplarımızın güncellemeye sahip olduğunu gördüğümüzde kullanıma sunma grafiğini güncelleyeceğiz.

  • 4 Ekim, 9:30 EDT

Yukarıda tam bir dağıtım grafiği yayınladık. Gmail'in hesap planı adlarını yeniden adlandırdığını lütfen unutmayın.

G Suite Basic (eski adıyla Google Apps for Work) hesaplarında, güncellemelerin yalnızca ABD hesaplarına sunulduğu görülüyor. Litmus kullanıcıları için, G Suite Temel E-posta Önizlemelerimizin (şu anda Google Apps olarak adlandırılmaktadır) şu anda güncelleme verilmemiş olan BK tabanlı hesapları kullandığını lütfen unutmayın.

  • 4 Ekim, 04:00 EDT

Medya sorgularını desteklemeye yönelik kullanıma sunma, artık Android'deki hem Gmail hem de Inbox by Gmail uygulamalarında tamamlanmış görünüyor. Bazı kişiler iOS uygulamalarında medya sorgusu desteğinde değişiklikler fark etmiş olsa da, destek henüz tüm hesaplarda tutarlı değildir.

  • 30 Eylül 08:00 EDT

Değişiklikler, Android'deki Gmail Uygulamasına da sunuldu. Sınıflar ve kimlikler e-postanın başında toplanıyor. Bazı Android Gmail Uygulaması hesapları için medya sorgusu desteği de görüyoruz, ancak test ettiğimiz tüm hesaplarda destek tutarlı değil. Destek, bölgeler arasında kademeli olarak yayılıyor olabilir.

Güncellemeler artık e-postanın başındaki kimlikler ve sınıflar için destekle birlikte Inbox by Gmail'de de sunuluyor.

  • 30 Eylül 05:30 EDT

Gmail, oluşturma motorunda kademeli olarak güncellemeler yayınlıyor gibi görünüyor. Gmail web istemcileri, tüm tarayıcılarda (Chrome, Safari ve Firefox) <head> içindeki sınıfları ve kimlikleri destekler ve her ikisine de HTML'de doğru şekilde başvurulur.

Gmail'in web istemcilerinde medya sorguları desteği de görüyoruz:

Gmail, Duyarlı E-posta Tasarımını Destekleyecek

Ancak şimdiye kadar, ne e-postanın başındaki stil etiketleri ne de medya sorguları Inbox by Gmail veya Gmail uygulaması tarafından desteklenmemektedir.

  • 29 Eylül 23:55 EDT

Oluyor! Gmail, oluşturma makinesindeki değişiklikleri kullanıma sunmaya başladı. Biz kullanıma sunmayı izlerken güncellemeler için bizi takip etmeye devam edin.

Haberi paylaşın →

Bu Değişiklikler E-posta Meraklıları İçin Ne Anlama Geliyor?

31 Ağustos 2016'da Gmail, CSS mülk gösterimini desteklemeye başlayacaklarını duyurdu: yok; ve <style> ve medya sorgularını destekler.

Bu, Gmail'deki CSS desteğini genişletme ve e-posta tasarımcılarına iletilerinin nasıl oluşturulduğu konusunda daha fazla kontrol sağlama yönündeki genel çabanın yalnızca bir parçasıdır.

– Pierce Vollucci, Google Ürün Müdürü

Bu, e-posta topluluğu için çok büyük bir haber ve e-posta tasarımı ve geliştirme üzerinde önemli etkileri olacak.

GMAIL, DUYARLI E-POSTA VE <STYLE> DESTEKLEMEK İÇİN

Gmail, e-posta tasarımcılarını e-postalarını biçimlendirmek için satır içi CSS kullanmaya zorlayan bir e-postanın <head> bölümündeki sınıfları veya kimlikleri tarihsel olarak desteklememiştir. Artık Gmail, Gmail'de satır içi CSS ihtiyacını ortadan kaldıran sınıflar ve kimlikler ile gömülü CSS'yi destekleyecektir. Bu aynı zamanda Gmail'in sonunda medya sorgularını ve yanıt veren e-postayı destekleyeceği anlamına geliyor.

Başka bir deyişle, aşağıdaki kod artık Gmail'de düzgün şekilde işlenecek:

 <html> <head> <style> .colored { color: blue; } #body { font-size: 14px; } @media screen and (min-width: 500px) { .colored { color:red; } } </style> </head> <body> <div> <p>Hi Pierce,</p> <p class="colored"> This text is blue if the window width is below 500px and red otherwise. </p> <p>Jerry</p> </div> </body> </html>

Desteklenen CSS'lerin tam listesini bu gönderinin altında veya Gmail'in resmi belgelerinde görüntüleyebilirsiniz. Yaklaşan medya sorgusu desteğinin tam listesi:

Desteklenen türler

  • herşey
  • ekran

Desteklenen sorgular

  • minimum genişlik
  • maksimum genişlik
  • min-cihaz genişliği
  • maksimum cihaz genişliği
  • oryantasyon
  • minimum çözünürlük
  • maksimum çözünürlük

Desteklenen anahtar kelimeler

  • ve
  • bir tek

E-POSTA İÇİN BU NE ANLAMA GELİYOR

Bu güncellemeler, e-posta geliştirme ve iş akışında önemli bir dönüm noktasına işaret ederek tasarımcıların ve pazarlamacıların CSS satır içi oluşturmaya gerek kalmadan daha erişilebilir e-posta kampanyaları oluşturmasına olanak tanır.

Pazar etkisi: Medya sorguları yakında standart olacak

Birçok e-posta, çok çeşitli ekran boyutlarında daha kullanışlı bir deneyim oluşturmak için içerik ve tasarımda ince ayar yapmak için medya sorgularına güvenir. Ancak, medya sorguları her yerde çalışmaz. Tarihsel olarak en dikkate değer ve sinir bozucu destek eksikliği, <head> içindeki tüm stiller ve medya sorgularıyla birlikte kodun çıkarılmasıyla ünlü Gmail'den geldi.

Gmail'in medya sorguları desteğiyle , e-posta istemcilerinin %75'inden fazlası duyarlı tasarımı destekleyecektir . Bunun Windows Phone gibi diğer e-posta istemcilerinde de norm haline gelmesini umuyoruz.

Fab Four gibi sahte yerleşim yapılarına daha az ihtiyaç

Gmail'in medya sorguları için destek eksikliğiyle mücadele etmek için, e-posta meraklıları geçici çözümler için yüksek ve düşük görünüyordu. Böyle bir geçici çözüm, CSS calc() işlevini ve üç genişlik, minimum genişlik ve maksimum genişlik özelliklerini içeren Fab Four tekniğidir.

E-posta tasarımcıları, bu karmaşık yerleşim yapılarına veda etme zamanı. Ancak, yine de Outlook için tablolara ihtiyacınız olduğunu unutmayın. (Henüz bir e-posta standardı oluşturmadık….).

Bununla birlikte, hibrit/süngerimsi geliştirme, Outlook gibi sorunlu istemciler için temel bir yapı olarak e-posta geliştirmede hala yerini korumaktadır.

CSS satır içi kullanımına elveda deyin

"Satır içi" stiller, CSS'yi ve ilişkili biçimlendirme talimatlarını e-postanızın <head> bölümündeki stil bloğundan HTML'nin <body> bölümüne taşır. Tarihsel olarak, stiller satır içinde taşınmasaydı, e-postanızın gövdesindeki stil Gmail'de görüntülenmezdi.

satır içi düzenlenmemiş-03

Bu güncellemelerle, satır içi CSS'ye artık gerek kalmayacak. E-posta tasarımcıları artık HTML belgelerinin <head> bölümüne yerleştirilmiş gömülü stilleri kullanabilir. Gömülü CSS, tüm büyük e-posta istemcilerinde desteklenecektir.

E-postalar daha erişilebilir hale gelecek

E-postada erişilebilirlik, bir kampanyanın başarısı için çok önemlidir. Bir abone e-postanızı okuyamıyor ve e-postanızla etkileşime geçemiyorsa, harekete geçmelerinin bir yolu yoktur.

Gömülü CSS desteği ile e-posta tasarımcıları, stili içerikten ayırabilir ve e-postaları için anlamsal, erişilebilir işaretleme kullanabilir.

Büyük metin ve dokunmaya duyarlı düğmeler erişilebilirliği artırmaya yardımcı olurken, HTML'nizi ekran okuyucuyla kullanıma hazırlamak da öyle. Bunu akılda tutarak, tasarımınızda sağlıklı bir metin ve resim dengesi sağlayın ve e-postanızdaki yazılı içeriği ana mesajı iletecek şekilde özelleştirin.

Adım, adım aralığı, konuşma noktalama işaretleri ve konuşma hızı gibi CSS tabanlı ekran okuyucu ayarları için ek destekle Gmail, pazarlamacıların e-postalarını daha erişilebilir hale getirmesini daha da kolaylaştırdı.

Tipografi desteği artacak

Bu güncellemelerle gelen bir diğer önemli değişiklik, CSS yazı tipi özellikleri için ek destektir. Örneğin, Gmail, sütun sayısı ve sütun boşluğu gibi, tablolar olmadan metin sütunlarının oluşturulmasına izin veren özellikleri desteklemeye başlayacaktır. Ayrıca, font-kerning ve font-variant-caps, ek font stilini etkinleştirir. Ancak, gelecek sürümde web yazı tiplerinin destekleneceği görünmüyor.

Arka plan için ek destek geliyor

Gmail, arka plan klibi, arka plan konumu ve en önemlisi arka plan boyutu gibi CSS arka plan özellikleri için ek destek sunuyor. Arka plan boyutu desteğiyle, e-postalar ölçeklenebilir ve duyarlı arka plan resimlerine sahip olabilir.

E-POSTALARINIZI GMAIL'DE TEST EDİN

Bu değişiklikler e-postanızı nasıl etkileyecek? E-postanızı Gmail'de ve 70'den fazla e-posta istemcisinde anında önizlemek için Litmus'u kullanın. Bu değişikliklerin henüz yayında olmadığını, ancak Gmail'in bunları yayına gönderdiği anda Litmus Anında Önizlemelerine yansıtılacağını unutmayın.

Litmus'u ücretsiz deneyin →

Resmi Belgeler

İlk defa büyük bir e-posta istemcisi resmi CSS ve HTML destek belgeleri yayınladı. Bu ilk önce büyük bir endüstridir. Teşekkürler, Gmail!

Gmail ve Inbox by Gmail'de aşağıdaki CSS özellikleri desteklenecektir:

  • azimut
  • arka fon
  • arka plan karışım modu
  • arka plan klibi
  • arka plan rengi
  • arka plan görüntüsü
  • arka plan kökenli
  • arka plan konumu
  • arka plan-tekrar
  • arka plan boyutu
  • sınır
  • sınır-alt
  • kenarlık-alt-renk
  • sınır-alt-sol-yarıçap
  • sınır-alt-sağ-yarıçap
  • sınır-alt-tarzı
  • sınır-alt-genişlik
  • sınır çökmesi
  • sınır rengi
  • sınır-sol
  • kenarlık-sol-renk
  • kenarlık-sol-tarzı
  • kenarlık-sol-genişlik
  • sınır yarıçapı
  • sınır-sağ
  • kenarlık-sağ-renk
  • kenarlık-sağ-tarzı
  • sınır-sağ-genişlik
  • sınır aralığı
  • sınır tarzı
  • sınır üstü
  • kenarlık rengi
  • sınır-üst-sol-yarıçap
  • sınır-sağ-üst-yarıçap
  • kenarlıklı tarz
  • kenarlık-üst-genişlik
  • sınır genişliği
  • kutu boyutu
  • ara vermek
  • mola öncesi
  • zorla içeri girmek
  • altyazı tarafı
  • açık
  • renk
  • sütun sayısı
  • sütun doldurma
  • sütun boşluğu
  • sütun kuralı
  • sütun-kural-renk
  • sütun kuralı stili
  • sütun-kural genişliği
  • sütun aralığı
  • sütun genişliği
  • sütunlar
  • yön
  • Görüntüle
  • yükseklik
  • boş hücreler
  • batmadan yüzmek
  • yazı tipi
  • font ailesi
  • yazı tipi-özellik-ayarları
  • yazı tipi aralığı
  • yazı Boyutu
  • yazı tipi boyutu ayarlama
  • yazı tipi uzatma
  • yazı stili
  • yazı tipi sentezi
  • yazı tipi değişkeni
  • font-varyant-alternatifler
  • font-varyant-büyük harfler
  • font-varyant-doğu-asya
  • font-varyant-ligatürler
  • yazı tipi-varyant-sayısal
  • yazı tipi ağırlığı
  • boy uzunluğu
  • görüntü yönelimi
  • görüntü çözünürlüğü
  • izolasyon
  • harf boşluğu
  • satır yüksekliği
  • liste biçimi
  • liste-tarzı-konumu
  • liste-tarzı-tipi
  • marj
  • kenar boşluğu-alt
  • kenar-sol
  • kenar-sağ
  • kenar boşluğu
  • maksimum yükseklik
  • maksimum genişlik
  • min-yükseklik
  • minimum genişlik
  • mix-harman-modu
  • nesne-uyum
  • nesne konumu
  • opaklık
  • anahat
  • anahat rengi
  • anahat stili
  • anahat genişliği
  • taşma
  • dolgu malzemesi
  • alt dolgu
  • dolgu-sol
  • dolgu-sağ
  • dolgu üstü
  • Duraklat
  • duraklama sonrası
  • duraklama öncesi
  • saha
  • perde aralığı
  • tırnak
  • zenginlik
  • konuşmak
  • konuşma başlığı
  • konuşma-sayı
  • konuşma-noktalama
  • konuşma hızı
  • stres
  • masa düzeni
  • Metin hizalama
  • metin-birleştirme-upwrite
  • metin-dekorasyon
  • metin-dekorasyon-renk
  • metin-dekorasyon-çizgisi
  • metin-dekorasyon-atla
  • metin-dekorasyon-tarzı
  • metin vurgusu
  • metin-vurgu-renk
  • metin-vurgu-tarzı
  • metin girintisi
  • metin yönlendirme
  • metin taşması
  • metin dönüştürme
  • metin altı çizili konumu
  • unicode-bidi
  • dikey hizalama
  • ses ailesi
  • Genişlik
  • kelime aralığı
  • yazma modu

EN SON GÖNDERİLERİ DOĞRUDAN GELEN KUTUSUNA GETİRİN

Gmail'in kullanıma sunulmasındaki ek değişiklikler ve sizi nasıl etkileyeceği hakkında sizi bilgilendireceğiz. Haftalık bültenimize abone olun ve e-posta tasarımı uzmanlarına yönelik en son içeriği doğrudan gelen kutunuza teslim edin. Her hafta.