lma technology conference - 2015 presentation on html and css (00848240-2x7a30f)

Learn Advanced CMS and Maximize Your Online Visibility

Tom CopelandMarketing DirectorThe Law Offices of

Craig Goldenfarb, P.A.

Jessica AriesBusiness Development

ManagerAndrews Kurth LLP

TAKE CONTROL OF YOUR CONTENT

LETS WRITE OUR FIRST WEBPAGE(in five minutes)

HEADER

BODY

FOOTER

HEADER

BODY

FOOTER

mostly editable by CMS

HEADER

BODY

FOOTER

CONTROLLING THE BODY CONTENTthe secret sauce: CMS(Content Management System)

CMS (NOUN) cee-em-esa content management system is a web-based application that provides capabilities for multiple users with variable permission levels to manipulate and manifest front-end textual, graphical,

and rules-based HTML/CSS code standards, as adopted by the W3C circa 2003.

easy tool to manage website content. that’s it.

yup.

nope.OH NO! ARE WE GOING DEEP IN IT?

IS IT MORE COMPLICATED THAN THAT?

WE ARE ONLY COVERING WHAT YOU NEED TO KNOW

Web DeveloperServer architectureSecure-Socket Layer deployment (SSL)SQL commands and tabling PHP, CSS, and Java functionsPage-level content structuringServer-side live content buildingE-commerce workflowFront-end content management

YouFront-end content management

FRONT-END CONTENT MANAGEMENTit won’t bite.

(do you use yours?)

(do you have one?)

(uhh…)

FRONT-END CONTENT MANAGEMENTwisy-wig editor

(what you see is what you get)

LET’S SEE HOW IT’S DONE

CMS-CONTROLLED PAGE ELEMENTSanything you can do, CMS can do better

PAGE ELEMENTS• text and headline styles• pictures and graphics• videos• tables

TEXT AND HEADLINE STYLES

(sudden text growth syndrome)

HEADLINE STYLESUse only the top three:

• HEADLINE 1• HEADLINE 2• HEADLINE 3

HEADLINE STYLESUse only the top three:

• HEADLINE 1• HEADLINE 2• HEADLINE 3

Reserved for page titles (H1)Breaks up page sections (H2)Highlights a piece of text (H3)

Kittens are really cute.Why are kittens so cute? Because they are. They are furry and small. They make funny little noises. Sometimes their paws are a different color from the rest of their fur, which for those individual kittens, make them extra-cute.

Read on for more information about why kittens are so darn cute.

Kittens are furry and small.One of the main reasons kittens are so cute is because they are furry and small. We humans think just about anything that is furry and small is cute, except for in the case of rodents, or flying rodents, like bats. But other than that, if it’s furry, it’s already passed half the test of cuteness. But sometimes things can be furry, but not cute – like an anteater. That’s why the other part – the small part – is so important. It separates the furry from the cute. So when you’ve got something that’s both furry and small, boy, lookout – you got a recipe for loads of cute.

Kittens have mittensSome kittens have different colored hands and feet. We call these mittens. The appearance of mittens significantly increased the cuteness level by a factor of 10-fold for most humans who are predisposed to thinking kittens are cute.

Kittens play with other cute kittensThe only thing cuter than a kitten is a bunch of kittens. And bunches of kittens are hyper, playful kittens. Watching kittens wrestle, tackle, nibble, jump, run, and tumble is in fact the cutest thing in the universe.

Kittens have a cute meowIf you’ve ever heard a kitten meow, you know you can now die safely and soundly. It’s the cutest noise in the world.

H1

H2

H3

H3

H3

H1

H2H3

LET’S SEE HOW IT’S DONE

PICTURES AND GRAPHICS

(floating picture of death)

IMAGE HANDLINGThree main variables:

• alignment• link• img alt• scaling• captions

IMAGE HANDLINGThree main variables:

• alignment• link• img alt• scaling• captions

left, right, or centertarget, no-followgive description of imagefit into your content area!unique from img alt

IMAGE HANDLINGfile types and extensions

JPEG: for printPNG: for web and emailGIF: run like hell

VIDEOS(shortcut: use YouTube embed)

“text” = HTML

paste the code, and save!

LET’S SEE HOW IT’S DONE

TABLESallows for easy organization of elements

without tablesflat spacingelements on top of one another

with tableseven spacingelements next to one another

without tablesflat spacingelements on top of one another with tables

