9 trikova za dizajn Perfect HTML Newsletter

E-mail newsletter je savršen način da ostanete u kontaktu sa svojim klijentima ili sljedbenicima. Često će vaša tvrtka ili web-lokacija imati brojna ažuriranja proizvoda ili moguće nadolazeće događaje koje želite podijeliti. U vaše blogove ili struje društvenih medija uvijek je moguće objavljivati nove informacije, ali vaša publika može ići samo toliko daleko da vas dobije. U ovom slučaju e-pošta sigurno nije mrtva tehnologija, tek neiskorišteni potencijal.

Proces stvaranja i slanja biltena mnogo je lakši nego što se može misliti, ali za izradu prilagođenog predloška i izradu vlastitog koda - to može potrajati malo duže.

Sastavili smo neke fantastične savjete kako biste dizajnirali visokokvalitetne HTML biltene kao nikad prije. Čak i ako ste početnik u temi, sigurno ćete pronaći neke neprocjenjive informacije da biste započeli proces e-mail marketinga.

Ciljevi biltena

Prije nego što uđemo u aspekte dizajna, trebali bismo pojasniti vašu svrhu izrade newslettera. Ovisno o vrsti web-lokacije koju pokrećete, informacije koje se nalaze u vašem biltenu mogu se dramatično razlikovati od drugih, ali osnovna svrha biltena je pružiti praktična ažuriranja izravno u pristiglu poštu.

Teški korisnici Interneta vjerojatno će provjeriti svoju e-poštu više od dva puta dnevno. Čak i oni koji su stalno zaposleni odvojit će vrijeme da prođu kroz svoje poruke barem jednom dnevno. Ovo je pravo vrijeme uhvatite pozornost čak i bez potrebe za posjetom vašoj web-lokaciji. Čak i ako nitko ne klikne na vaše veze, informacija je još primili, što je izvrsno za izgradnju robne marke.

Razmotrite neke od tema koje biste trebali ponuditi u svom dizajnu. Uključujete li veze za prijavu za svoju uslugu; moguće blogove ili najnovije objavljene članke na vašoj web-lokaciji? Izgled Vašeg biltena odrazit će se kako želite da vaši čitatelji reagiraju, ali naposljetku tražite da zainteresirate i prođete kroz neke zanimljive informacije..

1. Koristite tablice u vašim izgledima

Ovo se može činiti pomalo kontradiktornim u odnosu na današnje moderne internetske standarde, ali e-mailovi su još uvijek arhaični u njihovim rendering motorima, tako da morate graditi prema starijim modelima. Nažalost, stolovi su najlakši način da sve funkcionira ispravno među različitim klijentima e-pošte. Ovisno o Vašem znanju o izgradnji rasporeda na temelju tablica, to bi zapravo moglo biti dobra vijest!

Također se možete zapitati zašto div i drugi blok elementi nisu tako dobra ideja. Većina klijenata e-pošte jesu izgrađen kako bi uklonio sve strane CSS-e sadržaj. To znači da nećete moći koristiti mnogo toga osim ugrađeni CSS (pa čak i puna podrška je loša). Klijenti kao što su Microsoft Outlook 2007 i Google Gmail imaju vrlo slabu podršku za plutajuće elemente i izravno pozicioniranje.

Najbolje bi bilo rješenje gniježite više tablica jedna u drugu. Obloge i margine nisu postavljene na određenu ljestvicu između mnogih klijenata e-pošte. To je razlog da se nastavimo koristiti širina = „vrijednost” na svim elementima ćelije tablice. One će uvijek prikazivati istu širinu bez obzira koji klijent za e-poštu čitaju, pa je mnogo sigurniji i dosljedniji za postavljanje padova i margina pomoću praznih ćelija tablice.

2. Pozicioniranje fiksne širine

Imate nekoliko opcija prilikom izrade nacrta rasporeda biltena, no najbolja opcija za praćenje je da biste postavili fiksnu širinu tablice koja sadrži. Postoji mnogo različitih rezolucija monitora - nećete moći zadovoljiti sve. Ako nemate određene elemente sa statičkim širinama, uvijek možete koristiti širina = "100%" na tablici koja sadrži. To će omogućiti vašem sadržaju da popuni cijelu širinu svih klijenata e-pošte.

