HTML ইমেল ডিজাইনের চ্যালেঞ্জ (এবং হতাশা) বোঝা

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

সামগ্রিক মানগুলির কারণে, বিষয়বস্তু ব্যবস্থাপনা সিস্টেমে পৃষ্ঠা নির্মাতাদের বিকাশ করা সত্যিই সহজ। ব্রাউজারগুলি HTML5, CSS, এবং JavaScript মেনে চলে... এবং ডেভেলপাররা এমন ওয়েব পৃষ্ঠাগুলি তৈরি করতে অবিশ্বাস্যভাবে শক্তিশালী সমাধান তৈরি করতে পারে যা ডিভাইসগুলির জন্য প্রতিক্রিয়াশীল এবং ব্রাউজার জুড়ে সামঞ্জস্যপূর্ণ। দুই দশক আগে, কার্যত প্রতিটি ওয়েব ডিজাইনার ওয়েব পৃষ্ঠাগুলি বিকাশের জন্য ডেস্কটপ সফ্টওয়্যার ব্যবহার করত। এখন, একজন ওয়েব ডিজাইনারের জন্য একটি ওয়েব পৃষ্ঠা তৈরি করা খুবই অস্বাভাবিক – প্রায়শই তারা টেমপ্লেট তৈরি করছে এবং বিষয়বস্তু পূরণ করতে বিষয়বস্তু সিস্টেমে সম্পাদক ব্যবহার করছে। ওয়েবসাইট সম্পাদক চমত্কার হয়.

কিন্তু ইমেল সম্পাদকরা খুবই পিছিয়ে। কারণটা এখানে…

HTML ইমেল ডিজাইন করা একটি ওয়েবসাইটের চেয়ে অনেক বেশি জটিল

আপনার কোম্পানী যদি একটি সুন্দর HTML ইমেল ডিজাইন করতে চায়, তবে প্রক্রিয়াটি বেশ কয়েকটি কারণে একটি ওয়েব পৃষ্ঠা তৈরি করার চেয়ে দ্রুতগতিতে আরও জটিল:

• কোন মান নেই - কোন ওয়েবে কঠোরভাবে আনুগত্য নেই মান ইমেল ক্লায়েন্টদের দ্বারা যা HTML ইমেল প্রদর্শন করে। আসলে, কার্যত প্রতিটি ইমেল ক্লায়েন্ট এবং প্রতিটি ইমেল ক্লায়েন্টের প্রতিটি সংস্করণ ভিন্নভাবে কাজ করে। কেউ কেউ সিএসএস, বাহ্যিক ফন্ট এবং আধুনিক এইচটিএমএলকে সম্মান করবে। অন্যরা কিছু ইনলাইন স্টাইলিংকে সম্মান করে, শুধুমাত্র ফন্টের একটি সংগ্রহ প্রদর্শন করবে এবং টেবিল-চালিত কাঠামো ছাড়া সবকিছু উপেক্ষা করবে। এই মুহুর্তে এটি আসলে বেশ হাস্যকর যে কেউ এই বিষয়ে কাজ করছে না। ফলস্বরূপ, ক্লায়েন্ট এবং ডিভাইসগুলিতে ধারাবাহিকভাবে রেন্ডার করা টেমপ্লেটগুলি ডিজাইন করা বড় ব্যবসায় পরিণত হয়েছে এবং এটি বেশ ব্যয়বহুল হতে পারে।
• ইমেল ক্লায়েন্ট নিরাপত্তা - এই সপ্তাহে, অ্যাপল মেল এইচটিএমএল ইমেলের সমস্ত ইমেজ ডিফল্টরূপে ব্লক করার জন্য আপডেট করা হয়েছে যেগুলি ইমেলে এম্বেড করা হয়নি। আপনি হয় তাদের একবারে একটি ইমেল লোড করার অনুমতি দিন বা এই সেটিংটি নিষ্ক্রিয় করতে সেটিংস সক্ষম করতে হবে৷ ইমেল ক্লায়েন্ট নিরাপত্তা সেটিংসের পাশাপাশি কর্পোরেট সেটিংসও রয়েছে৷
• আইটি সুরক্ষা - আপনার আইটি টিম একটি ইমেলে আসলে কোন বস্তু রেন্ডার করা যেতে পারে তার উপর কঠোর নিয়মকানুন স্থাপন করতে পারে। যদি আপনার ছবিগুলি, উদাহরণস্বরূপ, একটি নির্দিষ্ট ডোমেন থেকে আসে যা কর্পোরেট ফায়ারওয়ালে সাদা তালিকাভুক্ত নয়, ছবিগুলি কেবল আপনার ইমেলে প্রদর্শিত হবে না৷ কখনও কখনও, আমাদের ইমেলগুলি বিকাশ করতে হয়েছিল এবং কর্পোরেশনের সার্ভারে সমস্ত চিত্র হোস্ট করতে হয়েছিল যাতে তাদের নিজস্ব কর্মচারীরা চিত্রগুলি দেখতে পারে।
• ইমেল পরিষেবা সরবরাহকারী - বিষয়গুলি আরও খারাপ করার জন্য, ইমেল নির্মাতারা যে ইমেল পরিষেবা প্রদানকারীরা (ESPs) আসলে সমস্যাগুলিকে সীমাবদ্ধ করার পরিবর্তে প্রবর্তন করুন। তারা প্রচার করলেও তাদের সম্পাদক ড আপনি যা দেখেন তা হ'ল যা পাবেন (WYSIWYG ওয়েবসাইট), বিপরীতটি প্রায়ই ইমেল ডিজাইনের ক্ষেত্রে সত্য। আপনি তাদের প্ল্যাটফর্মে ইমেলটির পূর্বরূপ দেখবেন, তারপর ইমেল প্রাপক সব ধরণের ডিজাইনের সমস্যা দেখতে পাবেন। কোম্পানিগুলি প্রায়ই অজানাভাবে একটি লক-ডাউন সম্পাদকের পরিবর্তে একটি বৈশিষ্ট্য-সমৃদ্ধ সম্পাদক বেছে নেয় এই ভেবে যে একটিতে অন্যটির চেয়ে বেশি বৈশিষ্ট্য রয়েছে। বিপরীতটি সত্য... আপনি যদি এমন ইমেলগুলি চান যা সমস্ত ইমেল ক্লায়েন্ট জুড়ে ধারাবাহিকভাবে রেন্ডার হয়, তবে সহজতর ভাল কারণ কম ভুল হতে পারে।
• ইমেল ক্লায়েন্ট রেন্ডারিং - এখানে শত শত ইমেল ক্লায়েন্ট রয়েছে, প্রতিটি ডেস্কটপ, অ্যাপস, মোবাইল এবং ওয়েবমেইল ক্লায়েন্ট জুড়ে আলাদাভাবে HTML রেন্ডার করছে। যদিও আপনার ইমেল পরিষেবা প্রদানকারীতে আপনার নিফটি টেক্সট এডিটর আপনার ইমেলে একটি শিরোনাম রাখার জন্য একটি সেটিং থাকতে পারে... প্রতিটি ইমেল ক্লায়েন্টের জন্য প্যাডিং, মার্জিন, লাইন-উচ্চতা এবং ফন্টের আকার আলাদা হতে পারে। ফলস্বরূপ, ধারাবাহিকভাবে রেন্ডার করার জন্য একটি ইমেল পেতে আপনাকে এইচটিএমএলকে বোবা করতে হবে এবং প্রতিটি উপাদানকে আলাদাভাবে কোড করতে হবে (নীচের উদাহরণটি দেখুন) - এবং প্রায়শই ব্যতিক্রমগুলি লিখতে হবে যা ইমেল ক্লায়েন্ট নির্দিষ্ট। কোনও সাধারণ ব্লকের ধরন নেই, আপনাকে টেবিল-চালিত লেআউটগুলি করতে হবে যা ত্রিশ বছর আগে ওয়েবের জন্য নির্মাণের সমতুল্য। তাই যেকোন নতুন লেআউটের জন্য ডেভেলপমেন্ট এবং ক্রস-ইমেল ক্লায়েন্ট এবং ডিভাইস টেস্টিং উভয়ই প্রয়োজন। আপনি আপনার ইনবক্সে যা দেখছেন আমি আমার ইনবক্সে যা দেখছি তা সম্পূর্ণ ভিন্ন হতে পারে। এটা কেন রেন্ডারিং টুল পছন্দ ইমেইল অন অ্যাসিড or litmus আপনার নতুন ডিজাইন সমস্ত ইমেল ক্লায়েন্ট জুড়ে কাজ করে তা নিশ্চিত করার জন্য একটি আবশ্যক। এখানে জনপ্রিয় ইমেল ক্লায়েন্ট এবং তাদের রেন্ডারিং ইঞ্জিনগুলির একটি সংক্ষিপ্ত তালিকা রয়েছে:
  • অ্যাপল মেল, ম্যাকের জন্য আউটলুক, অ্যান্ড্রয়েড মেল এবং iOS মেল ব্যবহার ওয়েবকিট.
  • আউটলুক 2000, 2002 এবং 2003 ব্যবহার করে ইন্টারনেট এক্সপ্লোরার.
  • আউটলুক 2007, 2010 এবং 2013 ব্যবহার করে মাইক্রোসফ্ট ওয়ার্ড (হ্যাঁ, শব্দ!)
  • ওয়েবমেইল ক্লায়েন্টরা তাদের ব্রাউজারের সংশ্লিষ্ট ইঞ্জিন ব্যবহার করে (উদাহরণস্বরূপ, সাফারি ওয়েবকিট ব্যবহার করে এবং ক্রোম ব্লিঙ্ক ব্যবহার করে)।

