Kirrûbirra Email & OtomasyonVîdyoyên Kirrûbirr & Firotanê

Fêmkirina Zehmetkêşan (û Xemgîniyên) Sêwirana E-nameya HTML

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.

Lê edîtorên e-nameyê bi xemgînî li paş in. Li vir çima…

Sêwirana E-nameyên HTML-ê Ji Malperek Pir Tevlihevtir e

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

  • No Standards – 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.
  • Ewlekariya Client 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.
  • Ewlekariya IT - Tîma weya IT-ê dibe ku rêgezên hişk li ser tiştên ku bi rastî dikarin di e-nameyê de werin pêşkêş kirin bicîh bikin. Ger wêneyên we, ji bo nimûne, ji domainek taybetî têne ku di nav dîwarek pargîdanî de ne di navnîşa spî de ye, wêne bi tenê di e-nameya we de xuya nakin. Carinan, me neçar ma ku e-name pêşve bixin û hemî wêneyan li ser servera pargîdaniyê mêvandar bikin da ku karmendên wan bikarin wêneyan bibînin.
  • Pêşkêşkerên Karûbarê E-nameyê - Ji bo ku rewş xirabtir bibe, çêkerên e-nameyê ku pêşkêşkerên karûbarê e-nameyê (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.
  • Rendering Client 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 Li ser Acid or Lîtmus Pêdivî ye ku hûn pê ewle bibin ku sêwiranên weyên nû li hemî xerîdarên e-nameyê dixebitin. Li vir navnîşek kurt a xerîdarên e-nameyên populer û motorên vegotina wan hene:
    • Apple Mail, Outlook ji bo Mac, Android Mail û iOS Mail bikar tînin WebKit.
    • Outlook 2000, 2002 û 2003 bikar tînin Internet Explorer.
    • Outlook 2007, 2010 û 2013 bikar tînin Gotûbêja Microsoft (erê, Peyv!).
    • Xerîdarên Webmail motora geroka xwe ya têkildar bikar tînin (mînak, Safari WebKit û Chrome Blink bikar tîne).

Mînakek HTML-ê ji bo Web Vs. Email

Ger hûn mînakek dixwazin ku tevliheviya sêwirana e-nameyê li hember tevneyê diyar dike, li vir mînakek bêkêmasî ji gotara Mailbakery heye. 19 Cûdahiyên Mezin Di Navbera E-name û HTML-a Webê de:

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

Em dikarin şêwazek derveyî bi dersan re bikar bînin da ku rewş, rêzkirin, reng û mezinahiya tagek ankerê ku wekî bişkokek xuya dike diyar bikin.

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

Meriv çawa Pirsgirêkên Sêwirana E-nameyê Dûr Dike

Pirsgirêkên sêwirana e-nameyê bi şopandina pêvajoyek maqûl ve têne dûr kirin:

  1. Testkirina Şablon – 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. Testkirina Navxweyî - Gava ku şablonê we hate sêwirandin û ceribandin, divê ew ji navnîşek tovê navxweyî ya di nav rêxistinê de were şandin da ku vekolîn û pejirandin. Tewra dibe ku hûn bixwazin ku bi binkeyek pir tixûbdar a kesan dest pê bikin da ku pêşî pê ewle bibin ku pirsgirêkên dîwarê agir an ewlehiyê yên ku bi pêşkêşkirina e-nameyê di hundurê de ve girêdayî ne hene. Ger ev mînakek li ser pêşkêşkerek karûbarê e-nameyê ya nû ava dike, dibe ku hûn hin pirsgirêkên fîlterkirin an astengkirinê jî bibînin ku bi gihandina e-nameya xwe re jî di nav qutîkê de ne.
  3. Guhertoya Şablon – Bêyî ku li ser guhertoyek nû ya şablonê ku dikare were sêwirandin, bi rêkûpêk ceribandin û bicîh kirin bixebitin, sêwiran an sêwiranên xwe neguherînin. Pir karsazî ji bo her kampanyayê sêwiranên yekcar hez dikin… lê ji bo vê yekê hewce dike ku her e-name ji bo her kampanyayê were sêwirandin, pêşvebirin û bicîh kirin. Ev yek ton dem li pêvajoya kirrûbirra e-nameyê ya hundurîn zêde dike. Û, hûn xeternak in ku hûn fêm nekin ka kîjan hêmanên di e-nameya we de li ser kîjan hêmanan ne baş in. Lihevhatî ne tenê rêyek e ku pêvajoyê hêsantir dike, ew ji bo tevgera aboneyên we jî girîng e.
  4. Îstîsnayên Pêşkêşvanê Karûbarê E-nameyê - Bi rastî her pêşkêşvanê karûbarê e-nameyê amûrek heye ku li dora pirsgirêkên ku çêkerê e-nameya wan destnîşan dike bixebite. Em bi gelemperî dikarin CSS-a xav li hesabek zêde bikin - an jî tewra xwedan bloka naverokê ya ku divê di her e-nameyê de hebe - hebe da ku pargîdanî edîtorê e-nameya çêkirî bikar bîne û ew sêwirana e-nameya we neşikîne. Bê guman, dibe ku hin perwerdehî û kontrolkirina pêvajoyê hewce bike da ku wan gavan bicîh bike da ku pê ewle bibe. An jî - dibe ku hûn bi rastî tenê dixwazin sêwirana e-nameya xwe di çareseriyek ku tê îsbat kirin ku di nav xerîdar û cîhazan de dixebite pêşve bixin, dûv re wê dîsa li peydakiroxa karûbarê e-nameya xwe bixin.

Platformên Sêwirana E-nameyê

Ji ber ku platformên karûbarê e-nameyê di çêkirin û domandina çêkerên bi domdarî yên bi xerîdar û xaçerêyan de karekî qels kirine, hejmarek platformên mezin derketine bazarê. Yek ku me bi berfirehî bikar aniye ev e Stripo.

Stripo ne tenê çêkerek e-nameyê ye, di heman demê de pirtûkxaneyek ji zêdetirî 900 şablonan heye ku dikarin bi hêsanî werin import kirin. Gava ku hûn e-nameyê sêwirînin, hûn dikarin e-nameyê ji 60+ ESP, û xerîdarên e-nameyê re bişînin Intuit Mailchimp, HubSpot, Monitor kampanya, AWeber, eSputnik, Nîr, û 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.

Têkeve Demo Edîtorê Stripo

Douglas Karr

Douglas Karr CMO ya ye OpenINSIGHTS û damezrînerê ya Martech Zone. Douglas alîkariya bi dehan destpêkên serketî yên MarTech kir, di kirîn û veberhênanên Martech de zêdetirî 5 mîlyar dolar alîkarî kir, û di cîbicîkirin û otomatîkkirina stratejiyên firotanê û kirrûbirra xwe de alîkariya pargîdaniyan didomîne. Douglas veguherînek dîjîtal a navneteweyî û pispor û axaftvanek MarTech e. Douglas di heman demê de nivîskarek çapkirî ya rêberê Dummie û pirtûkek serokatiya karsaziyê ye.

Zimanî babet Related

Vegere ser topê
Nêzîkî

Adblock Hat Tesbîtkirin

Martech Zone dikare vê naverokê bê mesref ji we re peyda bike ji ber ku em malpera xwe bi dahata reklamê, girêdanên pêwendiyê, û sponsorgeriyê drav dikin. Dema ku hûn malpera me temaşe dikin, em ê spas bikin ger hûn bloka reklama xwe rakin.