2022.2

Nestingtables(puttingtablesintablecells)andapplyingCSSstylestoeachtablecelltomakethe
emaillookgoodonallscreensizesisaprecisionworkthatcanbeatediousanddemanding.Connect's
DesigneroffersthefollowingtoolstomakedesigningHTMLemaileasier.
Email templates: Slate and others
ThemostobvioussolutionofferedintheDesigneristouseoneofthetemplatesprovidedwiththe
Designer;see"CreatinganEmailtemplatewithaWizard"onpage475.Thelayoutofthesetemplates
hasbeentestedandproventolookgoodinanyemailclient,onanydeviceandscreensize.TheTables
inthesetemplatesarenested(putinsideanothertable)andtheyhavenovisibleborders,soreaders
won'tnoticethem.
Tip: ClicktheEdgesbuttononthetoolbartomakebordersofelementsvisibleontheDesigntab.
TheborderswillnotbevisibleonthePreviewtaborintheoutput.
Litmus
Thereareseveraltoolstopreviewhowemailwillberenderedonavarietyofclients.Werecommend
usingLitmus.SupportforLitmusisintegratedintotheDesigner;theSendTestEmaildialoghasan
optionto"SendtoLitmus".
Emmet
Emmetisapluginthatenablesthelightning-fastcreationofHTMLcodethoughtheuseofasimpleand
effectiveshortcutlanguage.TheEmmetfunctionalityisavailableintheHTMLandCSSsourceeditors
ofConnectDesigner.EmmettransformsabbreviationsforHTMLelementsandCSSpropertiestothe
respectivesourcecode.TheexpansionofabbreviationsisinvokedwiththeTabkey.
IntheSourcetaboftheWorkspace,youcouldforexampletypediv.row.Thisistheabbreviationfora
<div>elementwiththeclassrow.
OnpressingtheTabkey,thisabbreviationistransformedto:
<div class="row"></div>
ToquicklyenteratablewiththeID'green',onerow,andtwocellsinthatrow,type:
table#green>tr>td*2
OnpressingtheTabkey,thisistransformedto:
<table id="green">
<tr>
<td></td>
<td></td>
</tr>
</table>
Page 473