Fatih Hayrioğlu'nun not defteri » gmail http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 HTML Mailing -1: Mailing Kodlarken Dikkat Edilmesi Gerekenler http://www.fatihhayrioglu.com/html-mailing-1-mailing-kodlarken-dikkat-edilmesi-gerekenler/ http://www.fatihhayrioglu.com/html-mailing-1-mailing-kodlarken-dikkat-edilmesi-gerekenler/#comments Wed, 03 Nov 2010 22:27:10 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=1938 İnsanlar bildirileri, duyuruları yaymak için çeşitli araçlara başvururlar bu internet olmadan önce ve hala broşürler, mektuplar, afişler vs ile yapılırdı internet ile birlikte ise mail yolu yapılmaya başlandı. Normal metinsel mailinglerin yanı sıra html ile daha görselliği arttırılmış maillerde gönderilmeye başlandı. İşte bu görselliği arttırılmış html mail içeriğine mailing diyoruz.

Uzun bir aradan sonra bir mailing yapınca aklıma geldi, mailing yaparken nelere dikkat edilmeli diye bir makale yazmak. Çok uzun süre mailing yaptım diyebilirim, yaklaşık 3-4 sene mailing kestim. HTML kodlayıcı(arayüz geliştirici) için mailing ilk ciddi test aracıdır. Mailing her nekadar benim mantığıma göre çok işlevsel bir araç olmasa da müşteri için helede kurumsal müşteriler için vazgeçilmezdir. Ben birçok kurumsal mailingi okumadan çöpe atıyorum. Ama bir gerçek varki mailing hala etkisini kaybetmeden devam ettiren bir araçtır(müşteri için).

Bu makalede sadece ipuçları verip bitirmeyi düşünüyordum, mailing kesmek o kadar basit bir konu değil bu nedenle 2 başlık altında yazmaya karar verdim. İlki bu makale mailing kodlarken nelere dikkat etmemiz gerektiğini ve mail kodlarken nelere ihtiyacımız olduğunu toparlayacağım, ikinci makalemde basit bir örnek ile mail kodlamayı göstermeye çalışacağım. Mailing konusunda birde gönderim konusu var, ancak ben işin bu kısmı ile fazla ilgilenmediğim için bir şey yazmam mantıklı değil, bu konuda internette yeterli araştırmaları yaparak bilgi edinebilirsiniz.

Şimdi ilk makalemizi yazalım.

Mailing kodlarken nelere dikkat etmemiz gerekir

HTML kodlarken farklı tarayıcılar için kod yazarız bu kodlamadaki en önemli noktadır, mailingde ise iş daha vahimdir, çünkü mailing okuma araçları çok farklıdır ve bu araçlar normal html ve css standartlarının bir çok özelliği desteklemez.

Mailing Destekleme Listeleri

İlk önce mailing standartlarını incelemekte yarar var bence, neyi destekleyip desteklemediğini bilmek önemli.

Popüler mailing programlarının css destekleme listesini görmek için tıklayınız.

Benzer listeler webde çok var diğer bir liste email-standards.org

Bu listeleri incelmeliyiz ve kodumuzu yazarken buna göre hareket etmeliyiz.

HTML Görünümünü Tablo/Div ile Kodlama

Her nekadar uzun süredir web sitelerini kodlarken katman(div) ile kodlamayı savunsam da mailingde durum farklıdır, mailing planını kodlarken tablolardan yardım almak daha mantıklıdır. Bunun nedeni mailing destekleyicilerinin yeni standartları desteklememesidir.

Mailing yapısını oluştururken tablolu yapı kullanmalıyız. Uzun süredir katmanlı yapı ile kod yazan biri için tablolu yapıya dönmek zor oluyor, ama Allah’tan genelde basit yapılara sahip oldukları için sorun olmuyor.

CSS Kodlarınızı Satıriçi Yazın

Birçok mailng html çevrildikten sonra toplu olarak gönderim için çeşitli programlar kullanılır. Bu programların göndericiler için çeşitli kısıtlamaları vardır. Bunlardan bir tanesi, genelde hazırlana html kodunun sadece <body> etiketleri içerisindeki kodu eklememize izin vermesidir.

Bu nedenle dışarıdan eklenen .css dosyaları mailinglerimize ekleyemeyiz. Bunu destekleyen programlar var ise de benim çalıştığım birçok müşteride bu programlar yoktu. Bundan dolayıdır ki css kodlarımızı satıriçi yazmalıyız. Aşağıdaki örnekte görüldüğü gibi

