এইচটিএমএল ইমেলগুলি স্টাইল করার জন্য সেরা অভ্যাসগুলি [বন্ধ]

195

বন্ধ । এই প্রশ্নটি আরও ফোকাস করা প্রয়োজন । এটি বর্তমানে উত্তর গ্রহণ করছে না।

এই প্রশ্নটি উন্নত করতে চান? প্রশ্নটি আপডেট করুন যাতে এটি কেবলমাত্র এই পোস্টটি সম্পাদনা করে একটি সমস্যায় ফোকাস করে ।

6 বছর আগে বন্ধ ছিল ।

এই প্রশ্নটি উন্নত করুন

আমি একটি ইমেল নিউজলেটার জন্য একটি HTML টেমপ্লেট ডিজাইন করছি। আমি শিখেছি যে অনেক ইমেল ক্লায়েন্ট সংযুক্ত স্টাইলশিটগুলিকে উপেক্ষা করে এবং আরও অনেকে (জিমেইল সহ) সিএসএস ব্লক ঘোষণাকে পুরোপুরি উপেক্ষা করে। ইনলাইন শৈলীটি কি আমার একমাত্র পছন্দ? এইচটিএমএল ইমেলগুলি স্টাইল করার সর্বোত্তম অনুশীলনগুলি কী কী?

html css html-email

— জো মরিনিন
সূত্র

1

এখানে একটি সদৃশ প্রশ্নে সম্পদের একটি বৃহত তালিকা রয়েছে ।

— জন

128

ক্যাম্পেইন মনিটরের একটি দুর্দান্ত সমর্থন ম্যাট্রিক্স রয়েছে যা কী সমর্থন করে এবং বিভিন্ন মেল ক্লায়েন্টগুলির মধ্যে কী নয় তা বিশদ করে।

বেশ কয়েকটি ক্লায়েন্ট জুড়ে কোনও ইমেল কীভাবে প্রদর্শিত হয় এবং তারা ফিল্টার ইত্যাদিতে ধরা পড়ে কিনা তা দেখতে আপনি লিটমাসের মতো একটি পরিষেবা ব্যবহার করতে পারেন view

— জিম
সূত্র

9

+1: লিটমাস সম্পর্কে জানতেন না। এটি দেখতে বিশাল সময় সাশ্রয়ের মতো। আপনাকে ধন্যবাদ: ডি এবং ক্যাম্পেইনমনিটরে ব্লগ পোস্টগুলি সম্পর্কে ভুলে যাবেন না, এতে কয়েকটি দুর্দান্ত টিপসও রয়েছে।

— হর্স্ট গুটম্যান

249

আমি এর আগে এইচটিএমএল ইমেইল যুদ্ধ করেছি। ইমেল ক্লায়েন্টদের মধ্যে সর্বাধিক সামঞ্জস্যের জন্য স্টাইলিং সম্পর্কে আমার কয়েকটি টিপস এখানে রইল।

ইনলাইন শৈলীগুলি আপনি সেরা বন্ধু। একেবারে স্টাইল শীটগুলি লিঙ্ক করবেন না এবং কোনও <style>ট্যাগ ব্যবহার করবেন না (GMail, উদাহরণস্বরূপ, সেই ট্যাগটি স্ট্রিপগুলি এবং এর সমস্ত বিষয়বস্তু)।
আপনার আরও ভাল রায়, ব্যবহার এবং টেবিল অপব্যবহার বিরুদ্ধে । <div>গুলি কেবল এটি কাটবে না (বিশেষত আউটলুকে)।
ব্যাকগ্রাউন্ড চিত্রগুলি ব্যবহার করবেন না , এগুলি দাগযুক্ত এবং আপনাকে বিরক্ত করবে।
মনে রাখবেন কিছু ইমেল ক্লায়েন্ট স্বয়ংক্রিয়ভাবে টাইপযুক্ত হাইপারলিংকে লিঙ্কগুলিতে রূপান্তর করবে (যদি আপনি <a>এগুলি নিজে অ্যাঙ্কর না করেন )। এটি কখনও কখনও নেতিবাচক প্রভাব অর্জন করতে পারে (যদি আপনি হাইপারলিঙ্কগুলির প্রত্যেককে আলাদা রঙ প্রদর্শিত করতে একটি স্টাইল রাখেন তবে বলুন)।
ভিন্ন কিছু দিয়ে একটি বাস্তব লিঙ্ক হাইপারলিংক করতে সাবধান হন। উদাহরণস্বরূপ, টাইপ করুন http://www.google.comএবং তারপরে এটি লিঙ্ক করবেন না https://gmail.com/। কিছু ক্লায়েন্ট স্প্যাম বা জাঙ্ক হিসাবে বার্তাটি পতাকাঙ্কিত করবে।
আকারে সংরক্ষণের জন্য আপনার চিত্রগুলিকে যতটা সম্ভব রঙে সংরক্ষণ করুন।
যদি সম্ভব হয় তবে আপনার ইমেলে আপনার চিত্রগুলি এম্বেড করুন । এগুলি ডাউনলোড করতে ইমেলের কোনও বাহ্যিক ওয়েব সার্ভারে পৌঁছাতে হবে না এবং তারা ইমেলের সংযুক্তি হিসাবে উপস্থিত হবে না।

