Email Marketing & AutomationVidio Ahịa & Ahịa

Ịghọta ihe ịma aka (na nkụda mmụọ) nke HTML Email Design

If you open up a content management system to build web pages, it’s a pretty simple process. Modern web browsers support HTML, CSS, and JavaScript to strict web standards. And they’re just a handful of browsers that designers need to worry about. There are exceptions, of course… and some simple workarounds or functions specific to those browsers.

Because of the overall standards, it’s straightforward to develop page builders in content management systems. Browsers comply with HTML5, CSS, and JavaScript… and developers can build incredibly robust solutions to create web pages that are responsive to devices and consistent across browsers. Two decades ago, virtually every web designer used desktop software to develop web pages. Now, it’s pretty uncommon for a web designer to develop a web page – more often than not, they’re developing templates and using editors in content systems to fill in the content. Website editors are fantastic.

Mana ndị editọ email nọ n'azụ. Nke a bụ ihe kpatara…

Ịmepụta ozi ịntanetị HTML dị mgbagwoju anya karịa maka weebụsaịtị

If your company wants a beautiful HTML email designed, the process is exponentially more complex than building out a web page for several reasons:

  • Enweghị ụkpụrụ – There is NO strict adherence to web standards by email clients that display HTML email. Virtually every email client and every version of every email client acts differently. Some will honor CSS, external fonts, and modern HTML. Others honor some inline styling, only display a collection of fonts, and ignore everything but table-driven structures. It’s quite ridiculous that no one is working on this issue. As a result, designing templates that render across clients and devices consistently has become big business and can be quite expensive.
  • Nchekwa ndị ahịa email – Recently, Apple Mail updated to block all images in HTML emails by default that are not embedded in the email. You either give permission to load them an email at a time or have to enable the settings to disable this setting. Along with email client security settings, there are also corporate settings.
  • Nchekwa IT - Ndị otu IT gị nwere ike ibunye iwu siri ike maka ihe enwere ike ịsụgharị na email. Ọ bụrụ na onyonyo gị, dịka ọmụmaatụ, sitere na ngalaba akọwapụtara nke na-edoghị akwụkwọ ọcha na firewall ụlọ ọrụ, onyonyo agaghị egosi na email gị. Mgbe ụfọdụ, anyị na-ebupụta ozi-e ma webata foto niile dị na sava ụlọ ọrụ ka ndị ọrụ nke ha nwee ike ịhụ foto a.
  • Ndị Na-enye Ọrụ Email - Iji mee ka ihe ka njọ, ndị na-ewu email na-enye ọrụ email (ESPs) actually introduce problems rather than constrain them. While they promote their editor is What You See Is What You Get (WYSIWYG), the opposite is often true with email design. You’ll preview the email in their platform, and the recipient will see all the design problems. Companies often unknowingly opt for a feature-rich editor instead of a locked-down one, thinking one has more features. The opposite is true… if you want emails that render consistently across all email clients, the simpler, the better, because less can go wrong.
  • Ime onye ahịa email – Hundreds of email clients render HTML differently across desktops, apps, mobile devices, and webmail clients. While your nifty text editor on your email service provider may have a setting to put a heading in your email, the padding, margins, line height, and font size may differ for every email client. As a result, you have to dumb down the HTML and code every single element differently (see the example below) – and often write in exceptions that are email client-specific – to get an email to render consistently. There’s no simple block types, you have to do table-driven layouts that are the equivalent of building for the web thirty years ago. It’s why any new layout requires both development and cross-email client and device testing. What you see in your inbox may be totally different what I see in my inbox. That’s why rendering tools like Email na Acid or Litmus bụ ihe dị mkpa iji hụ na atụmatụ ọhụrụ gị na-arụ ọrụ n'ofe ndị ahịa email niile. Nke a bụ ndepụta dị mkpirikpi nke ndị ahịa email na-ewu ewu na injin nrụpụta ha:
    • Apple Mail, Outlook maka Mac, Android Mail na iOS Mail iji WebKit.
    • Outlook 2000, 2002 na 2003 na-eji internet Explorer.
    • Outlook 2007, 2010 na 2013 na-eji Okwu Microsoft (ee, Okwu!).
    • Ndị ahịa webụmail na-eji injin ihe nchọgharị ha dị iche iche (dịka ọmụmaatụ, Safari na-eji WebKit na Chrome na-eji Blink).

Ọmụmaatụ HTML maka Weebụ Vs. Email

Ọ bụrụ na ịchọrọ ịma atụ nke na-egosi mgbagwoju anya nke imepụta na email na webụ, nke a bụ ihe atụ zuru oke sitere na akụkọ Mailbakery. 19 Nnukwu Ọdịiche Dị n'etiti Email na Web HTML:

Email HTML

We must build a series of tables incorporating all the inline styling necessary to place the button properly and ensure it looks good across email clients. An accompanying style tag will also be at the top of this email to incorporate the classes.

<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>

Web HTML

Anyị nwere ike iji ụdị mpempe akwụkwọ mpụga nwere klaasị iji kọwaa ikpe, nhazi, agba na nha mkpado arịlịka nke na-egosi dị ka bọtịnụ.

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

Otu esi zere nsogbu imewe email