<p style="font-family:Arial; font-size:12px; color:#999">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>

Tabi kodları yazarken yukarıdaki destek listelerini dikkate almalıyız.

Resimleri ve Bağlantıları İnternet Üzerinden Verin

Mailingler web siteleri gibi html çevrilseler de kullanıcının e-posta kutusuna düşen kodlardır, bu nedenle kullanıcıya yükleyemeyeceğim ve kullanıcı bilgisayarına göre hareket edemeyeceğimiz durumlar söz konusudur.

Bunlardan bir tanesi resimlerdir, hazırladığımız resimleri kullanıcı bilgisayarına yükleyemeyeceğimiz için bunları kendi sitemiz üzerine yükleyip hazırladığımız mailing içeriğine bu resimleri kendi sitemiz üzerinde okutmalıyız. Örneğin

<img src="http://www.firmaadi.com/mailings/images/ustalan.jpg" width="450" height="120" alt="Firma_Adi" />

Web siteleri gibi hareket edemeyeceğimiz diğer bir konu ise bağlantıları yerel olarak vermeyeceğimiz konusudur. Bağlantılarımızıda yerel veremeyiz örneğin

<a href="hakkimizda.html">Hakkımızda</a>

Şeklinde bir bağlantı kırık bir bağlantı olacaktır. Bunun yerine

<a href="http://www.firmaadi.com/hakkimizda.html">Hakkımızda</a>

Şekline olmalıdır.

Test Etmeyi Unutmayın

Mailing yapılarının web sitelerinde daha sıkıntılı yapıları vardır. Bunlardan en önemlisi mailing gönderildikten sonra html koduna müdahale imkanımızın sıfır olmasıdır. Bu nedenlede mailing gönderilmeden tüm sorunların giderilmiş olması lazımdır. Birçok zaman mailing ile ilgili sorunlar yaşmışızdır, bu kaçınılmaz bir durumdur, ancak bunu en aza indirmek için testlerimiz gönderimden önce yapmalıyız.

Web üzerinde; Hotmail, Gmail ve Yahoo üzerinden
PC’de ise Outloook ve Thunderbird üzerinden testlerimizi yapmalıyız.
Farklı Tarayıclar ile İnternet Explore 6 ve 7 ve Firefox ile test etmeliyiz.

title ve alt Değerlerini Yazmayı unutmayın

Şimdilerde birçok mail okuma programı resimleri ilk mail yüklenirken yüklememekte ve kullanıcıdan izin istediğinden ve resimlerin yolunun kırık olma ihtimalinide dikkate alarak resimlerin alt elemanını boş bırakmayın. Aynı şekilde bağlantılarıda title özelliğini ekleyerek daha kullanışlı hale getirin.

Mailing Genişliğini

Mailing genişliği web sitesi genişlik standartlarında farklıdır. Mailing okuyucular olarak Outlook ve Thunderbird gibi araçların 3 kolonlu yapıları göz önüne alınarak tasarlamalıyız. 1024*768px çözünürlüğe göre mailingimizi tasarladığımızda 3 kolonlu bir yapıda mailing genişliğimiz 750px veya daha düşük olacaktır. Tasarım yaparken bunu dikkate almak önemlidir.

Eğer 800×600 çözünürlük düşünüyorsak 6oopx genişlik mailingimizin genişliği olmalıdır.

Mailing genişliğini 600px olarak düşünüp tasarlarsak bir sorun yaşamayacağımızı bilmeliyiz ve ona göre davranmalıyız.

Mailing İçeriğinde Kullanılmayacak Elemanlar

Gerek Form elemanları ve gerekse javascript kodları mailing içinde kullanmak sakıncalıdır. Birçok program ve mail sitesi güvenlik açıklarında çok sıkı davranır. Bu nedenle hiç bir javascript ve form işlemine izin vermez.

Daha önce yaşanan birçok script açıkları ile başı ağırmış bu araçlar yazdığınız bu kodlar nedeni ile gönderdiğiniz mailleri spam olarak niteleme ihtimali yüksektir.

Ayrıca birçok mailing programı flash desteklemez bu nedenle mailing kodlarımıza flash import edemeyiz.

Bazı HTML etiketlerini kullanılması anlamsız ve sorun yaratabilir. Bu etiketleri sıralayalım; <META>, <BASE>, <LINK>, <SCRIPT>, <FRAMESET>, <FRAME>, <IFRAME> ve yorum kodu <!– yorum –>

Spam Mailden Kaçınmak için Yapmamız Gerekenler

