Learn Advanced CMS and Maximize Your Online Visibility
Tom Copeland
Marketing Director
The Law Offices of
Craig Goldenfarb...
LETS WRITE OUR FIRST WEBPAGE
(in five minutes)
HEADER
BODY
FOOTER
HEADER
BODY
FOOTER
mostly editable by CMS
HEADER
BODY
FOOTER
CONTROLLING THE BODY CONTENT
the secret sauce: CMS
(Content Management System)
CMS (NOUN) cee-em-es
a content management system is a web-based application that
provides capabilities for multiple users ...
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 Developer
Server architecture
Secure-Socket Layer deployment (SSL)
SQL comm...
FRONT-END CONTENT MANAGEMENT
it won’t bite.
(do you use yours?)
(do you have one?)
(uhh…)
FRONT-END CONTENT MANAGEMENT
wisy-wig editor
(what you see is what you get)
LET’S SEE HOW IT’S DONE
CMS-CONTROLLED PAGE ELEMENTS
anything 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 STYLES
Use only the top three:
• HEADLINE 1
• HEADLINE 2
• HEADLINE 3
HEADLINE STYLES
Use only the top three:
• HEADLINE 1
• HEADLINE 2
• HEADLINE 3
Reserved for page titles (H1)
Breaks up pag...
Kittens are really cute.
Why are kittens so cute? Because they are. They are furry and small. They make funny little
noise...
H1
H2
H3
LET’S SEE HOW IT’S DONE
PICTURES AND GRAPHICS
(floating picture of death)
IMAGE HANDLING
Three main variables:
• alignment
• link
• img alt
• scaling
IMAGE HANDLING
Three main variables:
• alignment
• link
• img alt
• scaling
left, right, or center
target, no-follow
give ...
IMAGE HANDLING
file types and extensions
JPEG: for print
PNG: for web and email
GIF: run like hell
VIDEOS
(shortcut: use YouTube embed)
“text” = HTML
paste the code, and save!
LET’S SEE HOW IT’S DONE
TABLES
allows for easy organization of elements
without tables
flat spacing
elements on top of
one another with tables
even spacing
elements next to one
another
LET’S SEE HOW IT’S DONE
HTML CRASH COURSE
“code is poetry.” - WordPress Adage
HTML CRASH COURSE
HTML 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)
<h1>Headline (H1)</h1>
<h2>Headlin...
Headline (H1)
Headline (H2)
Paragraph
Link
Bold
Italic
Underline
Red text
Headline (H3)
<h1>Headline (H1)</h1>
<h2>Headlin...
LET’S SEE HOW IT’S DONE
<h1>Hello World.</h1>
GETTING MORE FROM YOUR CMS
manage every piece of your website
PLUGINS
Plugins allow you to expand the functionality and capabilities
of your website through a simple installation proce...
USEFUL
PLUGINS/EXTENSIONS
FUNCTIONALITY WORDPRESS JOOMLA DRUPAL
Text Editor /
WYSIWYG Editor
N/A JCE Editor Ckeditor
Photo...
MAKE EMAILS LOOK BETTER
a triumph of wysiwyg
tools of the trade:
pictures
HTML
links
MAKE EMAILS LOOK BETTER
a triumph of wysiwyg
tactics to improve emails:
formatting
readability
avoiding SPAM filter
COMPARING OPTIONS
PLATFORM FORMATTING READABILITY SPAM TRIGGER
OUTLOOK (ANY
VERSION OR YEAR)
No control over formatting Ea...
WHAT ARE YOU DOING?
ACTIVITY OUTLOOK EMAIL MARKETING
SOFTWARE
Regular mass emails to many
thousands of clients
C
Invitatio...
PICTURES IN EMAILS
how we think it looks
PICTURES IN EMAILS
how it actually looks
PICTURES IN EMAILS
formatting: difficult to format (use alt-text)
readability: poor
SPAM trigger: highly susceptible
PICTURES IN EMAILS
don’t do it.
but if you must…
always include text.
always use ALT tags.
never attach as separate file (...
LET’S SEE HOW IT’S DONE
QUESTIONS?
THANK YOU!
Tom Copeland
Marketing Director
The Law Offices of
Craig Goldenfarb, P.A.
Jessica Aries
Business Development Ma...
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility
Nächste SlideShare
Wird geladen in …5
×

LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility

269 Aufrufe

Veröffentlicht am

Stop struggling with your visual website editor, and start building pages! In this break-out session, attendees will learn how to use their website's CMS more effectively and efficiently to build and format SEO headlines, rich text, pictures, videos, and basic HTML elements into your website's pages that makes content more interesting and digestible for your website visitors. Extend your newly found confidence to homepages, blogs, and email newsletters, on and off your website.

Veröffentlicht in: Bildung
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
269
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
4
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

LMAtech 2015 - Take Control of Your Content: Learn Basic HTML, CSS and SEO to Maximize Your Online Visibility

  1. 1. Learn Advanced CMS and Maximize Your Online Visibility Tom Copeland Marketing Director The Law Offices of Craig Goldenfarb, P.A. Jessica Aries Business Development Manager Andrews Kurth LLP TAKE CONTROL OF YOUR CONTENT
  2. 2. LETS WRITE OUR FIRST WEBPAGE (in five minutes)
  3. 3. HEADER BODY FOOTER
  4. 4. HEADER BODY FOOTER mostly editable by CMS
  5. 5. HEADER BODY FOOTER
  6. 6. CONTROLLING THE BODY CONTENT the secret sauce: CMS (Content Management System)
  7. 7. CMS (NOUN) cee-em-es a 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.
  8. 8. yup. nope. OH NO! ARE WE GOING DEEP IN IT? IS IT MORE COMPLICATED THAN THAT?
  9. 9. WE ARE ONLY COVERING WHAT YOU NEED TO KNOW Web Developer Server architecture Secure-Socket Layer deployment (SSL) SQL commands and tabling PHP, CSS, and Java functions Page-level content structuring Server-side live content building E-commerce workflow Front-end content management You Front-end content management
  10. 10. FRONT-END CONTENT MANAGEMENT it won’t bite. (do you use yours?) (do you have one?) (uhh…)
  11. 11. FRONT-END CONTENT MANAGEMENT wisy-wig editor (what you see is what you get)
  12. 12. LET’S SEE HOW IT’S DONE
  13. 13. CMS-CONTROLLED PAGE ELEMENTS anything you can do, CMS can do better
  14. 14. PAGE ELEMENTS • text and headline styles • pictures and graphics • videos • tables
  15. 15. TEXT AND HEADLINE STYLES
  16. 16. (sudden text growth syndrome)
  17. 17. HEADLINE STYLES Use only the top three: • HEADLINE 1 • HEADLINE 2 • HEADLINE 3
  18. 18. HEADLINE STYLES Use 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)
  19. 19. 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 mittens Some 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 kittens The 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 meow If 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
  20. 20. H1 H2 H3
  21. 21. LET’S SEE HOW IT’S DONE
  22. 22. PICTURES AND GRAPHICS
  23. 23. (floating picture of death)
  24. 24. IMAGE HANDLING Three main variables: • alignment • link • img alt • scaling
  25. 25. IMAGE HANDLING Three main variables: • alignment • link • img alt • scaling left, right, or center target, no-follow give description of image fit into your content area!
  26. 26. IMAGE HANDLING file types and extensions JPEG: for print PNG: for web and email GIF: run like hell
  27. 27. VIDEOS (shortcut: use YouTube embed)
  28. 28. “text” = HTML paste the code, and save!
  29. 29. LET’S SEE HOW IT’S DONE
  30. 30. TABLES allows for easy organization of elements
  31. 31. without tables flat spacing elements on top of one another with tables even spacing elements next to one another
  32. 32. LET’S SEE HOW IT’S DONE
  33. 33. HTML CRASH COURSE “code is poetry.” - WordPress Adage
  34. 34. HTML CRASH COURSE HTML is… universal (works everywhere) infallible (never fails) wrapped in angle brackets <HTML>
  35. 35. Headline (H1) Headline (H2) Paragraph Link Bold Italic Underline Red text Headline (H3) <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
  36. 36. Headline (H1) Headline (H2) Paragraph Link Bold Italic Underline Red text Headline (H3) <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
  37. 37. LET’S SEE HOW IT’S DONE <h1>Hello World.</h1>
  38. 38. GETTING MORE FROM YOUR CMS manage every piece of your website
  39. 39. PLUGINS Plugins 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, funct ionalities, and capabilities of a plugin vary by the CMS.
  40. 40. USEFUL PLUGINS/EXTENSIONS FUNCTIONALITY WORDPRESS 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
  41. 41. MAKE EMAILS LOOK BETTER a triumph of wysiwyg tools of the trade: pictures HTML links
  42. 42. MAKE EMAILS LOOK BETTER a triumph of wysiwyg tactics to improve emails: formatting readability avoiding SPAM filter
  43. 43. COMPARING OPTIONS PLATFORM FORMATTING READABILITY SPAM TRIGGER OUTLOOK (ANY VERSION OR YEAR) No control over formatting Easy (text) Low risk ANY EMAIL MARKETING SOFTWARE Complete control over formatting Easy (text, images, links, and more) High risk
  44. 44. 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
  45. 45. PICTURES IN EMAILS how we think it looks
  46. 46. PICTURES IN EMAILS how it actually looks
  47. 47. PICTURES IN EMAILS formatting: difficult to format (use alt-text) readability: poor SPAM trigger: highly susceptible
  48. 48. PICTURES IN EMAILS don’t do it. but if you must… always include text. always use ALT tags. never attach as separate file (embed into email).
  49. 49. LET’S SEE HOW IT’S DONE
  50. 50. QUESTIONS?
  51. 51. THANK YOU! Tom Copeland Marketing Director The Law Offices of Craig Goldenfarb, P.A. Jessica Aries Business Development Manager Andrews Kurth LLP

×