এইচটিএমএল ইমেল ডিজাইনের জন্য কী নির্দেশিকা রয়েছে? [বন্ধ]


101

অনেক ক্লায়েন্ট এবং ওয়েব ভিত্তিক ইমেল ইন্টারফেস জুড়ে ভাল ভিজ্যুয়াল স্থিতিশীলতা বজায় রেখে ইমেলগুলিতে সমৃদ্ধ এইচটিএমএল ফর্ম্যাটিংয়ের জন্য আপনি কী নির্দেশিকা দিতে পারেন?

স্ট্যাক ওভারফ্লো সম্পর্কিত একটি প্রশ্ন সম্পর্কিত একটি সম্পর্কিত নয়:

http://www.campaignmonitor.com/blog/archives/2008/05/2008_email_design_guidelines.html

যার মধ্যে নিম্নলিখিত নির্দেশিকাগুলি রয়েছে:

  1. <body><head>
    কিছু ইমেল ক্লায়েন্টের পরিবর্তে স্টাইলশিটটি রাখুন সিএসএস মাথা থেকে বের করে ফেলা হবে, তবে শৈলীতে ব্লকটি যদি (অবৈধভাবে) শরীরে থাকে তবে তা ছেড়ে দিন।
  2. ইনলাইন স্টাইলগুলি ব্যবহার করুন যেখানেই সম্ভব
    জিমেইল যে কোনও স্টাইলশীট সজ্জিত করবে, সেগুলি হোক <head>বা না হোক <body>, তবে style=""অ্যাট্রিবিউটটি ব্যবহার করে নির্ধারিত সম্মান ইনলাইন স্টাইলগুলি
  3. টেবিলগুলিতে ফিরে আসুন
    ইমেল স্ট্যান্ডার্ডগুলি মাইক্রোসফ্ট ওয়ার্ড রেন্ডারিং ইঞ্জিন ব্যবহার করে আউটলুক 2007 এর জন্য সাম্প্রতিক বছরগুলিতে প্রকৃতপক্ষে একটি বিশাল পদক্ষেপ নিয়েছে। স্টাইলশীট ছাড়াই অবস্থান নির্ধারণ সম্পর্কে আপনি যা শিখেছেন তার বেশিরভাগটিই শিখুন।
  4. চিত্রগুলির উপর নির্ভর করবেন না
    বেশিরভাগ ক্লায়েন্ট এবং বেশিরভাগ ওয়েব ভিত্তিক ইমেল ক্লায়েন্টগুলি চিত্র প্রদর্শন করবে না যতক্ষণ না ব্যবহারকারীরা তাদের প্রদর্শিত হওয়ার অনুরোধ না করে।

আমার কয়েকটি কয়েকটি "অপ্রমাণিত" সত্য আছে যা আমি সেগুলি কোথায় পড়েছিলাম তা মনে নেই।

  1. টেবিলগুলিতে বাসা বাঁধার দুটি স্তরের বেশি ব্যবহার করবেন না এটি
    কি সত্য? আমি কি করলে কি ঘটতে পারে? এটির উপর চাপ সৃষ্টি করে এমন কোনও নির্দিষ্ট ক্লায়েন্ট / ক্লায়েন্ট রয়েছে?
  2. ঘর /
    সারণীতে পটভূমি চিত্র নেস্ট করার বিষয়ে সতর্ক থাকুন আমি যেমন বুঝতে পারি যে আপনি এমন পরিস্থিতিতে পড়তে পারেন যেখানে পটভূমির চিত্রটি পুরোপুরি নতুনভাবে সাজানো টেবিল / কোষে প্রয়োগ করা হয়েছে এবং কেবল "ঝলকানি" নয়। আবারও সত্য? কোন ক্লায়েন্ট?

আমি এই তালিকাটি আরও ভাল দিকনির্দেশ এবং খাঁদ থেকে প্রাপ্ত অভিজ্ঞতার সাথে দেখতে চাই।

আপনি কি আরও কিছু প্রস্তাব দিতে পারেন?