Spam mailller internet dünyasının baş belalarında biridir. Birçok mail programı spam mailleri en aza indirmek için birçok filtre uygulamaktadır. Bizlerin bu filtrelere mailinglerimizi hazırlamamız gerekir. Spama düşen mailler hiç bir anlam ifade etmez ve müşteri ile aramızın açılmasına neden olabilir.

Kısaca spama yakalanmamak için dikkat etmemiz gerekenleri listeleyelim

  • Mailinglerinizdeki bütün domainlerin "gönderen" kısmında görülen adresteki domainler aynı olmalı. Örneğin info@sirketadi.com adresinden gönderim yapıyorsanız, mailing bağlantılarında da www.sirketadi.com/xxx şekliden adreslere gitmeli.
  • Domaininiz karalistede mi değil mi kontrol edin. Çeşitli siteler var bu konuda tarama yapabileceğiniz. http://www.blacklistmonitoring.com/lookup/email_blacklist_IP_address_lookup.php
  • Mailiniz yüklenmemesi durumunda alternatif bir bağlantı oluşturun ve mailinizi altına ekleyin.
  • Kullanıcıların listenizden çıkabilmelerin sağlayacak bir link ekleyin mailinizin sonuna
  • Tüm kelimeleri büyük harflerle yazmak. Örneğin: MERHABA BU KAMPANYADA…
  • Çok fazla yazı rengi kullanmak. Örneğin: MERHABA BU KAMPANYADA…
  • Bir çok spam içeriğinde geçen kelimelere yer vermek. Örneğin: Free, Casino, Mortgage, Ücretsiz vs.
  • Çok fazla noktalama işareti kullanmak. Örneğin Dikkat!!!!!!! Büyük Kampanya!!!!!!
  • Mailing’in tamamının resimlerden oluşması bazı mail okyucuları tarafından spam olarak işaretlenmesine neden olabilir. Mailing içinde metin olması önemlidir.
  • Mailing’in başına veya sonuna kullanıcının mail listesinden çıkmasını sağlayacak bir metin ekleyin.

Bu konu çok ayrıntısı olan bir konu ben bu kadarına değinmek ile yetineyim.

Bir sonraki dersimde basit bir mailingin nasıl kodlanacağını anlatmak olacaktır.

Kalın sağlıcakla.