Međutim, za mnoge je ova metoda malo previše slaba. Konstruktivni bilteni će u većini slučajeva zahtijevati fiksnu širinu, osobito ako koristite bannere i slike određene veličine. Preporučujem rad s 500px - maksimalna širina dokumenta 600px. Horizontalna veličina zaslona iPhonea i nekih BlackBerry modela ograničena je na 320 piksela, tako da će čak i na 500px predložak e-pošte biti smanjen kako bi se ispravno uklopio.

S obzirom na to da mnogi mobilni korisnici odlučuju gledati e-poštu bez HTML-a, to ne bi trebalo biti veliki problem. Korisnici stolnih i webmail klijenata vjerojatno će doživjeti sličnu postavku bez obzira na operativni sustav koji koriste. Kad sumnjaš stvorite nekoliko dizajna predložaka i odaberite one koje vam se najviše sviđaju!

3. Jedinice piksela

Ako ne koristite fluidne elemente u biltenu, vjerojatno ćete morati odrediti nekoliko stvari. Pokušajte ga zadržati piksela (px) nego u drugoj vrsti jedinice. Postoci se lako mogu pomiješati s mnogim klijentima web-pošte i prozorima softvera. S manjim brojem elemenata stranice, rasporedi tekućina mogu biti neozlijeđeni, premda s nekoliko bugova.

Ali pikseli su uvijek sigurni. Radeći unutar 600px maksimalnog ograničenja širine, zapravo možete smjestiti puno sadržaja unutra. Ekspozicija je lakša ako podijelite svoje rasporede u dva ili tri stupca i uvijek napišite veličinu u pikselima. Jedina iznimka može biti veličine fonta gdje EMS može bolje podržati vaše čitatelje, ali em dimenzioniranje će se razlikovati na sličan način kao i postoci radi jednostavnosti, držite se poravnanja temeljenih na pikselima.

4. Mogućnosti u CSS-u

Može izgledati da dizajn e-pošte uništava korištenje CSS stilova. Iako postoji mnogo nepodržanih značajki, CSS je u mnogim slučajevima još uvijek savršeno prihvatljiv. Monitor kampanje ima prekrasnu tablicu podržanih svojstava CSS-a na popisu klijenata e-pošte. Sve će podržavati osnove poput font-family i font-style, tako da možete preskočiti ako želite.

Budite oprezni u pogledu stilova fonta kako ne biste previše udaljili granice. Ako vam je neugodno s inline stilovima, uvijek je moguće koristiti oznaku HTML fonta iako je zastarjela. Ako ste CSS dizajner, ne trebate zatvarati sustav, ali bilo koje kratkotrajno CSS kodiranje može rezultirati pogrešnim dizajnom. Kao primjer font: 12px / 14px Arial, sans-serif; stenogram može uštedjeti mnogo prostora, ali nije u potpunosti prihvaćen za dizajn e-pošte, čak i kada se koristi s ugrađenim stilovima.

Čak i vaš izbor boja treba ispisati dugotrajno. Hex boje kao što su #ccc ili # e3f mora biti napisan u cijelosti kao #cccccc ili # ee33ff, odnosno. Ako možete izgraditi ono što vam je potrebno bez CSS-a preporučio bih taj put, ali nemojte se u potpunosti otarasiti CSS-a u dizajnu e-pošte jer je suprotno popularnom uvjerenju podržan u većini slučajeva.

5. Sidreni linkovi Najbolje prakse

Sigurno želite uključiti neke linkove u vaš newsletter. To mogu biti izlazne veze na druge stranice na webu ili možda veze koje vode do najpopularnijih stranica na vašoj web-lokaciji. Osim toga, većina podnožja sadržavat će vezu za poništavanje pretplate za vaše čitatelje da se isključe iz procesa e-pošte, ali kako trebate upravljati svim tim vezama u svom dizajnu?

Dobro to bi trebalo biti navedeno prvi da e-mail klijenti su vrlo izbirljiv sa svojim nacrtima. Mnogi će odlučiti prepisati vaše stilove veza, čak i sa ugrađenim CSS-om. Dobar je trik uključuju inline boju i dodatnu oznaku raspona unutar sidrenog elementa. Ako su boja i stil vaših veza važni za cjelokupni dizajn, htjet ćete poduzeti dodatne mjere opreza. U nastavku sam dodao primjer malog koda:

neki tekst veze

Efekti lebdjenja su nisu podržani u programima Outlook 2007/2010, Gmail, iOS ili Android. Možda i dalje želite uključiti a: hover stil za sve podržavajuće klijente: Outlook 2000/2003, Hotmail, Apple Mail i Yahoo! mail, ali osobno ne vidim mnogo koristi u djelomičnom korisničkom iskustvu, budući da sidreni selektori nisu jako podržani samo nude 2-3 boje veze koristiti tijekom cijelog dizajna.

Kao pretpostavka korisnici će također očekivati da se vaši linkovi otvaraju u novoj kartici ili prozoru. U idealnom slučaju target = "_ blank" atribut bi trebao biti dovoljan za sve preglednike da prepoznaju tu funkcionalnost, a uključivanje ovog atributa na vaše sidrene veze ne smije negativno utjecati na softver e-pošte kao što je Lotus Notes ili Outlook..

6. Testirajte u svim većim klijentima

Nedavna studija najpopularnijih klijenata e-pošte (koju je proveo Monitor kampanje) pokazuje deset najpopularnijih klijenata e-pošte u protekloj godini. To može izgledati pomalo zamorno, ali dizajneri trebali bi ući u naviku provjeravati svoje biltene na svim glavnim klijentima e-pošte, barem na nekim od uobičajenih klijenata kao što su Gmail, Hotmail ili Yahoo! pošta.

To ne uključuje samo web-poštu, nego i operativni softver na Mac OS X i Windows. Također prema njihovom dijagramu iOS Mail i Android u posljednjih nekoliko godina su obojica skočili u top 10 listu. U stvari iPhone, iPod Touch i iPad Mail svrstavaju # 2 najpopularnije pravo u programu Outlook! Nažalost, ne postoji način da ih testirate bez posjedovanja jednog od uređaja - pa ćete morati podmiriti s drugim opcijama.

Jedan bug s mobilnom podrškom dolazi u mnogim iPhone i Android modelima. Često će se prikazivati mobilna e-pošta promijenite veličinu teksta unutar predloška. To ne može mnogo utjecati na vaš dizajn, ali to može biti iritantno za neke čitatelje. Korištenje CSS-a -webkit-text-size-adjust: none;, htjeti osigurati ravnomjernu veličinu teksta u svim raščlanjivanjem motora bez potrebe za testiranjem.

Ako poznajete prijatelje ili kolege koji koriste alternativni softver, možda ćete htjeti zatražite njihovu pomoć pri testiranju newslettera. Možete i vi pošaljite im kopiju e-pošte provjeriti na svom uređaju ili posudite uređaj aktivno očistiti kodiranje bugova. Srećom, Outlook nudi verziju za Mac instalaciju, tako da ne morate tražiti korisnika Windowsa za te optimizacije, ali kada je riječ o Lotus Notesu ili Windows Mailu, možda vam nije sretno.

Alternativa je to platiti rješenje kao što je Pretpregled moje e-pošte, nažalost oni ne nude besplatne demo račune, ali njihova je usluga dobro poznata jer nudi izvrsne preglede vašeg dizajna. E-pošta na Acid je slična usluga koja nudi besplatan račun, ali ne dopušta vam test na svim klijentima, koja vrsta poraza svrhu. Usluge mrežnog prikazivanja trebale bi biti korisne ako trebate dugoročno testirati mnoge predloške za newsletter bez korištenja alternativnih računala, no oni nisu temeljni, tako da nemojte stres ako ih ne možete sve testirati!

7. Uvijek nudite web-based prikaze

Čitatelji neće uvijek moći (ili biti voljni) gledati vašu e-poštu. Nuditi drugu verziju negdje na webu će dati osjećaj lakoće i kompatibilnosti. Taj se postupak ne može u potpunosti automatizirati ako ne želite uključiti a običan tekst verzija.

Ovako, ti bi skinite sve HTML oznake iz rasporeda biltena. Ne biste mogli uključiti veze ili stilove za bilo što. Sav sadržaj bi bio jednostavno biti postavljena kao obična tekstualna datoteka za čitatelje bez mogućnosti prikazivanja. Ovo je svakako dobra alternativa, ali kada nudite punu web verziju istog newslettera oduzima štetu učinjenu bilo kojom greškom u prikazivanju. Većina čitatelja će se prikazivati up-to-date web preglednik koji možete stil i izgraditi Vaš newsletter na i do savršenstva.