even spacingelements next to one another

LET’S SEE HOW IT’S DONE

HTML CRASH COURSE“code is poetry.” - WordPress Adage

HTML CRASH COURSEHTML is…

universal (works everywhere)infallible (never fails)

wrapped in angle brackets <HTML>

Headline (H1)

Headline (H2)

Paragraph

Link

Bold

Italic

Underline

Red text

Headline (H3)

Cell 1 Cell 1 Cell 4

Cell 4 Cell 5 Cell 6

<h1>Headline (H1)</h1>

<h2>Headline (H2)</h2>

<h3>Headline (H3)</h3>

<p>Paragraph</p>

<a href=“http://www.google.com”>Link</a>

<b>Bold</b>

<i>Italic</i>

<u>Underline</u>

<span style=“color: red;”>Red text</a>

<table><tr>

<td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>

</tr><tr>

<td>Cell 4</td><td>Cell 5</td><td>Cell 6</td>

</tr></table>

<img src=“http://www.example.com/image.jpg” width=“100” href=“http://www.example.com” />

VISUAL HTML

Headline (H1)

Headline (H2)

Paragraph

Link

Bold

Italic

Underline

Red text

Headline (H3)

Cell 1 Cell 1 Cell 4

Cell 4 Cell 5 Cell 6

<h1>Headline (H1)</h1>

<h2>Headline (H2)</h2>

<h3>Headline (H3)</h3>

<p>Paragraph</p>

<a href=“http://www.google.com”>Link</a>

<b>Bold</b>

<i>Italic</i>

<u>Underline</u>

<span style=“color: red;”>Red text</a>

<table><tr>

<td>Cell 1</td><td>Cell 2</td><td>Cell 3</td>

</tr><tr>

<td>Cell 4</td><td>Cell 5</td><td>Cell 6</td>

</tr></table>

<img src=“http://www.example.com/image.jpg” width=“100” href=“http://www.example.com” />

VISUAL HTML

LET’S SEE HOW IT’S DONE<h1>Hello World.</h1>

GETTING MORE FROM YOUR CMSmanage every piece of your website

PLUGINSPlugins allow you to expand the functionality and capabilities of your website through a simple installation process on your CMS.

Plugins are typically CMS-specific, meaning the names, func-tionalities, and capabilities of a plugin vary by the CMS.

USEFUL PLUGINS/EXTENSIONSFUNCTIONALIT

YWORDPRESS JOOMLA DRUPAL

Text Editor / WYSIWYG

Editor

N/A JCE Editor Ckeditor

Photo Gallery Gallery JoomGallery Media

SEO Yoast SEO Smart SEO Pathauto (SEO-enhanced URLs)

Shopping Cart WooCommerce Hika Shop Drupal Commerce

Analytics Google Analytics by Yoast

Asynchronous Google Analytics

Google Analytics

Forms Contact Form 7 ProForms Basic Webform

MAKE EMAILS LOOK BETTERa triumph of wysiwyg

tools of the trade:picturesHTMLlinks

MAKE EMAILS LOOK BETTERa triumph of wysiwyg

tactics to improve emails:formattingreadability

avoiding SPAM filter

COMPARING OPTIONSPLATFORM FORMATTING READABILITY SPAM TRIGGER

OUTLOOK (ANY VERSION OR YEAR)

No control over formatting

Easy (text) Low risk

ANY EMAIL MARKETING SOFTWARE

Complete controlover formatting

Easy (text, images, links, and more)

High risk

WHAT ARE YOU DOING?ACTIVITY OUTLOOK EMAIL MARKETING

SOFTWARE

Regular mass emails to many thousands of clients C

Invitation picture and some text to 100 close people C

Text-based announcements to small list of stakeholders C

Anything you want to track a response on (clicks; opens) C

PICTURES IN EMAILShow we think it looks

PICTURES IN EMAILShow it actually looks

PICTURES IN EMAILSformatting: difficult to format (use alt-text)readability: poorSPAM trigger: highly susceptible

PICTURES IN EMAILSdon’t do it.

but if you must…

always include text.always use ALT tags.

never attach as separate file (embed into email).

LET’S SEE HOW IT’S DONE

QUESTIONS?

THANK YOU!

Tom CopelandMarketing DirectorThe Law Offices of

Craig Goldenfarb, P.A.

Jessica AriesMarketing Manager

Bickerstaff Heath Delgado Acosta LLP