That: </h1>
t
ode This, No
<h1> C

10 

Do’s & Don’ts

For Learning HTML.
When you’re a marketer,
coding can feel like a
foreign language …
… but a language that’s
essential to your job.
That’s why we want to share …
10 

Do’s &
Don’ts

For Marketers

HACKING HTML.
Ready to learn?
Let’s go …
Don’t

Build your own email
templates from scratch.

1
Creating an email template
from scratch could translate
differently, depending on
where it’s delivered.
Creating an email template
from scratch could translate
differently, depending on
where it’s delivered.
(Templates come pr...
1 
 Do

Use default templates and
customize them.
Instead, use HTML as the
frosting on your emails.
Don’t

Feel like you need to
design it all yourself.

2
Don’t

Feel like you need to
design it all yourself.
(That’s a lot of work.)

2
2 
 Do

Focus on the content and
enhance with simple hacks.
This should help.
Download it here:

http://hub.am/1f9lUtW
Don’t

Send an email if you
haven’t tested it first.

3
Don’t

Send an email if you
haven’t tested it first.
(There’s no ‘undo’ button.)

3
3 
 Do

Test your emails out on as
many clients as possible.
Your emails could look
different on all of these.
Don’t

Copy/paste HTML from
Microsoft Word.

4
Don’t

Copy/paste HTML from
Microsoft Word.
(It won’t render correctly.)

4
4 
 Do

Copy/paste from TextEdit
or Notepad.
These
programs nix
their own
HTML and just
keep yours.
Don’t

Embed JavaScript in an
email.

5
Don’t

Embed JavaScript in an
email.
(It won’t work.)

5
YouTube
videos require
JavaScript.
5 
 Do

Take a screenshot and
hyperlink the image.
Like this.
Don’t
Put a form in an email.

6
Don’t
Put a form in an email.
(Like YouTube videos, it won’t work.)

6
6 
 Do

Send traffic to landing pages
using CTAs & hyperlinks.
Like this.
Don’t

Work directly off your
original copy.

7
Don’t

Work directly off your
original copy.
(There’s no ‘undo’ button.)

7
7 
 Do

Make a backup copy of
anything you’re changing.
Clone the page or email
first, then make changes.
Don’t

Break the rules of
HTML hierarchy.

8
<html>
<head>
</head>
<body>
<h1>

</h1>

<div>
<p>
<strong></strong>
</p>
</div>
</body>
</html>
<html>

This is hierarchy.

<head>
</head>
<body>
<h1>

</h1>

<div>
<p>
<strong></strong>
</p>
</div>
</body>
</html>
This is !important.
<html>
<head>
</head>
<body>
<h1>

</h1>

<div>
<p>
<strong></strong>
</p>
</div>
</body>
</html>
This could cause
long-term problems.
This could cause
long-term problems.
(Seriously. Don’t do it.)
8 
 Do

Give everything the
appropriate hierarchy.
<html>

Stick to this.

<head>
</head>
<body>
<h1>

</h1>

<div>
<p>
<strong></strong>
</p>
</div>
</body>
</html>
Don’t

Make changes without
knowing how many
pages it affects.

9
Changing
your logo
on one
page could
affect ALL
your pages.
9 
 Do

Consult a designer before
making big changes.
9 
 Do

Consult a designer before
making big changes.
(If you don’t know what a “big
change” is, ask a designer first.)
Don’t

Delete code if you’re
not sure what it does.

10
Seriously. 
It’s extremely
dangerous.
10 
 Do

Learn your HTML basics
before diving in head first.
HTML Hacks for
Marketers: Decoded
Click to download:

http://hub.am/1f9lUtW
Thanks.
Code This, Not That: 10 Do's and Don'ts For Learning HTML
Code This, Not That: 10 Do's and Don'ts For Learning HTML
Upcoming SlideShare
Loading in...5
×

Code This, Not That: 10 Do's and Don'ts For Learning HTML

38,501

Published on

As a marketer, you craft blog posts, publish landing pages, and send email campaigns. While you may not be a webmaster, having a few HTML tricks up your sleeve can make you more agile and efficient, without having to rely on a webmaster's help.

Published in: Technology, Design
2 Comments
44 Likes
Statistics
Notes
No Downloads
Views
Total Views
38,501
On Slideshare
0
From Embeds
0
Number of Embeds
47
Actions
Shares
0
Downloads
0
Comments
2
Likes
44
Embeds 0
No embeds

No notes for slide

Transcript of "Code This, Not That: 10 Do's and Don'ts For Learning HTML"

  1. 1. That: </h1> t ode This, No <h1> C 10 Do’s & Don’ts For Learning HTML.
  2. 2. When you’re a marketer, coding can feel like a foreign language …
  3. 3. … but a language that’s essential to your job.
  4. 4. That’s why we want to share …
  5. 5. 10 Do’s & Don’ts For Marketers HACKING HTML.
  6. 6. Ready to learn?
  7. 7. Let’s go …
  8. 8. Don’t Build your own email templates from scratch. 1
  9. 9. Creating an email template from scratch could translate differently, depending on where it’s delivered.
  10. 10. Creating an email template from scratch could translate differently, depending on where it’s delivered. (Templates come pre-optimized.)
  11. 11. 1 Do Use default templates and customize them.
  12. 12. Instead, use HTML as the frosting on your emails.
  13. 13. Don’t Feel like you need to design it all yourself. 2
  14. 14. Don’t Feel like you need to design it all yourself. (That’s a lot of work.) 2
  15. 15. 2 Do Focus on the content and enhance with simple hacks.
  16. 16. This should help. Download it here: http://hub.am/1f9lUtW
  17. 17. Don’t Send an email if you haven’t tested it first. 3
  18. 18. Don’t Send an email if you haven’t tested it first. (There’s no ‘undo’ button.) 3
  19. 19. 3 Do Test your emails out on as many clients as possible.
  20. 20. Your emails could look different on all of these.
  21. 21. Don’t Copy/paste HTML from Microsoft Word. 4
  22. 22. Don’t Copy/paste HTML from Microsoft Word. (It won’t render correctly.) 4
  23. 23. 4 Do Copy/paste from TextEdit or Notepad.
  24. 24. These programs nix their own HTML and just keep yours.
  25. 25. Don’t Embed JavaScript in an email. 5
  26. 26. Don’t Embed JavaScript in an email. (It won’t work.) 5
  27. 27. YouTube videos require JavaScript.
  28. 28. 5 Do Take a screenshot and hyperlink the image.
  29. 29. Like this.
  30. 30. Don’t Put a form in an email. 6
  31. 31. Don’t Put a form in an email. (Like YouTube videos, it won’t work.) 6
  32. 32. 6 Do Send traffic to landing pages using CTAs & hyperlinks.
  33. 33. Like this.
  34. 34. Don’t Work directly off your original copy. 7
  35. 35. Don’t Work directly off your original copy. (There’s no ‘undo’ button.) 7
  36. 36. 7 Do Make a backup copy of anything you’re changing.
  37. 37. Clone the page or email first, then make changes.
  38. 38. Don’t Break the rules of HTML hierarchy. 8
  39. 39. <html> <head> </head> <body> <h1> </h1> <div> <p> <strong></strong> </p> </div> </body> </html>
  40. 40. <html> This is hierarchy. <head> </head> <body> <h1> </h1> <div> <p> <strong></strong> </p> </div> </body> </html>
  41. 41. This is !important.
  42. 42. <html> <head> </head> <body> <h1> </h1> <div> <p> <strong></strong> </p> </div> </body> </html>
  43. 43. This could cause long-term problems.
  44. 44. This could cause long-term problems. (Seriously. Don’t do it.)
  45. 45. 8 Do Give everything the appropriate hierarchy.
  46. 46. <html> Stick to this. <head> </head> <body> <h1> </h1> <div> <p> <strong></strong> </p> </div> </body> </html>
  47. 47. Don’t Make changes without knowing how many pages it affects. 9
  48. 48. Changing your logo on one page could affect ALL your pages.
  49. 49. 9 Do Consult a designer before making big changes.
  50. 50. 9 Do Consult a designer before making big changes. (If you don’t know what a “big change” is, ask a designer first.)
  51. 51. Don’t Delete code if you’re not sure what it does. 10
  52. 52. Seriously. It’s extremely dangerous.
  53. 53. 10 Do Learn your HTML basics before diving in head first.
  54. 54. HTML Hacks for Marketers: Decoded Click to download: http://hub.am/1f9lUtW
  55. 55. Thanks.

×