আপডেট: আমি স্পষ্টতই এইচটিএমএল ডিজাইনের অংশের জন্য নির্দেশিকা এবং সেখানে ধারাবাহিকতার জন্য জিজ্ঞাসা করছি । স্প্যাম ফিল্টারগুলি এড়ানোর জন্য সাধারণ নির্দেশিকাগুলি এবং সাধারণ সৌজন্যতা সম্পর্কিত প্রশ্নগুলি ইতিমধ্যে এসও।


উত্তর:


63

এটা আসলে এর সত্যিই একটি শালীন এইচটিএমএল ইমেইল করা, যদি আপনি এটি একটি 'আধুনিক HTML এবং CSS এর' দৃষ্টিকোণ থেকে কাছে কঠিন।

সেরা ফলাফলের জন্য, এটি 1999 এর কথা ভাবুন।

  • বিন্যাসের জন্য টেবিলগুলিতে ফিরে যান (বা বেশি পছন্দ - কোনও জটিল বিন্যাস চেষ্টা করবেন না)
  • পটভূমি চিত্রগুলি থেকে ভয় পান (এগুলি আউটলুক 2007 এবং জিমেইলে ভেঙে যায়)।
  • শরীরে-ট্যাগ-ইন-বডি জিনিসটি হটমেল সেভাবে এটি গ্রহণ করত - আমি নিশ্চিত যে তারা এটিকে এখনই ছড়িয়ে দেবে। আপনার styleযদি সিএসএস ব্যবহার করতে হয় তবে বৈশিষ্ট্যটির সাথে ইনলাইন স্টাইলগুলি ব্যবহার করুন।
  • সম্পর্কে পুরোপুরি ভুলে যান float
  • মনে রাখবেন আপনার চিত্রগুলি সম্ভবত অবরুদ্ধ হয়ে থাকবে - আপনার সুবিধার জন্য ব্যাকগ্রাউন্ড এবং পাঠ্যের রঙ ব্যবহার করুন - নিশ্চিত করুন যে চিত্রগুলি অক্ষম রয়েছে এমন কিছু পাঠযোগ্য পাঠ্য রয়েছে
  • সংযোগগুলি সঙ্গে খুব সতর্কতা অবলম্বন করা আবশ্যক, কিছু বিশেষ করে সতর্ক হতে যে লিঙ্ক টেক্সট একটি URL মত দেখাচ্ছে - আপনি ফিল্টার 'ফিশিং' রাগ করবে (যেমন <a href="http://domain.tld">www.someotherdomain.tld</a>হয় খারাপ )
  • মনে রাখবেন যে ওয়েবমেল ক্লায়েন্টগুলির "ভাঁজ" পৃষ্ঠাটি অত্যন্ত উচ্চতর হতে পারে (একটি 1024x768 স্ক্রিনে, বেশিরভাগ ইন্টারফেসে শতাধিক পিক্সেল বা তার বেশি দেখাবে না) - আপনার পরিচয় স্টাফটি ডানদিকে পাবেন যাতে প্রাপক আপনি কে জানেন।
  • দৃষ্টিভঙ্গির সাম্প্রতিক সংস্করণটিতে একটি "প্রতিকৃতি" পূর্বরূপ ফলক রয়েছে যা আপনি প্রত্যাশার চেয়ে তুলনামূলকভাবে সংক্ষিপ্ত - স্থির-প্রস্থের বিন্যাসগুলি সম্পর্কে খুব সতর্ক থাকুন, যদি আপনার অবশ্যই এটি ব্যবহার করা হয় তবে এগুলি যতটা সম্ভব সংকীর্ণ করুন।
  • এমনকি ফ্ল্যাশ, জাভাস্ক্রিপ্ট, এসভিজি, ক্যানভাস, বা এর মতো কিছু সম্পর্কে ভাবেন না।
  • পরীক্ষা, অনেক। আপনি সাম্প্রতিক আউটলুকে পরীক্ষা করেছেন তা নিশ্চিত করুন (জিনিসগুলি অনেক কিছু পরিবর্তিত হয়েছে! এটি এখন ওয়ার্ডকে তার এইচটিএমএল রেন্ডারিং ইঞ্জিন হিসাবে ব্যবহার করে এবং এটি পঙ্গু: ওয়ার্ড 2007 এইচটিএমএল / সিএসএস সমর্থন )। জিমেইলও বেশ সুন্দর ick আশ্চর্যজনকভাবে ইয়াহুর ওয়েবমেলটি দুর্দান্ত সিএসএস সমর্থন সহ অত্যন্ত দুর্দান্ত।

