Conquering Code with hjc

Conquer Code
Featuring Francis Lim and Emma Nguyen

Agenda
proprietary and confidential 2
Who, What, When, Why
The Basics
Demo and Resources
FinalTips

Who are we?

Don’t be Afraid!
Fear not - it’s just a
bunch of alphabets,
numbers, and funny
characters.
The cool kids are doing
it.

Who should learn?
You don’t have to be a developer or programmer.
You don’t have to build a website from scratch.
If you work with online content or email
marketing:
 Content Management System (CMS) like
WordPress, Drupal
 Nonprofit software like Blackbaud-Luminate,
Salesforce, Engaging Network, Salsa
 EMS like Constant Contact or Mailchimp

Why you should learn some
basic code?
It will save you time in the long run and
you can easily make simple edit to your
website content and email with
confidence.

What you should learn?
 Start with basic HTML and CSS.
 Working with images.
 Just know what JavaScript and jQuery
looks like and not to mess it up.
(Unless you are feeling more inspired).

What is HTML?
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>hjc email template</title>
</head>
<body><table width="500" border="0" align="center" cellpadding="0"
cellspacing="0">
<tbody><tr>
<td valign="top" style="padding:10px;"><p align="center" style="margin:0;
padding:0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-
height:18px; color:#6b6b6b;">Replace this text with any preview pane text you
might have.<br><a href="#" style="color:#9fb12a">View online</a></p></td>
</tr>
<tr>
<td valign="top"><table width="500" border="0" cellspacing="0"
cellpadding="0">
<tbody><tr>
<td height="98" valign="top"><img src="../images/content/pagebuilder/hjc-
kimbia-givingday-appeal-header.jpg" width="500" height="98" alt="hjc - Kimbia"
border="0" style="display:block;"></td>
</tr>
<tr>

Let’s break it down
The basic structure of an HTML document
includes tags, which surround content and apply
meaning to it.

What is CSS?
Cascading Style Sheet – this is the code that tells
your web browser what colours, fonts, sizes,
spacing to apply to content.
Styling can be added to HTML elements in 3
ways:

3 Ways to Add CSS
#1 Inline - using a style attribute in HTML
elements
<h1 style="color:blue">This is a Blue
Heading</h1>
Inline style is especially common in email
content because it ensures compatibility with all
email clients
10/2/201
5

#2 Internal - using a <style> element in
the HTML, usually in the <head> section,
be added inside the <body> of the page
3 Ways to Add CSS

#3 External - using one or more
external CSS files usually in a wrapper
template controlled by developers that
should not edit
3 Ways to Add CSS
http://www.w3schools.com/html/html_css.asp

Real Life Example – From Email
<TABLE>
<TBODY>
<TR>
<TD BGCOLOR="#FFFFFF">
<A HREF="http://hjcnewmedia.com"><IMG
SRC="http://hjcnewmedia.com/clients/hjc/bridge_email/image
s/header.jpg" ALT="hjc: leadership + innovation for the non-
profit sector" WIDTH="600" HEIGHT="174" BORDER="0"
STYLE="display:block;"></A>
</TD>
</TR>
</TBODY>
</TABLE>

What does they mean?
Code Definition
<a href=“..”> Specifies the URL (web address) for a link
<p>..</p> Signifies a paragraph
<br> or <br /> Signifies a line break
<img src=“..”> Image source – this is what to look out for when
adding new images
<table>.. </table> In emails - whenever you start creating content it
needs to start with a table, it allows the browser to
understand how to lay things out
<td>..</td> This is where the content of the table takes place
ALT Specifies an alternative text for an image for
screen readers
Width= and height= When found with an image – this describes the width
and height – they may not always be there (optional)
15

Anatomy of a Webpage
Most nonprofit software operate on
similar principles. They try to take the
heavy lifting out of your hands and
provide some content editors for you to
edit your content, typically code and
WYSIWYG editor.

What is WYSIWYG Editor?
In Luminate Online:

Tips: For using the
WYSIWYG
 Turn off WYSIWYG in your profile to prevent
opening content in WYSIWYG (go to your profile to
change your preference).
 WYSIWYG has a tendency to mess up code by
inserting code and tags that are not required – ever
wonder why your paragraphs had too much
space….this is why.
 Click Cancel to exit a content editor if you happen
to open the page in WYSIWYG. If you toggle back to
Text editor it will commit the change.

Updating Website Content
Demo!

Resources
Chrome/Firefox Browser - Inspect
Element
Tutorial:
https://www.youtube.com/watch?v=vkC
OfmqG6ys

Resources
Photo Editing Tools
Pixlr - similar to Photoshop:
https://pixlr.com/editor/
Webresizer - Basic as the name suggests:
http://webresizer.com/resizer/
Tips:
 Minimize image “file size”.
 The size-dimension is one thing - bigger the
image dimension - bigger the file size.
 Always keep the file size as small as possible