এবং সর্বশেষে, পরীক্ষা, পরীক্ষা, পরীক্ষা ! প্রতিটি ইমেল ক্লায়েন্ট ব্রাউজারের চেয়ে আলাদাভাবে জিনিসগুলি করে।

— মাইকেল ইরিগয়েন
সূত্র

2

যখন কোনও পটভূমির রঙ স্থাপন করা হয় <div>, তখন আউটলুক সামগ্রীটির অতীত রঙ প্রসারিত করে না, মানে প্যাডিং রঙিন হবে না।

— মাইকেল ইরিগয়েন

70

কেন, ইন্টারনেট? কেন আমরা ইমেলগুলির জন্য সুন্দর এইচটিএমএল রাখতে পারি না? শেকস মুষ্টি

— simonlchilds

8

সুতরাং আমরা সুন্দর স্প্যাম পেতে পারি?

— ব্রুক হেনসলে

6

@ ডেভিডাইভারস সম্ভবত এটি উল্লেখ করা উচিত যে "এম্বেড করা চিত্রগুলি" চিত্রগুলি সংযুক্তি হিসাবে যুক্ত করার অর্থ নয়, পরিবর্তে এগুলিকে "সাধারণ" <img>ট্যাগগুলিতে উল্লিখিত url প্রতিস্থাপনের জন্য বেস 64-এনকোডযুক্ত স্ট্রিং হিসাবে অন্তর্ভুক্ত করা উচিত :<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...">

— টিমো

3

@ এমজেফারম্যাশ ইমেইলে ছবি এম্বেড করার জন্য এটি ভুল উপায়। আপনাকে আলাদা খাম তৈরি করতে হবে এবং এর ভিত্তিতে চিত্রটি উল্লেখ করতে হবে cid।

— মাইকেল ইরিগয়েন

37

মেল চিম্প কী করবেন না সে সম্পর্কে একটি দুর্দান্ত নিবন্ধ পেয়েছে। (আমি জানি আপনি যা চান তার পক্ষে এটি ভুল উপায়ে শোনাচ্ছে)

http://kb.mailchimp.com/article/common-html-email-coding-mistakes

সাধারণভাবে আপনি যা শিখেছেন সেগুলি ওয়েব ডিজাইনের জন্য খারাপ অভ্যাস যা এইচটিএমএল ইমেলের একমাত্র বিকল্প বলে মনে হয়।

বেসিকগুলি হ'ল:

চিত্রগুলির জন্য পরম পাথ রয়েছে (উদাঃ https://stackoverflow.com/random-image.png )
বিন্যাসের জন্য সারণীগুলি ব্যবহার করুন (আমি কখনই এটির প্রস্তাব দেব না!)
ইনলাইন স্টাইলগুলি ব্যবহার করুন (এবং পুরানো স্কুল সিএসএসও খুব খুব বেশি ২.১ এ, বাক্স-ছায়া উদাহরণস্বরূপ কাজ করবে না;))

আপনি যতটা ইমেইল ক্লায়েন্ট হাতে পেতে পারেন তেমন পরীক্ষা করুন বা লিটমাসকে অন্য কেউ প্রস্তাবিত হিসাবে ব্যবহার করুন! (জিমকে ক্রেডিট)

সম্পাদনা:

মেল চিম্প এই সরঞ্জামটিকে সম্প্রদায়টিতে উপলব্ধ করে একটি দুর্দান্ত কাজ করেছে ।

এটি আপনার সিএসএস ক্লাসগুলি আপনার জন্য এইচটিএমএল উপাদানগুলিকে ইনলাইন করে!

— স্যামমুলিনস
সূত্র

1

মেলচিম্প লিঙ্কটি নষ্ট হয়েছে, সম্ভবত এটি এই নিবন্ধগুলির মধ্যে একটি, kb.mailchimp.com/article/common-html-email-coding-mistake বা এই kb.mailchimp.com/article/common-mistkes-to-avoid

— নাথান কোপ

আমি লিঙ্কটি আপডেট করেছি, আপনি যে প্রস্তাব করেছিলেন প্রথমটি হ'ল সঠিকটি। দুর্ভাগ্যক্রমে এটি পুনঃনির্দেশগুলি যোগ না করে সরানো হয়েছিল।

— স্যামমুলিনস

সিএসএস ইনলাইনিং সরঞ্জামের জন্য ধন্যবাদ। আমি অনুমান করা সহায়ক হবে।

— রাজেশ পল

10

এখানে পোস্ট করা উত্তরগুলি ছাড়াও, আপনি নিবন্ধটি নিশ্চিত করেছেন তা নিশ্চিত করুন:

http://24ways.org/2009/rock-solid-html-emails

— স্টিফান মুলার
সূত্র

6

এইচটিএমএল ইমেলগুলি সম্পর্কে আমি সর্বদা ফিরে আসা সংস্থানটি হ'ল ক্যাম্পেইশনমনিটারের সিএসএস গাইড ।

যেহেতু তাদের ব্যবসা সম্পূর্ণ ইমেল বিতরণকে ঘিরে রয়েছে, তারা তাদের জিনিসগুলি পাশাপাশি যে কেউ যাচ্ছেন তা তারা জানে

— গ্যারেথ
সূত্র

5

'তাই ভয়। আমি একটি স্টাইলশিট দিয়ে একটি HTML পৃষ্ঠা তৈরি করব, তারপরে প্রতিটি উপাদানটির স্টাইল অ্যাটরে স্টাইলশিট প্রয়োগ করতে jQuery ব্যবহার করব। এটার মতো কিছু:

var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
    $('body *').css(styleAttributes[i],function () {
        $(this).css(styleAttributes[i]);
    });
}

তারপরে DOM অনুলিপি করুন এবং এটি ইমেলটিতে ব্যবহার করুন।

— নাথান ম্যাকআইনেস
সূত্র

2

আপনাকে এর সাথে কিছুটা সতর্ক থাকতে হবে যদিও ... এটি বোকা নয়। এটি জিনিসগুলির প্রশস্ততাগুলিকে বিশৃঙ্খলা করতে পারে, তাই প্রেরণের আগে সবকিছু পরীক্ষা করে দেখুন।

— নাথান ম্যাকইননেস

এই সমস্যাটি পেতে, আপনি প্রথমে jQuery দিয়ে পুরো ডকুমেন্টটি আড়াল করতে পারেন, তারপরে এই কোডটি চালান (এবং সম্ভবত লুকিয়ে রাখা) - এইভাবে আসল সিএসএস বিধিগুলি গণিত ফলাফলের পরিবর্তে পুনরুদ্ধার করা এবং প্রয়োগ করা হবে (উদাহরণস্বরূপ, প্রস্থগুলির জন্য))

— মজিক

1

আমি দেখতে পাই যে চিত্র ম্যাপিংটি বেশ ভালভাবে কাজ করে। আপনার যদি কোনও শিরোনাম বা পাদলেখ রয়েছে যা চিত্রগুলি নিশ্চিত হয়ে থাকে যে আপনি একটি বিজিকলার = "ফাঁকা পূরণ করুন" প্রয়োগ করেছেন কারণ বেশিরভাগ ক্ষেত্রে চিত্রটি লোড করবে না এবং আপনি একটি স্বচ্ছ শিরোনাম রেখে চলে যাবেন। আপনি যদি কমপক্ষে এমন কোনও রঙ নির্ধারণ করেন যা ইমেলের সমস্ত অনুভূতির সাথে কাজ করে তবে এটি ব্যবহারকারীর জন্য কম ধাক্কা হবে। কোনও স্টাইলিং শীট চেষ্টা ও ব্যবহার করবেন না। সিএসএস বা আদৌ! শুধু এড়ানো।

আপনি কোনও শব্দ বা ভাগ করা গুগল ডক থেকে সামগ্রী অনুলিপি করছেন কিনা তা নির্ভর করে (কমান্ড + এফ) সমস্ত (') এবং (") সন্ধান করুন এবং সেগুলি আপনার সম্পাদনা সফ্টওয়্যার (বিশেষত ড্রেমউইভার) এর মধ্যে প্রতিস্থাপন করুন কারণ তারা কোড হিসাবে প্রদর্শিত হবে এবং এটা ঠিক ভাল না।

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

প্রতিটি দিকের 15px বোর্ডার (ফটো ব্যাকগ্রাউন্ড স্বচ্ছ করুন এবং পিএনজি 24 হিসাবে সংরক্ষণ করুন) এর সাথে ফটোশপের মধ্যে সমস্ত চিত্র সম্পাদনা বিবেচনা করুন। কখনও কখনও ইমেল ক্লায়েন্টগুলি এমন কোনও প্যাডিং শৈলীগুলি পড়ে না যা আপনি চিত্রগুলিতে প্রয়োগ করেন যাতে এটি কোনও অদ্ভুত বিন্যাস এড়ায়!

এছাড়াও আমি লিংকের নীচে লাইনটি বিশেষত বিরক্তিকর দেখতে পেয়েছি তাই যদি আপনি <শৈলী = "পাঠ্য-সজ্জা: কিছুই নয়; রঙ: # আপনি এখানে যে রঙ চান!" > এটি লাইনটি সরিয়ে দেবে এবং আপনাকে পছন্দসই চেহারা দেবে।

এমন অনেক কিছুই আছে যা সমস্ত চেহারা এবং অনুভূতির সাথে সত্যই গণ্ডগোল করতে পারে।

— স্টিফেন
সূত্র