Content Velocity: Creating an HTML Email with Photoshop and Dreamweaver

blogFeatImageMy Content Velocity lab at Summit 16 showed how quickly you can create an HTML email using Photoshop and Dreamweaver, using smart objects and layer comps. If you missed the lab, or want to recap on the content then you now can, as the content is available for you to work through.

Get the Files and Assets:

Download the files from Creative Cloud to your own account:

http://adobe.ly/21RR924

Get the library assets:

http://adobe.ly/21RSPbR

Use the Workbook:

The lab workbook is available via Publish Online: http://adobe.ly/1TRpGqY where you can also download the file as a PDF if you desire.

Email Templates In Dreamweaver CC

Dreamweaver started to lead the way as a tool for building with standards-compliant code several years ago, and deprecated layout mode in CS4 that made it easier to work with table-based design—something that needed to finally be banished from the web. One of the downsides to this though was that it meant to produce email templates that you really needed to get mucky with code, and a lot of (non-web) designers—the poor souls that had to produce email templates—didn’t want to go anywhere near that in if they could avoid it.

The good news is that Dreamweaver CC2015 recently introduced starter templates for HTML email, and they’re pretty-well thought out, and easy to use.

Finding The Starter Templates

step_0From the Welcome Screen that should appear when you launch Dreamweaver, you’ll see Starter Templates in the centre column, at the bottom, click there and you’ll be taken through to the new document dialog, with templates preselected—you can also just launch the new document dialog if you already have a file open and select the Starter Templates option from there.

step_1Click on Email templates and then choose a template:

  • Basic—a “mobile first” approach that is easy to implement, using a single column with large text and CTA’s that will look good on screens of all sizes.
  • Fluid—a reflowable approach that is roughly equivalent to what is known as a “liquid layout” in web-speak. Works best perhaps for text-heavy layouts as they don’t have so much control over the relationship between text and imagery.
  • Hybrid
  • Responsive—uses CSS media queries to change the layout of email, adjusting the size of images and text, and sometimes even selectively hiding or swapping content between differing device sizes.

Your document is generated, ready for your modifications. The code itself is commented throughout, so you’ll know get an idea of what it does; if you’re not overly familiar with working with code, you’ll find that very useful.step_2

Working with the Templates

It’s a good idea perhaps to switch to the Design workspace (the workspace switcher should be at the top-right of the interface, in the Application bar) as this will give you ready access to the Properties Inspector—handy for changing things like links, etc. without going into the code.

The text is straightforward—simply replacer the placeholder text with your own. Making links in the text is really easy; simply select the word(s) you’d like to be the link and a widget will appear (if you’re in Live view – otherwise use the Properties Inspector)—click the link icon and enter the target address into the textfielstep8

The image placeholders can be swapped out for your—remotely hosted (see the boxout below if you’re new to HTML email)—images by clicking the “hot dog” menu to the left of the image tag (as shown below) and then entering the url of your images into the textfield, in the pop-up bubble. It’s also where you can enter the alt text for those who read their email with images turned off, which is a best-practice assumption to make in any event.step_3

step7

Quick Sidenote for HTML Email Newbies

Images used in HTML email have to be hosted on a publicly-accessible server, so that when the email is opened by your reader, their device knows where to fetch the image from to display it.  Consider a content-delivery network (CDN) if you’re going to be sending a lot of mails—otherwise your own domain may be an option.

Gotcha

You may still need to copy your code out and run it through an inliner tool—just search on something like “HTML inline tool email” and you’ll find that there are plenty to choose from—to prep your email for clients like gmail, but that is no big deal—maybe if this catches on the DW team will look at including that in the future…

Dynamic Holiday Greetings with Illustrator

aiDynamicGreetingI’d like to begin this tut with a question:

What would you do if [your boss | a client] gave you a list of greetings, first names & family names then asked you to produce 1000 personalised versions of a graphic like the one above, with that information?

If your answer goes like this:

  1. Create the basic design
  2. Type in the first set of information
  3. Export it as required
  4. Go to Step 2, add next set of information (repeat until complete)

…then this is the post for you—we’re going to be working with that kind of a scenario (but on a significantly smaller scale—we’re not doing 1000 although you could if you wanted).

Get the File

There is a file available for you to download to work along with this tut here: http://adobe.ly/1YkcJc2 but you can always build your own—the previous tutorial showed how to create the sparkly text shown above if you want to make your own.

Make The Text Dynamic

Now that we have our dynamically-capable text, with an appearance that will redraw to whatever the text is, we need to actually make it dynamic; open the Variables Panel (Window > Variables) and then click on your first piece of text—the greeting—with the Selection Tool. At the bottom of the panel you’ll see a range of icons—click on the first one makes to make that line of text dynamic, then repeat the process for the next two lines.step1

The variables associated with the text are what identifies them to any script or action and will by default be named simply as Variable 1, Variable 2, etc. step2This doesn’t make a lot of sense to a developer if you were to hand off the job of creating any dynamic code to them, and it won’t make a whole bunch of sense to you if you left it for any amount of time, so we’ll rename each one to something more meaningful—you can do that by simply double-clicking the T icon next to the variable name in the panel.step3My variable names were:

  • greeting
  • fName—for first name
  • lName—for last name step4

!XML ID’s!

There is a naming convention for variables, that you need to be aware of if you plan on connecting your document to anything outside of Illustrator (which we will be doing shortly) so always keep in mind that names must:

  1. Always begin with a letter: a-z, no special symbols except an underscore or colon
  2. Never contain spaces