Enwere ike zere nsogbu imewe email site na ịgbaso usoro dị mma:

  1. Nnwale template – Understanding the email clients your subscribers utilize and ensuring that your HTML email is fully tested across mobile and desktop is critical before deploying any template. We can design an email literally from a Photoshop layout… but slicing and dicing it into a table-driven, cross-email client is essential to deploying email designs that are optimal and consistent.
  2. Nnwale ime - Ozugbo emebere template gị ma nwalee ya, ekwesịrị iziga ya na ndepụta mkpụrụ dị n'ime ụlọ ọrụ iji nyochaa ma kwado ya. I nwedịrị ike ịmalite site na obere ndị mmadụ nwere oke iji buru ụzọ hụ na enweghị firewall ma ọ bụ okwu nchekwa metụtara inye email n'ime. Ọ bụrụ na nke a na-ewulite ọmụmaatụ na onye na-eweta ọrụ email ọhụrụ, ị nwere ike ịhụ ụfọdụ nzacha ma ọ bụ igbochi nsogbu metụtara ọbụna ịnweta email gị na igbe mbata.
  3. Ụdị ụdịdị – Agbanwela gị layouts ma ọ bụ aghụghọ na-enweghị ịrụ ọrụ na a ọhụrụ ụdị gị template nwere ike chepụta, nke ọma nwale, na ibugharị. Ọtụtụ azụmaahịa na-ahụ n'anya na-esetịpụ otu oge maka mkpọsa ọ bụla… mana nke ahụ chọrọ ka emebere email ọ bụla, mepụta ma bufee ya maka mkpọsa ọ bụla. Nke a na-agbakwụnye ọtụtụ oge na usoro ịzụ ahịa email n'ime. Ma, ị nwere ike ghara ịghọta ihe ihe dị na email gị na-arụ ọrụ nke ọma karịa ihe ndị na-abụghị. Nkwenye abụghị naanị ụzọ isi mee ka usoro ahụ dị mfe, ọ dịkwa mkpa maka omume nke ndị debanyere aha gị.
  4. Mwepu ndị na-eweta ọrụ email - Ihe fọrọ nke nta ka ọ bụrụ ndị na-eweta email ọ bụla nwere ụzọ isi rụọ ọrụ na nsogbu ndị na-emepụta email ha na-ewebata. Anyị nwere ike na-agbakwunye raw CSS na akaụntụ - ma ọ bụ ọbụna nwee ngọngọ ọdịnaya nke a ga-etinye na email ọ bụla - ka ụlọ ọrụ ahụ jiri nchịkọta email arụnyere arụnyere ma ghara ime ka ọ mebie nhazi nke email gị. N'ezie, nke ahụ nwere ike ịchọ ụfọdụ ọzụzụ na njikwa usoro iji wepụta usoro ndị ahụ iji hụ na emezuru ha. Ma ọ bụ - ị nwere ike ịchọrọ ịmepụta imewe email gị na ngwọta nke egosipụtara na ọ na-arụ ọrụ n'ofe ndị ahịa na ngwaọrụ, wee madoghachi ya na ndị na-eweta ọrụ email gị.

Ngwa imewe email

N'ihi na nyiwe ọrụ email arụọla ọrụ na-adịghị mma n'ịrụpụta na idowe ndị ahịa ahịa na ngwaọrụ ndị na-ewu ụlọ mgbe niile, ọtụtụ nnukwu nyiwe abatala n'ahịa. Otu anyị ji ọtụtụ ihe bụ Stripo.

Stripo abụghị naanị onye na-ewu email, ha nwekwara ọbá akwụkwọ karịrị ndebiri 900 nke enwere ike ibubata ngwa ngwa. Ozugbo ị chepụtara email ahụ, ị ​​​​nwere ike izipu ozi na 60+ ESPs, yana ndị ahịa email, gụnyere Intuit Mailchimp, HubSpot, mgbasa Ozi Nyochaa, AWeber, eSputnik, Outlook, na Gmail. Best of all Stripo templates come with the email rendering tests included so you can ensure they’ve been tested and work consistently across over 40 email clients.

Nbanye na Stripo Editor ngosi

Douglas Karr

Douglas Karr bụ CMO Mepee ihe ọmụma na onye nchoputa nke Martech Zone. Douglas enyerela ọtụtụ mmalite MarTech aka nke ọma, nyere aka n'ịrụsi ọrụ ike nke ihe karịrị ijeri $ 5 na nnweta na ntinye ego nke Martech, ma na-aga n'ihu na-enyere ụlọ ọrụ aka n'imejuputa na imezi usoro ahịa na ahịa ha. Douglas bụ mgbanwe dijitalụ ama ama na mba ụwa na ọkachamara MarTech na ọkà okwu. Douglas bụkwa onye odee bipụtara nke ndu Dummie na akwụkwọ ndu azụmaahịa.

njikọ Articles

Gaa na bọtịnụ n'elu
nso

Achọpụtara ihe mgbochi

Martech Zone nwere ike ịnye gị ọdịnaya a n'efu n'ihi na anyị na-enweta saịtị anyị site na ego mgbasa ozi, njikọ ndị mmekọ, na nkwado. Ọ ga-amasị anyị ma ị ga-ewepụ ihe mgbochi mgbasa ozi gị ka ị na-elele saịtị anyị.