tech 101-basics for association marketers

Technology 101Adam Higgins, Technical Project Manager

www.highroadsolution.com

Marketing and Tech Evolution

We Must Evolve


Things Evolve…

Video Stores Online Streaming


Things Evolve…

Record Stores Music Downloads


Things Evolve…

Taxi Uber App


Things Evolve…

Direct Mail Email


Things Evolve…


Internet

How the Internet Changed Marketing


Internet

• Create Two-Way Interactions with

Members

• Deliver Prospective Members Marketing

Materials and Content

• Access to Richer Data

• Effectively and Immediately Analyze

Campaigns


Internet Evolved…

• Yesterday

– Static Web Pages

– Manually Changing Content in HTML Files

– FTP Uploads to Server


Internet Evolved…

• Today

– Content Management Systems Applications

– Web User Interface Updates Content

– Separate Content From Design


Content Management System (CMS)

• Add, update, or delete content to your

website through an interface without

physically placing files on a web server.


Open Source vs. Enterprise

• Open Source

– Free Software for Pubic Use

– Support Reliant on Open Community

– Wordpress, Joomla, Drupal, DotNetNuke

• Enterprise

– Paid Software

– Support with Service Level Agreement

– Hubspot, Ektron, SiteCore


Separation of Presentation Layer

Database (Stores Content) Front End Website


Database

• A collection of data

• Numerous tables that relate to

each other

• SQL is the language that

allows developers to manage

data


Front End Development

• Developer controls what the customer sees and user experience (UX)

• Developer controls the aesthetics

– Colors

– Fonts

– Design

– Arrangement


Front End Skill Sets


HTML

• HyperText Markup Language

(HTML) is the standard

markup language used to

create Web pages

• The language of the Internet

and all web sites.


Translating the HTML Language

• Consist of Tags with angle

brackets(<tagname>)

• Most Elements have a open

and close tag

– <h1>This my header </h1>


Popular Tags

• <html> Defines the document

• <body> Defines the document body

• <h1> Page Header

• <p> Paragraph

• <br> Line Break

• <img src=“imagelink”> Image

• <a href=“linkadress”> Hyperlink


Sample Document

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>


Cascading Style Sheets (CSS)

• Separates Web Content from

Web Presentation.

• Controls Look and Feel

• Speeds Up Design


CSS Syntax

• Selector

– Finds the HTML tag to style

• Common Selectors

– Id: a unique identifier for a

HTML tag

– Class: an identifiers to group

HTML tags


Sample CSS Declaration

<style>

.grey{color: red}

</style>

<p class=“red”>My first

paragraph.</p>


Responsive Design

• Change Arrangement of

Content by Device Size

• CSS is the Cornerstone to

Responsive Design


Responsive Design

Desktop

Mobile


Media Queries

• @media declaration can

determine a user’s screen size

@media all and (max-width:

320px) {

.container{

width: 100%;

}

}


JavaScript

• The Scripts Creates Dynamic

and Interactive User Interfaces


Modal Popups


Single-Page Application (SPA)

• Retrieve Information on a

Single Page Load

• Submitting a Form Does Not

Reload the Page


JQuery

• OpenSource Software

• Popular Amongst Front End

Developers

• Hides the Complexity of

JavaScript


Web Analytics

Analyzing the Internet


Web Analytics

• Real-Time Campaign Analysis

• See Member Reponses

• Identify Which Members

Responding to Campaigns

• Ability to Pivot Deliver New

Messages in the Campaign


Popular Web Analytic Software

• Google Analytics

– Free Software

– Install by Adding JavaScript to a

Pages

– Track Site Visitors, Page Views

and Sources,


Common Metrics

• Visitors

• Traffic Source

• Bounce

• Page View

• Conversions


Page View

• Any time a visitor lands on a

page on your site.

• Synonymous with the term Hit.


Visit

• A visitors activities throughout

the duration on your site.

• Sometimes Referred to as a

Session.

• A user can have several page

views within a session or visit.


Visitors

• Represent the number of

people who visit your site.

• Categories:

– Unique Visitors

– First-Time Visitors

– Repeat Visitors


Traffic Source

• How the visitor arrived to your site

– Direct – User typed URL in browser

– Referral• Social Media

• Other Web Sites

• Email

• Search Engines


Bounce

• A Bounce occurs when a user

arrives to the site and doesn’t

record any action, and leaves

or bounces.

• A good indicator of

engagement and valuable

content


Conversions

• When a user performs a

desired action

• Conversion Rate =

Conversions/Visits*100


API

Working Together


Application Programming Interface (API)

• Tools to build software

• Simplifies the underlying architecture into functions.

• A set of programing functions allows developers to extend applications

• Allow isolated systems to integrate

tech 101-basics for association marketers

Marketing

web presentation

markup language html

web pagesthe language

html tagclass

web sites

html languageconsist

group html tagswww

html filesftp uploads