শুভকামনা;)

আরও প্রশ্নের উত্তর দিতে আপডেট করুন:

টেবিলগুলিতে বাসা বাঁধার দুটি স্তরের বেশি ব্যবহার করবেন না

আমি বিশ্বাস করি এটি লোটাস নোট সম্পর্কিত একটি পুরানো গাইডলাইন। নেস্টেড টেবিলগুলি ঠিকঠাক হওয়া উচিত , তবে সত্যিকার অর্থে, আপনার যদি এমন একটি লেআউট থাকে যা প্রয়োজনীয়তার জন্য যথেষ্ট জটিল হয় তবে আপনার সম্ভবত যেভাবে সমস্যা হতে চলেছে। আপনার লেআউটটি সহজ রাখুন ।

ঘর / সারণীতে পটভূমি চিত্র নেস্ট করার বিষয়ে সাবধান হন

এই উপরে সঙ্গে সম্পর্কযুক্ত হতে পারে, এবং একই প্রযোজ্য, আপনি পেয়ে থাকেন যদি জটিল তারপর আপনি হবে সমস্যা আছে। আউটলুকের সাম্প্রতিক সংস্করণগুলি ব্যাকগ্রাউন্ড চিত্রগুলিকে মোটেই সমর্থন করে না, তাই আপনাকে সেগুলি পুরোপুরি ভুলে যাওয়ার পরামর্শ দেওয়া হবে।


3
এইচটিএমএল ইমেল সমর্থন কেন এতটা বিকশিত হয় নি? কেন আমরা এই সমস্ত খারাপ অভ্যাসগুলি বাস্তবায়িত করতে হবে, যেন আমরা 1999 সালে ফিরে এসেছি?
smonff

সেখানে bgimages সমর্থনের জন্য কার্যসংক্রান্ত নেই stackoverflow.com/a/17358553/413032 । একটি এমএস-শব্দের এইচটিএমএল পরিবর্তন করা @ @ স্মার্ট আমি আপনার সাথে সম্পূর্ণরূপে একমত। ........ কেন এইচটিএমএল এমএস-ওয়ার্ড দ্বারা রেন্ডার!
দাভুত গার্বিজ

1
লিটমাস থেকে ইমেল কোডিং 101 পরীক্ষা করুন , আশা সাহায্য করে।
শাইজুত

13

সর্বদা মাল্টিপার্ট মাইম ব্যবহার করুন এবং একটি সরল পাঠ্য বিকল্প সরবরাহ করুন।




2

আমার মনে হয় আপনি যে প্রশ্নটি করছেন তার চেয়ে এটি নিম্ন স্তরের, তবে আপনি যদি সত্যিই কোনও এইচটিএমএল ইমেলটি যথাসম্ভব ক্লায়েন্টদের দ্বারা সঠিকভাবে দেখতে চান তবে নিশ্চিত করুন যে এটি বৈধ MIME ব্যবহার করছে। বিশেষত, কোনও ইমেলকে বৈধ MIME হিসাবে বিবেচনা করার জন্য, শিরোনাম অবশ্যই (শব্দের আরএফসি অর্থে) এই দুটি শিরোনাম ধারণ করে:

MIME-Version:
Content-Type:

এইগুলির মধ্যে একটি বা অন্যটি অনুপস্থিত থাকলে খুব কঠোর ক্লায়েন্টরা আপনার এইচটিএমএলটিকে কাঁচা পাঠ্য হিসাবে প্রদর্শন করবে। আপনি অবাক হবেন যে আরও কত বৃহত্তর অনলাইন বিক্রেতাদের যারা আরও ভাল জানেন সেগুলি এই বিষয়টি সম্পর্কে খারাপ ধারণা ফেলবে (উল্লেখযোগ্যভাবে, আমি এইচটিএমএল ইমেলগুলি পেয়েছি / মাইএম-সংস্করণ হারিয়েছি: অতীতে আমাজন এবং এসিএম থেকে শিরোনাম)


