conquering code with hjc

Conquer CodeFeaturing Francis Lim and Emma Nguyen

proprietary and confidential 2

AgendaWho, What, When, Why

The Basics

Demo and Resources

Final Tips


Who are we?

4

Don’t be Afraid!

Fear not - it’s just a bunch of alphabets, numbers, and funny characters.

The cool kids are doing it.

proprietary and confidential


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 downThe 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:

05/01/2023


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


#2 Internal - using a <style> element in the HTML, usually in the <head> section, but can be added inside the <body> of the page

3 Ways to Add CSS

13

#3 External - using one or more external CSS files usually in a wrapper or template controlled by developers that you should not edit

proprietary and confidential

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/images/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>

15

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)


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 ContentDemo!


Resources

Chrome/Firefox Browser - Inspect Element

Tutorial: https://www.youtube.com/watch?v=vkCOfmqG6ys

https://www.youtube.com/watch?v=vkCOfmqG6ys




ResourcesPhoto Editing ToolsPixlr - 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, GIF

https://pixlr.com/editor/

https://pixlr.com/editor/


Let’s change some buttons!

05/01/2023


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/Events/Express20;jsessionid=F50D80A42FD210EB92FD0CE9EB2E2255.app316b?pg=tfind&fr_id=1432&fr_tm_opt=none" class="regButton" >Register as Individual</a>


Let’s Update an Image in Email!


Tables in EmailTables 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

http://www.w3schools.com/html/html_basic.asp

05/01/2023


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

05/01/2023


Tips!

05/01/2023


ResourcesLearn Basic HTML and CSSW3C School is a great place to start:http://www.w3schools.com/html/default.asphttp://www.w3schools.com/css/default.asp

CodeAcademy:https://www.codecademy.com/

Tutorial Videos:Free (Search “Basic HTML & CSS”): https://www.youtube.com/watch?v=GwQMnpUsj8I

Your First HTML File: https://www.youtube.com/watch?v=Pq08fNMOn7sAn Introduction To Styling Websites With CSS: http://leveluptuts.com/tutorials/css-tutorials

Paid Training Providers:http://www.lynda.com/HTML-tutorials/HTML-Essential-Training/170427-2.htmlhttps://teamtreehouse.com/

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/css/default.asp

https://www.codecademy.com/

https://www.youtube.com/watch?v=GwQMnpUsj8I

https://www.youtube.com/watch?v=Pq08fNMOn7s

http://leveluptuts.com/tutorials/css-tutorials

http://leveluptuts.com/tutorials/css-tutorials

http://www.lynda.com/HTML-tutorials/HTML-Essential-Training/170427-2.html

https://teamtreehouse.com/


ResourcesHTML ToolsOnline Editors:CodeAcademy (Learning and make quick edit to email)https://www.codecademy.com/en/tracks/web

http://htmledit.squarefree.com/

https://www.codecademy.com/en/tracks/web

http://htmledit.squarefree.com/

05/01/2023


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.)

05/01/2023


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

https://notepad-plus-plus.org/download/v6.8.3.html

http://www.barebones.com/products/textwrangler/

05/01/2023


ResourcesOther Web Development Tools:

SublimeText (Mac, PC, free to try - $, Developers Favourite, Advanced Tools)http://www.sublimetext.com

Tutorials: https://www.youtube.com/watch?v=04gKiTiRlq8https://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

https://support.apple.com/kb/DL1413?locale=en_US


http://www.sublimetext.com/

https://www.youtube.com/watch?v=04gKiTiRlq8

https://www.youtube.com/watch?v=zVLJfrIwEP8

http://www.adobe.com/products/dreamweaver.html

https://panic.com/coda/

http://www.microsoft.com/en-us/download/details.aspx?id=36179


05/01/2023


ResourcesTest Emailhttps://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

https://putsmail.com/

https://putsmail.com/

05/01/2023


ResourcesEmail Clients Market Share (with some discrepancies)https://emailclientmarketshare.com/Test your page for mobile https://www.google.com/webmasters/tools/mobile-friendly/Page Speedhttps://developers.google.com/speed/pagespeed/insights/

https://www.google.com/webmasters/tools/mobile-friendly/



https://developers.google.com/speed/pagespeed/insights/

https://developers.google.com/speed/pagespeed/insights/

conquering code with hjc

Technology