{"id":10554,"date":"2024-10-04T08:10:37","date_gmt":"2024-10-04T08:10:37","guid":{"rendered":"http:\/\/www.inboxmailmarketing.com\/blog\/?p=69"},"modified":"2025-07-29T15:20:26","modified_gmt":"2025-07-29T12:20:26","slug":"tasarim-ve-kodlama","status":"publish","type":"post","link":"https:\/\/useinbox.com\/tr\/blog\/tasarim-ve-kodlama\/","title":{"rendered":"Tasar\u0131m ve Kodlama: Ba\u015far\u0131l\u0131 Web Projeleri \u0130\u00e7in \u0130pu\u00e7lar\u0131 ve En \u0130yi Uygulamalar"},"content":{"rendered":"
\n
    \n
  1. Tasar\u0131m program\u0131:<\/strong>\u00a0Adobe Photoshop, Fireworks, Dreamweaver ya da Illustrator gibi ara\u00e7lar\u0131 kullanarak \u015fablonlar\u0131n\u0131z\u0131 olu\u015fturabilir, grafiklerinizi tasarlayabilirsiniz.<\/li>\n
  2. \u0130yi ve ‘kusursuz’ bir HTML\/Text edit\u00f6r\u00fc:<\/strong>\u00a0Mac i\u00e7in BBEdit ve TextWrangler, PC i\u00e7in HomeSite ve NoteTab Pro gibi programlar\u0131 kullanabilirsiniz. Ya da Microsoft Front Page, Adobe GoLive ve MacroMedia Dreamweaver gibi \u00fcr\u00fcnleri kullanarak HTML’i “WYSIWYG” (What You See is What You Get) tarz\u0131nda, yani ekranda g\u00f6r\u00fcnt\u00fclenene \u00e7ok benzer bir \u00e7\u0131kt\u0131 alabilece\u011finiz ara\u00e7lar\u0131 kullanarak olu\u015fturabilirsiniz. Ancak bu tip ara\u00e7lar\u0131 kullanman\u0131n baz\u0131 olumsuz taraflar\u0131 vard\u0131r. WYSIWYG edit\u00f6rleri genelde kodunuza gereksiz y\u00fckleme yapar. \u00dcstelik bu ekstra kodlar, genelde sadece spam filtrelerini etkileyerek sisteme zarar verir. Tabii WYSIWYG edit\u00f6rleri aras\u0131nda kodlama konusunda m\u00fckemmel bir sonu\u00e7 ortaya \u00e7\u0131karmalar\u0131yla \u00fcnl\u00fc olanlar da vard\u0131r. Ama biz bu ara\u00e7lar\u0131n daha \u00e7ok HTML yerine web sayfalar\u0131 tasar\u0131m\u0131nda kullan\u0131lmas\u0131n\u0131 tavsiye ediyoruz. Bu nedenle e\u011fer HTML e-mail kodlama konusunda uzmanla\u015fmak istiyorsan\u0131z, HTML kodlamay\u0131 en ba\u015ftan iyi bir text edit\u00f6r\u00fcn\u00fcn yard\u0131m\u0131yla \u00f6\u011frenmelisiniz.
    \nE\u011fer HTML tasarlama ve kodlama hakk\u0131nda t\u00fcm bu anlatt\u0131klar\u0131m\u0131z size kar\u0131\u015f\u0131k geliyorsa, InboxMailMarketing’in kendi HTML e-mail \u015fablonlar\u0131n\u0131 da kullanabilirsiniz. Olduk\u00e7a esnek olan bu \u015fablonlar, her kampanyaya uyarlanabilecek \u015fekilde \u00f6zelle\u015ftirilebilir. Ayr\u0131ca bu \u015fablonlarda ba\u015fl\u0131ca e-mail programlar\u0131n\u0131n t\u00fcm\u00fc \u00f6nceden test edilir.<\/li>\n
  3. Kendi web server’\u0131n\u0131z:<\/strong>\u00a0T\u00fcm resimlerinizi ve ar\u015fivlerinizi bar\u0131nd\u0131racak bir web server yaratmal\u0131s\u0131n\u0131z. Ayr\u0131ca web sitenizde e-b\u00fcltenleriniz i\u00e7in bir klas\u00f6r olu\u015fturmal\u0131s\u0131n\u0131z. Bu klas\u00f6rde resimlerinizi depolamal\u0131, bu resimlere yap\u0131lacak y\u00f6nlendirmeyi, HTML kodunuzda ‘absolute paths’ kullanarak belirtmelisiniz. Ek olarak web sitenizde ar\u015fivlenmi\u015f e-b\u00fcltenleri depolayabilece\u011finiz ba\u015fka bir klas\u00f6r yaratmak da isteyebilirsiniz. Bu i\u015fe ilk ba\u015flad\u0131\u011f\u0131m\u0131zda web sitemizdeki alt dosyalarda kampanyalar\u0131n tarihe g\u00f6re s\u0131n\u0131fland\u0131r\u0131ld\u0131\u011f\u0131 bir klas\u00f6r olu\u015fturmu\u015ftuk. Siz dilerseniz kendinize g\u00f6re farkl\u0131 bir d\u00fczenleme yapabilirsiniz. \u00d6nemli olan yay\u0131nlama s\u0131ras\u0131nda e-b\u00fcltenlerinizin sizin i\u00e7in kar\u0131\u015f\u0131kl\u0131\u011fa yol a\u00e7mas\u0131n\u0131 \u00f6nlemek i\u00e7in d\u00fczg\u00fcn bir ar\u015fivleme sistemi olu\u015fturman\u0131z.
    \nArt\u0131k InboxMailMarketing’in b\u00fcnyesine dahil etti\u011fi i\u015flevsel ar\u015fivleme \u00f6zelli\u011fi, bu sorunun da \u00fcstesinden gelmeyi ba\u015far\u0131yor. Bu \u00f6zellik, sistemimiz \u00fczerinden g\u00f6nderdi\u011finiz her kampanyan\u0131n bir kopyas\u0131n\u0131 kaydediyor. B\u00f6ylelikle web sitenizde ‘E-b\u00fclten ar\u015fivleri’ ad\u0131 alt\u0131nda bir sayfa olu\u015fturabiliyorsunuz. Son kampanyalar\u0131n\u0131z geldik\u00e7e sayfalar\u0131n\u0131z\u0131n g\u00fcncellenece\u011fi bu sistem sayesinde, ne kadar \u00e7ok zaman kazand\u0131\u011f\u0131n\u0131z\u0131 g\u00f6r\u00fcnce \u015fa\u015f\u0131racaks\u0131n\u0131z.<\/li>\n
  4. FTP program\u0131:<\/strong>\u00a0Mac i\u00e7in Fetch, PC’ler i\u00e7in CuteFTP gibi bir FTP program\u0131 kullanmal\u0131s\u0131n\u0131z. B\u00f6ylece e-mail’inizi tasarlad\u0131\u011f\u0131n\u0131z ve grafiklerinizi olu\u015fturdu\u011funuz zaman bu dosyalar\u0131 bilgisayar\u0131n\u0131zdan server’a ta\u015f\u0131yabilirsiniz.<\/li>\n
  5. Bir ya da iki test makinesi:<\/strong>\u00a0\u00c7ok say\u0131da farkl\u0131 e-mail uygulamas\u0131yla ve mail hesab\u0131yla y\u00fckl\u00fc bir ya da birden fazla test makinas\u0131na ihtiya\u00e7 duyacaks\u0131n\u0131z. B\u00fcy\u00fck ihtimalle HTML e-mail tasar\u0131mlar\u0131n\u0131z\u0131n farkl\u0131 programlarda nas\u0131l g\u00f6r\u00fcnd\u00fc\u011f\u00fcn\u00fc kontrol etmek isteyeceksiniz. K\u00fc\u00e7\u00fck \u00e7apl\u0131 ve basit taray\u0131c\u0131lar arac\u0131l\u0131\u011f\u0131yla \u00e7al\u0131\u015fmalar\u0131n\u0131z\u0131 kontrol edebilece\u011finiz web tasar\u0131m\u0131ndan fark\u0131 olarak, e-mail’lerin tonlarca uygulama \u015fekli vard\u0131r ve bunlar\u0131n herbiri HTML e-mail’i farkl\u0131 \u015fekilde ele al\u0131r. InboxMailMarketing, yapmak istedi\u011finiz t\u00fcm testleri sizin yerinize yapar.<\/li>\n<\/ol>\n<\/div>\n

    Tasar\u0131m ilkeleri<\/strong><\/p>\n

    Rehberimizin bu b\u00f6l\u00fcm\u00fcnde size e-mail tasar\u0131mlar\u0131yla ilgili baz\u0131 ipu\u00e7lar\u0131 sunuyoruz.<\/strong><\/p>\n

    1- Geni\u015fli\u011finizi 500-600 piksele ayarlay\u0131n<\/strong><\/p>\n

    Daha \u00f6nce bir web sitesi \u00fczerinde \u00e7al\u0131\u015ft\u0131ysan\u0131z, sayfalar\u0131 800×600 ya da 1024×768 piksel ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fcne sahip olacak \u015fekilde tasarlamaya al\u0131\u015f\u0131k olmal\u0131s\u0131n\u0131z. Ama HTML e-mail tasar\u0131m\u0131 daha farkl\u0131 bir \u015fekilde \u00e7al\u0131\u015f\u0131r. Al\u0131c\u0131lar\u0131n bir\u00e7o\u011fu g\u00f6nderdi\u011finiz e-mail’lere normal ekranlar\u0131n\u0131n k\u00fc\u00e7\u00fck bir g\u00f6r\u00fcnt\u00fcs\u00fc olan ‘\u00f6nizleme paneli’ \u00fczerinden bakacaklar (a\u015fa\u011f\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi).<\/p>\n

    \u00d6nizleme panelinin geni\u015fli\u011fi bu monit\u00f6rde 440 piksel’dir. Yukar\u0131da Microsoft Outlook’un \u00f6n izleme panelinden, HTML e-mail ekran g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc g\u00f6r\u00fcyorsunuz. Outlook’un maksimum full ekran \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc (1024×768) piksel olsa da \u00f6n izleme paneli, sadece 440 piksel geni\u015flikte. AOL 9’daysa \u00f6n izleme paneli 194 pikselken, full ekran\u0131 t\u0131klad\u0131\u011f\u0131n\u0131zda a\u00e7\u0131lan pencerenin \u00e7\u00f6z\u00fcn\u00fcrl\u00fc\u011f\u00fc sadece 540 piksel olacakt\u0131r. \u0130\u015fte bu y\u00fczden e-mail’lerinizi tasarlarken geni\u015fli\u011fin 640 pikselden fazla olmamas\u0131na dikkat edin.<\/p>\n

    2- Basit Layout’lar ve \u0130\u015finize Yarayacak Tablo D\u00fczenleri<\/strong><\/p>\n

    Farkl\u0131 e-mail uygulamalar\u0131n\u0131n HTML e-mail’i \u00e7ok \u00e7e\u015fitli nedenlerle yanl\u0131\u015f g\u00f6r\u00fcnt\u00fcledi\u011fini s\u00f6yleyebiliriz. E-mail tasar\u0131mlar\u0131n\u0131z\u0131, her zaman basit ve g\u00f6ze ho\u015f g\u00f6r\u00fcnecek \u015fekilde olu\u015fturmaya \u00f6zen g\u00f6stermelisiniz. Kar\u0131\u015f\u0131k d\u00fczenlemelerden, s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f tablolardan, \u00e7ok say\u0131da sat\u0131r ve s\u00fctun kullanmaktan her zaman ka\u00e7\u0131n\u0131n. Olu\u015fturaca\u011f\u0131n\u0131z en karma\u015f\u0131k tablo, en fazla iki s\u00fctundan ve \u00fcstte bir sat\u0131rdan olu\u015fmal\u0131. Colspan’lerin (\u00e7ok say\u0131da s\u00fctun kar\u015f\u0131s\u0131nda yay\u0131lan tablo b\u00f6lmeleri) oldu\u011fu tablolar\u0131n kodlanmas\u0131yla uyum sa\u011flamayacak \u00e7ok say\u0131da e-mail uygulamas\u0131 var. Kar\u0131\u015f\u0131k tablolar konusunda Lotus Notes uygulamas\u0131na ba\u015fvurabilirsiniz.<\/p>\n

    E\u011fer bir e-mail yerle\u015fim d\u00fczeni \u00fczerinde \u00e7al\u0131\u015f\u0131yorsan\u0131z ve olu\u015fturdu\u011funuz tablolar\u0131n giderek kar\u0131\u015ft\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcn\u00fcyorsan\u0131z, onlar\u0131 ayr\u0131 tablolara ay\u0131rmay\u0131 d\u00fc\u015f\u00fcnebilirsiniz. S\u00f6zgelimi biz, e-mail’lerimizin sayfa ba\u015fl\u0131\u011f\u0131, g\u00f6vde metni ve sayfa altl\u0131\u011f\u0131 i\u00e7in ayr\u0131 tablolar kullan\u0131yoruz. Zaten en iyisi de kar\u0131\u015f\u0131k ama tek bir tablo kullanmaktansa, \u00e7ok say\u0131da basit tablo kullanmakt\u0131r.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Tasar\u0131m program\u0131:\u00a0Adobe Photoshop, Fireworks, Dreamweaver ya da Illustrator gibi ara\u00e7lar\u0131 kullanarak \u015fablonlar\u0131n\u0131z\u0131 olu\u015fturabilir, grafiklerinizi tasarlayabilirsiniz. \u0130yi ve ‘kusursuz’ bir HTML\/Text edit\u00f6r\u00fc:\u00a0Mac i\u00e7in BBEdit ve TextWrangler, PC i\u00e7in HomeSite ve NoteTab Pro gibi programlar\u0131 kullanabilirsiniz. Ya da Microsoft Front Page, Adobe GoLive ve MacroMedia Dreamweaver gibi \u00fcr\u00fcnleri kullanarak HTML’i “WYSIWYG” (What You See is What You […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-10554","post","type-post","status-publish","format-standard","hentry","category-genel"],"_links":{"self":[{"href":"https:\/\/useinbox.com\/tr\/blog\/wp-json\/wp\/v2\/posts\/10554"}],"collection":[{"href":"https:\/\/useinbox.com\/tr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/useinbox.com\/tr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/useinbox.com\/tr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/useinbox.com\/tr\/blog\/wp-json\/wp\/v2\/comments?post=10554"}],"version-history":[{"count":1,"href":"https:\/\/useinbox.com\/tr\/blog\/wp-json\/wp\/v2\/posts\/10554\/revisions"}],"predecessor-version":[{"id":24123,"href":"https:\/\/useinbox.com\/tr\/blog\/wp-json\/wp\/v2\/posts\/10554\/revisions\/24123"}],"wp:attachment":[{"href":"https:\/\/useinbox.com\/tr\/blog\/wp-json\/wp\/v2\/media?parent=10554"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/useinbox.com\/tr\/blog\/wp-json\/wp\/v2\/categories?post=10554"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/useinbox.com\/tr\/blog\/wp-json\/wp\/v2\/tags?post=10554"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}