ওয়েব বনাম জন্য HTML এর একটি উদাহরণ। ইমেইল

আপনি যদি এমন একটি উদাহরণ চান যা ইমেল বনাম ওয়েবে ডিজাইন করার জটিলতাকে চিত্রিত করে, এখানে Mailbakery এর নিবন্ধ থেকে একটি নিখুঁত উদাহরণ রয়েছে ইমেল এবং ওয়েব HTML এর মধ্যে 19 বড় পার্থক্য:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left">
         <table border="0" cellspacing="0" cellpadding="0" bgcolor="#43756e">
            <tr>
               <td class="text-button"  style="padding: 5px 20px; color:#ffffff; font-family: 'Oswald', Arial, sans-serif; font-size:14px; line-height:20px; text-align:center; text-transform:uppercase;">
                  <a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none">Find Out More</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<div class="center">
   <a href="#" class="button">Find Out More</a>
</div>

কীভাবে ইমেল ডিজাইনের সমস্যাগুলি এড়ানো যায়

একটি শালীন প্রক্রিয়া অনুসরণ করে ইমেল ডিজাইনের সমস্যাগুলি এড়ানো যেতে পারে:

1. টেমপ্লেট ডিজাইন - বিভিন্ন লেআউট এবং বিষয়বস্তু ব্লক সহ একটি টেমপ্লেট তৈরি করুন যা আপনার ইমেল ডিজাইনে তৈরি করতে চান এমন প্রতিটি শৈলীকে অন্তর্ভুক্ত করে। যখন আমরা একটি ক্লায়েন্ট বাস্তবায়ন করি, তখন আমরা সবসময় তাদের কাছে ঠেলে দিই ভবিষ্যতের জন্য একটি ইমেল ডিজাইন করুন - শুধুমাত্র পরবর্তী ইমেল প্রচারাভিযান নয় যা পাঠানো হয়েছে। এইভাবে, আমরা প্রয়োজনীয় সমাধানগুলি সম্পূর্ণরূপে ডিজাইন, বিকাশ, পরীক্ষা এবং বাস্তবায়ন করতে পারি আগে তারা যে প্রথম ইমেল পাঠায়.
2. টেমপ্লেট টেস্টিং - আপনার গ্রাহকরা যে ইমেল ক্লায়েন্টগুলি ব্যবহার করছেন তা বোঝা এবং নিশ্চিত করা যে কোনও টেমপ্লেট স্থাপন করার আগে আপনার HTML ইমেল সম্পূর্ণরূপে মোবাইল এবং ডেস্কটপে পরীক্ষা করা হয়েছে। আমরা একটি ফটোশপ লেআউট থেকে আক্ষরিক অর্থে একটি ইমেল ডিজাইন করতে পারি… তবে এটিকে টেবিল-চালিত, ক্রস-ইমেল ক্লায়েন্টে টুকরো টুকরো করা এবং ডাইস করা ইমেল ডিজাইনগুলিকে সর্বোত্তম এবং সামঞ্জস্যপূর্ণ স্থাপন করার জন্য অপরিহার্য।
3. অভ্যন্তরীণ পরীক্ষা - একবার আপনার টেমপ্লেট ডিজাইন এবং পরীক্ষা করা হলে, এটি পর্যালোচনা এবং অনুমোদনের জন্য সংস্থার মধ্যে একটি অভ্যন্তরীণ বীজ তালিকায় পাঠানো উচিত। অভ্যন্তরীণভাবে ইমেল রেন্ডার করার সাথে জড়িত ফায়ারওয়াল বা নিরাপত্তা সমস্যা নেই তা নিশ্চিত করার জন্য আপনি এমনকি ব্যক্তিদের খুব সীমিত উপসেট দিয়ে শুরু করতে চাইতে পারেন। যদি এটি একটি নতুন ইমেল পরিষেবা প্রদানকারীর উপর একটি উদাহরণ তৈরি করে, আপনি এমনকি ইনবক্সে আপনার ইমেল পাওয়ার সাথে সম্পর্কিত কিছু ফিল্টারিং বা ব্লক করার সমস্যাও খুঁজে পেতে পারেন।
4. টেমপ্লেট সংস্করণ - আপনার টেমপ্লেটের একটি নতুন সংস্করণে কাজ না করে আপনার লেআউট বা ডিজাইন পরিবর্তন করবেন না যা ডিজাইন, সঠিকভাবে পরীক্ষা করা এবং স্থাপন করা যেতে পারে। অনেক ব্যবসা প্রতিটি প্রচারাভিযানের জন্য একমুখী ডিজাইন পছন্দ করে... কিন্তু এর জন্য প্রতিটি ইমেল প্রতিটি প্রচারের জন্য ডিজাইন, ডেভেলপ করা এবং স্থাপন করা প্রয়োজন। এটি অভ্যন্তরীণ ইমেল বিপণন প্রক্রিয়ায় এক টন সময় যোগ করে। এবং, আপনার ইমেলের কোন উপাদানগুলি কোন উপাদানগুলি নয় তার থেকে ভাল পারফরম্যান্স করছে তা আপনি বুঝতে পারবেন না। ধারাবাহিকতা প্রক্রিয়াটিকে সহজ করার উপায় নয়, এটি আপনার গ্রাহকদের আচরণের জন্যও গুরুত্বপূর্ণ।
5. ইমেল পরিষেবা প্রদানকারী ব্যতিক্রম - কার্যত প্রতিটি ইমেল পরিষেবা প্রদানকারীর কাছে তাদের ইমেল নির্মাতা প্রবর্তিত সমস্যাগুলির উপর কাজ করার একটি উপায় রয়েছে। আমরা প্রায়শই একটি অ্যাকাউন্টে কাঁচা CSS যোগ করতে পারি – অথবা এমনকি একটি বিষয়বস্তু ব্লকও থাকতে পারে যা প্রতিটি ইমেলে অন্তর্ভুক্ত করতে হবে – যাতে কোম্পানিটি অন্তর্নির্মিত ইমেল সম্পাদক ব্যবহার করতে পারে এবং এটি আপনার ইমেলের নকশাকে ভেঙে না দেয়। অবশ্যই, সেগুলি মেনে চলছে তা নিশ্চিত করার জন্য সেই পদক্ষেপগুলি স্থাপন করার জন্য কিছু প্রশিক্ষণ এবং প্রক্রিয়া নিয়ন্ত্রণের প্রয়োজন হতে পারে। অথবা - আপনি আক্ষরিক অর্থে আপনার ইমেল ডিজাইনকে এমন একটি সমাধানে বিকাশ করতে চাইতে পারেন যা ক্লায়েন্ট এবং ডিভাইস জুড়ে কাজ করে প্রমাণিত হয়, তারপর এটি আপনার ইমেল পরিষেবা প্রদানকারীতে পেস্ট করুন।