and that’s done by optimizing the “image
quality” to the lowest number without visible
deterioration
 Most photo editing app use the same Image
Quality optimization.
 File format: PNG, JPEG/JPG, GIFproprietary and confidential 22

Let’s change some buttons!

Let’s change some buttons!
What to look out for when changing links or names of
buttons:
 <a href= points to the hyperlink – you can replace
the existing URL with a new one and it will update
the button. Be sure to keep your URL in quotation
marks to complete the link.
 The name of the button is after the URL and before
the <a href is closed with the symbol </a>
<a
href="https://secure3.convio.net/hjcnm/site/TRR/Eve
nts/Express20;jsessionid=F50D80A42FD210EB92FD0C
E9EB2E2255.app316b?pg=tfind&fr_id=1432&fr_tm_op
t=none" class="regButton" >Register as
Individual</a>
10/2/201
5

Let’s Update an Image in
Email!

Tables in Email
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
Table data <td> are the data containers of the table.
They can contain all sorts of HTML elements like text,
images, lists, other tables, etc.

Tips!
Hjc often develops templates for emails or pages
with the goal of our clients being able to copy
and reuse – when we do we add HTML Comment
Tags:
Comment tags  are used to insert
comments in HTML.

Note: Comment in CSS and JavaScript uses
different syntax
HTML Reference:
http://www.w3schools.com/html/html_basic.asp

Tips!
For Luminate Clients:
 Turn off WYSIWYG in your profile to prevent
opening content in WYSIWYG (go to your profile to
change your preference).
 WYSIWYG has a tendency to mess up code by
inserting code and tags that are not required.
 Click Cancel to exit a content editor if you happen
to open the page in WYSIWYG. If you toggle back to
Text editor it will commit the change.
 WYSIWYG often add <p> tag in blank row in the
code
 Runaway “]]” angle brackets in the bottom of the
website caused by <script> element comment
added by the LO system. Clean up
10/2/201
5

Tips!
10/2/201
5

Resources
Learn Basic HTML and CSS
W3C School is a great place to start:
http://www.w3schools.com/html/default.asp
http://www.w3schools.com/css/default.asp
CodeAcademy:
https://www.codecademy.com/
TutorialVideos:
Free (Search “Basic HTML & CSS”):
https://www.youtube.com/watch?v=GwQMnpUsj8I
Your First HTML File: https://www.youtube.com/watch?v=Pq08fNMOn7s
An IntroductionTo Styling Websites With CSS: http://leveluptuts.com/tutorials/css-
tutorials
PaidTraining Providers:
http://www.lynda.com/HTML-tutorials/HTML-Essential-Training/170427-2.html
https://teamtreehouse.com/
10/2/201
5

Resources
HTML Tools
Online Editors:
CodeAcademy (Learning and make quick edit to
email)
https://www.codecademy.com/en/tracks/web
http://htmledit.squarefree.com/

Resources
Basic Editors:
 Notepad (Windows built-in)
 TextEdit (Mac built-in)
Tip: Before you start - set the format to “PlainText”
(Usually under Format menu, also check your App
preference to default to plain text mode and file
opening/saving mode.)
10/2/201
5

Resources
More Advanced Text Editors:
Notepad++ (Windows, https://notepad-plus-
plus.org/download/v6.8.3.html)
TextWrangler (Mac,
http://www.barebones.com/products/textwrangler/)
10/2/201
5

Resources
Other Web Development Tools:
SublimeText (Mac, PC, free to try - $, Developers Favourite,
Advanced Tools)
http://www.sublimetext.com
Tutorials:
https://www.youtube.com/watch?v=04gKiTiRlq8
https://www.youtube.com/watch?v=zVLJfrIwEP8
Adobe Dreamweaver (Win & Mac, $$$)
http://www.adobe.com/products/dreamweaver.html
Coda2 (Mac, $)
https://panic.com/coda/
Microsoft Expression Web 4 (Win, Free,)
http://www.microsoft.com/en-us/download/details.aspx?id=36179
iweb (Mac, Free)
https://support.apple.com/kb/DL1413?locale=en_US
10/2/201
5

Resources
Test Email
https://putsmail.com/
Send test emails to your test accounts to quickly test
you code for layout compatibility in various email
clients and devices/Apps.
Litmus.com
Paid service with more extensive testing
10/2/201
5

Resources
Email Clients Market Share (with some discrepancies)
https://emailclientmarketshare.com/
Test your page for mobile
https://www.google.com/webmasters/tools/mobile-
friendly/
Page Speed
https://developers.google.com/speed/pagespeed/insi
ghts/
10/2/201
5

Conquering Code with hjc

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à Conquering Code with hjc

Similaire à Conquering Code with hjc (20)

Plus de hjc

Plus de hjc (20)

Dernier

Dernier (20)

Conquering Code with hjc

Notes de l'éditeur