Kaynaklar

]]> http://www.fatihhayrioglu.com/html-mailing-1-mailing-kodlarken-dikkat-edilmesi-gerekenler/feed/ 4 24 Temmuz 2008 web’den seçme haberler http://www.fatihhayrioglu.com/24-temmuz-2008-webden-secme-haberler/ http://www.fatihhayrioglu.com/24-temmuz-2008-webden-secme-haberler/#comments Thu, 24 Jul 2008 15:31:00 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=555
  • CSS ile Bar Yapımı – aorgun.net Bağlantı
  • Yeni bir jQuery link derlemesi. Bağlantı
  • Outlook ve Gmail karşılaştırması. Bağlantı
  • Google chart api’nin gücü – yazilan.org Bağlantı
  • İnternet Explorer 6 sorunları nedeni ile web kod yazarlarını zorluyor. Bunun farkında olan firmalar tek tek ie6′dan vazgeçiyor. Bağlantı
  • PSD’den XHTML çeviri yapmayı anlatan 20 link derlemesi. Bağlantı
  • WordPress iPhone sürümünü çıkardı. Bağlantı
  • jQuery ile geçiş efektli içerikler oluşturmak. Bağlantı
  • İnternet Explorer Yazı tipi(Font) gömme yöntemine destek arıyor. Farklı yazı tiplerini kullanmak bir sorun ve hala gerçek bir çözüm üretilemedi. Bağlantı
  • WordPress’i Neden Seviyorum? – webdeneyimleri.com Bağlantı
  • Firefox 3.1 ile birlikte CSS3′ün bazı özelliklerini desteklemeye başlayacak. Bağlantı
  • CSS yardımı ile arama motorlarında yükselmek için 4 yöntem. Bağlantı
  • Küçük ekranlı araçlar için web sitesi kodlamanın ipuçları. Bağlantı
    • ]]>     http://www.fatihhayrioglu.com/24-temmuz-2008-webden-secme-haberler/feed/ 5     21 Nisan 2008 web’den seçme haberler http://www.fatihhayrioglu.com/21-nisan-2008-webden-secme-haberler/ http://www.fatihhayrioglu.com/21-nisan-2008-webden-secme-haberler/#comments Mon, 21 Apr 2008 07:20:16 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=488
  • Asp.net MVC kaynak kodları yayımlandı. MVC üzerine bir makale. Bağlantı
  • Asp.net MVC ile adım adım kod yazmak. Bağlantı
  • CSS ve javascript ile yapılan çok sevimli menüler. Bağlantı
  • Web formların farklı ve güzel alternatifler. Bağlantı
  • Zaman kazandıracak 10 Gmail ipucu. Bağlantı
  • jquery ile zebra tablolar yapmak. Bağlantı
  • CSS başlangıç dosyaları üzerine farklı bir değerlendirme. Bende katılmıyor değilim.Bağlantı
  • Google PageRank değerlerini nasıl belirliyor. Bir çok kişi bu konu üzerinde kafa yoruyor. Google’dan bir açıklama, ama biraz politik bir açıklama gibi. Bağlantı
  • Mootools 1.2 kullanarak dinamik CSS kodu eklemek. Bağlantı
  • CSS anaçatıların listesi. Bağlantı
  • Asp.net sayfalarımızda klavye kısa yollarını kullanmak. Bağlantı
  • 21′den fazla ajax/javascript ile yapılmış resim galerisi. Bağlantı
    • ]]>     http://www.fatihhayrioglu.com/21-nisan-2008-webden-secme-haberler/feed/ 4     30 Ekim 2007 Web’den Seçme Haberler http://www.fatihhayrioglu.com/30-ekim-2007-webden-secme-haberler/ http://www.fatihhayrioglu.com/30-ekim-2007-webden-secme-haberler/#comments Tue, 30 Oct 2007 21:07:46 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=417
  • CSS ve javascript dosyalarını otomatik yüklemek. Bağlantı
  • 13 adımda web optimizasyonu. Bağlantı
  • Farklı web tarayıcılarına göre kodlama yapmak için bilgilendirici bir makale. Bağlantı
  • Resimsiz veya az resim kullanılmış güzel siteler. Bağlantı
  • 10 adet javascript ajax tab menü örneği. Bağlantı
  • Google pagerank değerlerini güncellemiş.
  • İlginç bir menü çalışması. Tasarımı menüye ilginçlik katıyor aslında bildiğimiz resimli css menü Bağlantı
  • Visula Studio.Net hızlandırmanın ipuçları.Bağlantı
  • Web kodlayıcıları için 25 güzel uygulama. Bağlantı
  • GMail yeni özellikleri ile yayınlanmış. İngilizce kullananlar için şimdilik Bağlantı
    • ]]>     http://www.fatihhayrioglu.com/30-ekim-2007-webden-secme-haberler/feed/ 0     Tablo kolon genişliğini css ile ayarlama http://www.fatihhayrioglu.com/tablo-kolon-genisligini-css-ile-ayarlama/ http://www.fatihhayrioglu.com/tablo-kolon-genisligini-css-ile-ayarlama/#comments Thu, 23 Aug 2007 07:40:03 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=381 Tablolarda bazen içeriğe göre tablonun genişlemesini istemeyiz veya içeriği aşağı kaymasını engellemek isteriz. İşte çözüm hemde Gmail’den.

    Google bize web hakkında örnekleri ile de yardım ediyor. Gmail’de tablo genişliğini sabitlemenin daha doğrusu metinin tablo genişliğine göre overflow:hiden uygulamasını gösteren güzel bir yöntem

    .grid {
	table-layout: fixed;
} 