ইমেল ডিজাইন প্ল্যাটফর্ম

যেহেতু ইমেল পরিষেবা প্ল্যাটফর্মগুলি ক্রস-ক্লায়েন্ট এবং ক্রস-ডিভাইস ক্রমাগতভাবে রেন্ডার করা বিল্ডার তৈরি এবং বজায় রাখার ক্ষেত্রে একটি খারাপ কাজ করেছে, তাই বেশ কয়েকটি দুর্দান্ত প্ল্যাটফর্ম বাজারে এসেছে। আমরা ব্যাপকভাবে ব্যবহার করেছি যে এক স্ট্রিপো.

স্ট্রিপো শুধুমাত্র একটি ইমেল নির্মাতা নয়, তাদের 900 টিরও বেশি টেমপ্লেটের একটি লাইব্রেরি রয়েছে যা সহজেই আমদানি করা যায়। একবার আপনি ইমেল ডিজাইন করলে, আপনি 60+ ইএসপি এবং ইমেল ক্লায়েন্টদের ইমেল করতে পারেন, এর মধ্যে রয়েছে MailChimp, HubSpot, ক্যাম্পেইন মনিটর, AWeber, eSputnik, Outlook, এবং Gmail। সব Stripo টেমপ্লেটের মধ্যে ইমেল রেন্ডারিং পরীক্ষাগুলি অন্তর্ভুক্ত রয়েছে যাতে আপনি নিশ্চিত করতে পারেন যে সেগুলি পরীক্ষা করা হয়েছে এবং 40 টিরও বেশি ইমেল ক্লায়েন্ট জুড়ে ধারাবাহিকভাবে কাজ করে।

স্ট্রিপো এডিটর ডেমোতে লগইন করুন

প্রকাশ: আমি আমার সাথে লিঙ্ক করছি বিপণন পরামর্শ সংস্থা যারা কার্যত যেকোনো ইমেল পরিষেবা প্রদানকারীর মধ্যে নেতৃস্থানীয় ব্র্যান্ডের জন্য ক্রস-ক্লায়েন্ট ইমেল ডিজাইন এবং স্থাপন করে। আমি একটি অনুমোদিত স্ট্রিপো এবং আমি এই নিবন্ধে আমার লিঙ্ক ব্যবহার করছি.