1
  • পটভূমির চিত্রগুলি নির্ভরযোগ্য নয়।
  • কার্যত কোনও মস্তিষ্কবিহীন, তবে জাভাস্ক্রিপ্ট নেই
  • এমন একটি সম্পাদক ব্যবহার করুন যা আপনাকে বর্তমান ফাইল / বাফারটিকে ইমেল হিসাবে প্রেরণ করতে দেয় বা খুব কমপক্ষে একটি প্রোগ্রাম সন্ধান করে যা আপনাকে কোনও ফাইলের সামগ্রীগুলি এইচটিএমএল ইমেল হিসাবে প্রেরণ করতে দেয়। এইচটিএমএল অনুলিপি করে এবং এটিকে দৃষ্টিভঙ্গিতে আটকানো (বা এই বিষয়ে কোনও অন্য মেল প্রোগ্রাম) দিয়ে আপনার ইমেলগুলি পরীক্ষা করবেন না

1

পরামর্শের তিনটি শব্দ: পরীক্ষা, পরীক্ষা, পরীক্ষা।

লিটমাস অ্যাপ.কমের ইমেল পরীক্ষামূলক পরিষেবাটি দেখুন। আপনি তাদের একটি বার্তা প্রেরণ করুন এবং তারা এটি ক্লায়েন্টদের একটি গোষ্ঠীতে রেন্ডার করে এবং ফলাফলের স্ক্রিনশট দেখায়। এটি নিখুঁত নয়, তবে এটি বেশ ভাল।

(8.0 এর পূর্বে লোটাস নোটগুলি সত্যই এইচটিএমএল মেলের জন্য দুর্গন্ধযুক্ত)

এছাড়াও, কেবল ইনলাইন সিএসএস শৈলীর বাইরেও, আমি যেখানেই সম্ভব ট্যাগগুলিতে স্যুইচ করার পরামর্শ দিচ্ছি।


1

আপনার চিত্রগুলি এম্বেড করুন, তাদের সাথে লিঙ্ক করবেন না।

এইটা খারাপ :

<img src="http://myserver.com/myImage.jpg" alt="Lolkat"/>

এটা ভাল :

<img src=cid:myImage/>

হ্যাঁ, এটি অদ্ভুত দেখাচ্ছে তবে ইমেলগুলিতে এমবেডিং ইমেজ সম্পর্কিত এই গাইডটি দেখুন


0

আপনি যদি স্টাইল ব্লকটি অন্তর্ভুক্ত করেন তবে "। শ্রেণিবদ্ধ নাম" বা "দিয়ে কোনও নতুন লাইন শুরু করবেন না। কিছু. পিরিয়ডের আগে একটি ধনুর্বন্ধনী বা কিছু রাখুন। আপনি যদি এটি না করেন কিছু ওয়েব মেল সিস্টেমগুলি আপনার স্টাইল শিটগুলি সঠিকভাবে প্রদর্শন করবে না।

অনেক লোক ভুলভাবে ধরে নিয়েছে যে তারা এই আচরণের কারণে ইমেলগুলিতে সিএসএস ব্লক ব্যবহার করতে পারবেন না ... আইআইআরসি "।" এসএমটিপি-র জন্য বডি ডিলিমিটার। একটি বার্তার বিষয়বস্তুটিকে নতুন বার্তা হিসাবে ভুল পরিচয় দেওয়া থেকে বিরত রাখতে সিস্টেমগুলি তাদের মেল স্টোরগুলিতে পালাতে ঝুঁকবে। এটি যেভাবে পরিচালিত হয় তা সময়ের সাথে নতুন লাইনে শুরু হওয়া কোনও শৈলীর বিরতি ঘটিয়েছে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.