lma technology conference - 2015 presentation on html and css (00848240-2x7a30f)
TRANSCRIPT
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