Capture a Data Set

We are now going to create a snapshot of our variable names as a Data Set. Go to the flyout menu at the top-right of the Variables Panel and choose the Capture Data Set option.step4aGive the Data Set a meaningful name; in this example it is called “baseSet”

step4b

Save a Variable Library

The next step is to export an XML file that contains our variables, so that we can populate this with more data. Variable libraries enable designers and developers to coordinate their work together and on larger projects we would hand off this file to such a person, perhaps. If you had a huge CSV of information for example, then a developer could use tools and languages like XSLT to transform that information into data that Illustrator could use and could write a script that would render the final artwork. There are many possibilities, but for now we are going to export the library and then modify it to suit our much simpler needs. Return to the flyout menu at the top-right of the Variables Panel and this time choose Save Variable Library… from the menu; choose a location for it—maybe in the same folder as the Illustrator file would be a good idea.step5

Edit The XML

Now for the fun bit—getting our hands dirty with a smidgeon of code—and don’t worry, it’s going to be really easy! This can be achieved in a plain text editor, but if you’re a full CC subscriber, then you’ll have Dreamweaver, which is just perfect for us as it will make it easy to see the code clearly, with syntax highlighting to identify the different bits.

Open your XML file in Dreamweaver, and it should look something like this (don’t worry if the colours aren’t exactly the same, there are a few different themes to get the colours the way that is best for you):step6You don’t need to worry about the majority of this code as it just defines the data and the document; the bit you’re looking for will be your sample Data Set that looks something like this:

<v:sampleDataSet dataSetName="baseSet">
<greeting>
<p>Season’s Greetings</p>
</greeting>
<fName>
<p>Personas</p>
</fName>
<lName>
<p>WithLongLastNames</p>
</lName>
</v:sampleDataSet>

All you need to do here is to select that little structure—be careful not to miss anything out, especially the chevrons <> at the ends—and copy it to your clipboard. Now modify each dat set name and then each piece of text enclosed in <p>tags (shown in bold, below) like this:

<v:sampleDataSet dataSetName="set1">
<greeting>
<p>Happy Holidays</p>
</greeting>
<fName>
<p>Chloe</p>
</fName>
<lName>
<p>Martinez</p>
</lName>
</v:sampleDataSet>

Then click after the closing chevron at the end of the line that says </v:sampleDataSet>, add in a new line and paste down your copied information, then modify that, and rinse and repeat as many times as you like—don’t forget to change the name of each data set in turn. Your end result should look a bit like this simple example.

<v:sampleDataSet dataSetName="set1">
<greeting>
<p>Happy Holidays</p>
</greeting>
<fName>
<p>Chloe</p>
</fName>
<lName>
<p>Martinez</p>
</lName>
</v:sampleDataSet>
<v:sampleDataSet dataSetName="set2">
<greeting>
<p>Merry Christmas</p>
</greeting>
<fName>
<p>Zachary</p>
</fName>
<lName>
<p>Whitehall-Jones</p>
</lName>
</v:sampleDataSet>
<v:sampleDataSet dataSetName="set3">
<greeting>
<p>Happy Holidays</p>
</greeting>
<fName>
<p>Suzanne</p>
</fName>
<lName>
<p>Veilkenheimer</p>
</lName>
</v:sampleDataSet>

Check two small things before we save the file:

Immediately before your data sets there should be a line like:
<v:sampleDataSets xmlns="&ns_custom;" xmlns:v="&ns_vars;">
and immediately after there should be a line like:
</v:sampleDataSets> note that it is in the plural.step7

Save the file and return to Illustrator.

Load the Variable Library

Return once again to the flyout menu at the top-right of the Variables Panel and this time choose the Load Variable Library… option; navigate to your modified file and select it. You should now be able to move between data sets using the drop-down at the top of the panel. Your artwork should modify each time to reflect your choices.step9

It’s awesome, the first time you actually make artwork that responds to code because it really shows the potential and power of a product like Illustrator, and our World is changing to one where personalisation of design is becoming very prominent, so it’s really worth the investment of your time in a little learning here.

As mentioned earlier, a developer could make short work of converting your data to something Illustrator could ingest and could also write a script that could automate the rest of the process too. As I’m making the assumption that you’re learning this in isolation, we are going to use a scaled-down version for our output, using actions.

Build The Action

Open up the Actions Panel from the Window menu, and click on the small folder icon at the bottom-right of the panel to create a new actions folder—making it easier to find—and call it something lie automation (although Ihave called mine BlogDemo in the image below as I already have my own automation folder).step10

Click the icon to the left of the trash can at the bottom of the panel, and give your action a name. step11As soon as you exit the dialog then you will be in Record mode so anything you do will be recorded to the action. Go to File > Export… and choose JPG as the export type. Choose your options in the next screen and save out a file to somewhere; once that has completed, click the square icon at the bottom of the Actions Panel to stop the recording; your action should be ready for use.

Batch Process

Now for the clever stuff. Go to the flyout menu at the top-right of the Actions Panel and choose the Batch… option.step12

  1. In the dialog, choose your action.
  2. In the Source option, choose Data Sets
  3. In the Destination options, select Override Action “Export” Commands
  4. Click OK and the action should start running, working through each data set in turn and creating a new image each time
    step13

 

Proudly powered by WordPress | Theme: Baskerville 2 by Anders Noren.

Up ↑