Kako ste postavili stranicu potpuno vaš izbor. Neke web stranice će posvetite cijeli post blogu dupliciranju sadržaja e-pošte, možda s nekim dodatne informacije. Drugi će stvorite zasebnu stranicu s glavne web-stranice bez izravnih veza u navigaciji. Ova metoda može biti korisna jer čitatelji neće biti ometani glavnim predloškom web-lokacije ili sadržajem bočne trake.

8. Dodavanje slikovnog sadržaja

Slike su još jedan razlog da svojim čitateljima ponudite web-rješenje. Prema zadanim postavkama, klijenti e-pošte postavljeni su da izvuku slike iz sadržaja. Ako je vaša adresa dodana na sigurnu listu, sve slike će biti prikazane prema zadanim postavkama, ali korisnik mora prihvatiti ovu postavku tako da sigurno nije jamstvo. Samo provjerite da slike nisu potrebne kao dio glavnog sadržaja, ali uključen kao dodatni dodatak za estetiku stranice.

Kada dođete do izvoza grafike, postoji nekoliko savjeta za izradu slika posebno za e-poštu. Želite uvijek postavite atribute širine i visine na svoj img oznake. Bez ovih specifikacija u redu, neki klijenti će iskriviti sadržaj slike. alt Oznaka će se također pokazati korisnom, tako da će posjetitelji znati prije nego što se učita sadržaj sadržaja slike.

Kao što je već spomenuto, pozicioniranje slika u e-pošti može biti teško. Izbjegavajte korištenje plovaka pod svaku cijenu! Slika align = "left" atribut će raditi puno bolje, ili alternativno mapiranje točnih ćelija tablice kako bi se slike smjestile uz gornju, lijevu ili desnu stranu biltena. Nećete biti u mogućnosti dobiti savršenu podudarnost s toliko mnogo klijenata (posebno mobilnih klijenata), ali optimizirajte svoje slike i zadržite male veličine datoteka za najbolje rezultate.

Što se tiče pohrane slika, preporučujemo da to učinite zadržite sve datoteke na vlastitom web-poslužitelju. To je bolja opcija umjesto korištenja drugog hosta slike ili prijenosa datoteka na online uslugu newslettera. Osim toga trebali biste odvojite sadržaj biltena od ostalih slika u strukturi mapa tako / Img / e ili / Img / e / 2011.

9. Izbjegavajte neželjenu mapu!

To je teško čuti, ali nisu svi klijenti e-pošte prijateljski prema biltenima. Svakog dana šalju se milijarde poruka e-pošte, a većina sadrži neželjeni ili zlonamjerni sadržaj, tako da su ove sigurnosne mjere ugrađene u Primljeno jasno za sigurnosne mjere opreza.

Međutim, kada je u pitanju Internet marketing, možete lako biti obeshrabreni vidjeti svoj najnoviji newsletter završiti s nešto posve bezvrijedno. Da biste smanjili šanse za ovo, trebali biste očistite svoj dizajn radi jednostavnosti. Nemojte napraviti dosadne slike ili raznijeti svoj naslovni tekst sa stotinama ključnih riječi.

Također pokušajte zadržite sadržaj kratak i na temu. Ne morate uključiti cijeli sadržaj za sve članke ili stranice. Umjesto dugog popisa pokušajte dodati rečenicu ili dvije s alternativnom vezom na svoju web-lokaciju. što je kraći vaš izgled e-pošte, to je vjerojatnije da će proći pregled spama.

Galerija dizajna biltena

Što bi bilo zabavno ako bi članak e-mail biltena bio bez nekih fantastičnih primjera? Postoji tona e-mail newsletter dizajna i predložaka za provjeru u Googleu. HTML Galerija e-pošte je vrlo popularan izvor inspiracije.

U nastavku sam prikazao snimke zaslona iz mnogih biltena u galeriji Kampanja Monitor. Nadam se da će ti sjajni rasporedi pružiti neke sjajne ideje za vlastiti dizajn.

Zabavite se dizajnirati svoje idealne biltene!

Upozorenje za tvrtke