We have moved.

Don’t worry, we’ll still be posting. But at the new and improved site. Here: http://team-email.co.uk/

Advertisements

3 easy steps to speed up your email coding with Dreamweaver snippets.

After attending and speaking at Litmus’s Email Design Conference 2013 (which was amazing, by the way!) I was shocked to find out that many people don’t know about utilising the snippet tool within Dreamweaver to speed up their coding.

Because of this, I’m going to write a quick step-by-step guide on how to set up and use snippets.

F.A.Q’s

What is a snippet?
A snippet is simply a piece of predefined code stored in your Dreamweaver

Why do they help?
You can assign a keyboard shortcut to a snippet. For example I press CMD+1 and I get a table inserted for me with 600% width and my media queries class already on it.

How much do they help?
They shave minutes off your builds. Minutes add up to hours, hours add up to beer!

What version of Dreamweaver are you using?
I’m using Dreamweaver CS5 on a Mac, hopefully this works on other versions and operating systems.

Step 1. Write your code

To set up a snippet you’ll need to write out the code you want the snippet to be. For the purpose of this example I’ll be setting up a new snippet for you to refer back to. This is the code I’ll be setting up a snippet for:

Step 2. Create the snippet

Now you have your code created, you’ll need to highlight all of it, right click and click “Create New Snippet”

This will open the Snippet interface, fill in details similar to these:

Once you click “Ok” it’s all set up! Yay!

Step 3. Assigning a keyboard shortcut

In your right Dreamweaver toolbar you should be able to see Snippets. If you can’t go to Window -> Snippets to show them.

Right click the snippet you just set up and click “Edit Keyboard Shortcuts” which will bring up the following box (see below).

Select the snippet you want to assign the keyboard shortcut to and then click inside the “Press Key” field. In there press the keyboard shortcut you want to use. I’ll be using CMD+4.

Note: As you see below, you may have a message below the press key field saying a snippet is set up. Dreamweaver has some by default.

Finished!

Now, press your keyboard shortcut and your code will pop up! If you have any questions, concerns or run into any issues let me know in the comment section.