.grid * td {
    empty-cells: show;
    overflow: hidden;
    width: 100%;
}

    Gmail Tablo genişliği

    Güzel bir ayrıntıyı yakalamışlar. table-layout: fixed; tanımı işin püf noktası

    Örnek sayfayı görmek için tıklayınız.

    Kayanak: http://blog.opencomponentry.com/2007/08/22/gmail-table-column-sizing-css-fun/

    ]]>     http://www.fatihhayrioglu.com/tablo-kolon-genisligini-css-ile-ayarlama/feed/ 11     Geçen Haftanın Haberleri http://www.fatihhayrioglu.com/gecen-haftanin-haberleri/ http://www.fatihhayrioglu.com/gecen-haftanin-haberleri/#comments Mon, 12 Feb 2007 20:28:47 +0000 fatih.hayrioglu http://www.cssdersleri.com/?p=271
  • Superonline sitesini yenilemiş. Kodlaması gayet güzel. Ancak reklamlar siteyi çekilmez kılıyor. Link
  • Google Calendar notlarınızı SMS ile hatırlatıyor. C# Türk ilgili duyurusu. Link
  • Safari stroke(font etrafında kenarlık verme) özelliğini çıkardı ve destekliyor. Ancak daha standartlaşmadığı için kullanılması sakıncalı. CSS3 standardı içine alınırsa güzel olur. CSS3 yeni özellikleri ve text-stroke özelliği ayrıntısı için Link
  • A List Part’tan çoklu kolon ve aksak kolon üzerine güzel bir makale. Link
  • Uzun süre geçti ama yaklaşık 1 ay önce Google PageRank değerlerini güncelledi. Bizde bundan nasibimizi aldık. 2′den 4′e çıkmak güzel bir duygu.
  • Altı Üstü tasarım’dan web sayfası üreticisinin karşılaştığı müşteri sorunlarına çok güzel değinmiş. Link
  • Galatasaray Üniversitesi Mühendislik Klubü bir web yarışması düzenlemiş. Amaç sanal üniversite sitesi oluşturmak. Link
  • GMail artık davetiyesiz alınabiliyor. Ayrıca görünümde de bazı değişiklikler yapılmış. Link
  • CSS ile hazırlanmış hazır sayfa planları. Link
  • İTO(İstanbul Ticaret Odası) TRiP ile Türk interent kullanıcısını analiz etmiş. Bu konuda bir çok ücretli ücretsiz hizmet veren şirket var. Buda Türkiyedne veriler güzel. Link
  • Son olarak bu aralar hosting ve alan adı sorunları ile uğraşıyorum. Biraz dağınık durumlar, inşallah 1 haftaya tüm sorunlarımızı halledeceğiz ve daha sağlam bir alt yapı ile devam edeceğiz. Aksaklıklar konusunda affınıza sığınıyorum.
    • ]]>     http://www.fatihhayrioglu.com/gecen-haftanin-haberleri/feed/ 0     31 Ocak 2007 WEb’den seçme haberler http://www.fatihhayrioglu.com/31-ocak-2007-webden-secme-haberler/ http://www.fatihhayrioglu.com/31-ocak-2007-webden-secme-haberler/#comments Wed, 31 Jan 2007 21:41:39 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=267
  • Türk Telekomünikasyon Aşž’den yapılan yazılı açıklamada, Türkiye İtalya arasındaki MEDTÜRK Denizaltı Fiber Optik Kablo Sisteminin 28 Ocak 2007 Pazar günü Marmara denizinde hasara uğradığı(yine köpekbalığı mı ısırdı acaba!) bildirildi. Yurtdışı bağlantılarda sorun yaşayacakmışız(yaşıyoruz) Arkadaşlar bu haftayı Yerli Malı Haftası olarak kutlayalım.
  • Web sayfalarımızı daha hızlı ve hafif yapmanın yollarını anlatan makale. Link
  • Mootools bir javascript kütüphanesi, giriş sayfası beni etkiledi açıkçası. Link
  • Google’da profesyonelce arama yapmanın ipuçları. Link
  • 80 mükemmele WordPress Teması. Link
  • Sitenizi Google eklemeden önce yapmanız gerekenler Link
  • İnternet üzerinde not tutuma aracı Zoho Notebook çıkmış. Görünüm ve artı özellikleri ile güzel bir alternatif. Link
  • GMail artık Microsoft Office belgelerini açmak için "HTML", "Open as a Google document." ve  "Download" seçenekleri sunuyor.
    • ]]>     http://www.fatihhayrioglu.com/31-ocak-2007-webden-secme-haberler/feed/ 4     28 Aralık Web’den seçme haberler http://www.fatihhayrioglu.com/28-aralik-webden-secme-haberler/ http://www.fatihhayrioglu.com/28-aralik-webden-secme-haberler/#comments Thu, 28 Dec 2006 21:36:05 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=241
  • Google News artık beta değil. Evet sonunda Google News betası kalktı. Link
  • CSSVista, css dosyalarınızı düzenleyebileceğiniz bedava bir editör. En çok kullanılan web tarayıcılarında(ie ve ff) kodlarınızın nasıl görünceğini de gösteriyor. Kurabilmeniz için Microsoft .NET Framework’e ihtiyaç duyması programın eksi yönü. Link
  • kavidesign.com’dan ‘e5+ için en kolay png desteği yolu’ güzel bir konu olduğu için buraya ekledim. Link
  • GMail 5 adet pop3 hesabı kullanmamıza izin vercekmiş. şžimdilik ekran görüntüsü var. Link
  • TIME 2006′nın en iyi sitelerini seçmiş. Link
    • ]]>     http://www.fatihhayrioglu.com/28-aralik-webden-secme-haberler/feed/ 0