Social Timing Insights
History of Content Marketing [INFOGRAPHIC]
Like this infographic? Get more
content marketing information from the
Content Marketing Institute.
Content Marketing is Selling the Concept
Content marketing and how it is uber important but not really a unique idea that the Internet invented.
Face it. In a way content marketing is a fancy way of “selling the sizzle and not the steak.” This is a “traditional” (hate that word) way direct marketers used to write copy for their print ads. Instead of selling the product, you sell the concept. Content marketing is taking this small direct marketing copywriting axiom and exploding it across all marketing channels.
Think about this. If you read about marketing, (which I sadly am addicted to) you hear things like “we need thought leadership…blah blah blah.” Why you might ask? Because then the world will view you like an expert and trust whom they are buying from. Makes sense to me. The best salespeople are the ones that knoq their product inside and out. Anyway, the funny thing about “thought leadersip” is that it is a concept. Instead of selling the software, you’re selling the educational information that comes a thunderin’ out of your blog. You’re giving information away to do all those wonderful SEO and Inbound things, but you’re building the concept.
Right?
Of course. You see countless examples of this on the internet, we just call them different things like my favorite “utility marketing.” This wonderful catch phrase is usually used when a company is creating a thing, a tchotchke (if you will), in order to achieve a marketing goal. Some tchotchkes (oh I will) we’ve grown to love and adore like apps. Companies are now starting to create smart phone apps in order to connect their people to their brands. If the companies are smart those apps they are building somehow connect to a concept, if not around another product at the very least the brand.
Check out how Skull Candy using utility marketing to offer users a FREE iPhone app for surfers so they know “where to rip.” The answer to the “what was the concept” can be found in the brand story (or at least the one they are attempting to tell) on what kind of persona uses Skull Candy (and yes, probably to the market they are trying to reach out to).
So come on content marketing…it’s clever, it’s the thing to do, it’s what works. If you think about it in those regards, there really isn’t anything shockingly new being offered by today’s content marketing. We’re just ignoring the steak and attaching a rocket booster to the sizzle.
2 Step HTML Hack for More Consumable Blog Content
Like cinnamon - great blogs taste good, and are easy to consume
You’ve probably heard before that “Content is King” blah blah blah…but one thing that marketers seem to leave out of this cliche battle-cry is “usability” (or “readability” might work better in this case). How can you make your blog posts more engaging? By using this easy 2 step HTML hack.
Before we start hacking I wanted to remind of some of the general (cliche) things to keep in mind when creating content.
Better Blogging Shortlist
- Keep your post lengths short
- Create useful and unique content
- Create granular posts
- Create Scannable Content
- Write engaging headlines
One item that seems to get left off this list is “usability” or perhaps a better synonym would be “readability.” One simple way you can improve the usability of your posts is to add directional tags to link to your subheadings using a touch HTML.
Remember back to when we discussed the basic link anatomy? Here’s a quick refresher:
- a element
- href attribute
- URL
- Anchor Text
- close a element
How to a Add Navigational Element to Links
Step 1:
Let’s say for example you are writing a blog posts about your five favorite kinds of dogs you want to adopt. To make your post easy to scan you broke it into 5 different paragraphs according to breed:
- German Shepards
- Golden Retreiver
- Yellow Labs
- Mixed Breed
- Pitbull
For each sub-head you are going to add the following:
I used “1 through 5” in between the quotes to make it easy to remember, but you can put whatever you’d like here.
Step 2:
In your introductory paragraph you’ll probably want to give the reader a quick outline of your top 5, or at least list them briefly in your opening paragraph. Using the a element you can let the reader easily skip right to the section they want to read about:
By simply adding the #(name) to the end of your URL your reader will go to the appropriate headline. This makes your content easier to scan, navigate, consume and get your reader to point of interest faster than scrolling down the page.
You’ll notice I utilize this at the end of each post with my “Back to Top”
Back to Top
How to take charge of your content using the box model (non-coders only)
So far I’ve been able to write some basic CSS and link it to my XHTML by creating a stylesheet and using the following code in the body element:
In order to make the next step into the world of CSS I have to learn the box model. The box model is how CSS sees elements (it’s like wearing contact lenses). CSS treats every single element, whether it is an image, paragraph, or whatever, as if a box represented it.
The Box Model
When you are thinking in the world of CSS, every element exists in a box broken down into 5 subdivisions:
Looks pretty straightforward right? Here’s a brief explanation of what each of the above characteristics of the box model using the following basic XHTML & CSS to illustrate:
CSS Stylesheet
Content Area
Each element starts with content and is placed in a box that is just big enough to contain it.
The image is really just there for fun; the content area we are concerned with is the p element where I placed some dummy-text. I also added a little background-color using a hex code (see Color:Me post).
Padding
Exists just outside the content box. Padding allows you to add visual space around the content area. Remember back when I was messing with the Tumblr HTML editor? I was trying to make some space around the image so that the text wasn’t sitting right smack dab next to it. I used a hack method before, and now added the appropriate padding attribute to my custom CSS in Tumblr.
By adding 25px using the padding attribute, I added some breathing room for the content. You can control the direction of the padding by adding: padding-right, padding-left, etc. after the padding attribute in your CSS.
Border
Each element has the option of having a border. The border surrounds the padding and takes the form of a line around your content creating a visual separation.
Notice in the example above, I used a dashed border as opposed to a solid line.
Are you with me so far? Here’s a quick recap: Content > Padding > Border. One more to go!
Margin
The margin surrounds the border. Using margin gives you a way to add space between your element and other elements on the page.
By adding 50px of margin we have added 50px of margin on all sides. Just like with padding, you can add directional padding by using margin-right, margin-left, etc.
Final CSS code for my sample webpage:
Who’s a happy puppy? :)
Back to Top
Color Me: A Crash Course in Web Colors
Before I get started, it’s only fair to say there isn’t really any marketing to tie into this post. However, it will tickle your design brain and get you thinking about how your content is displayed. Sound Fair?
How do web colors work?
Each color on a webpage is specified by how much Red, Green, and Blue (RGB) make the color from 0 to 100%. For example, a color could be displayed as: R100%, G100%, B100% which = White. By specifying color you are simply telling the browser how much Red, Blue, and Green goes into the color.
3 roads to Rome using CSS
There are three primary ways to display color on your webpage using CSS.
- Using %’s
- Specify RGB values as a numeric value between 0 and 255
- Hex Codes
Cracking the Hex Code
One of the most widely used ways to display color using CSS is to use a hex code. Each set of digits of a hex code represents the Red, Green, and Blue component of the color. So taking the example above:
Red: cc
Green: 66
Blue: 00
Yes, you’re on the trail, cc is certainly NOT a number. Each set of digits represents a number between 0 to 255. However clearly this system limits us to represent numbers from 0 to 99. The letters are based on digits - 16 digits (0 to F).
Note how A through F on the image above represent 10 to 15. You can calculate the hex code in 2 simple steps:
Step 1: Separate the hex code into three separate components
cc
66
00
Step 2: Convert each hex number into its decimal equivalent
REMEMBER that the first number in a hex code is ALWAYS multiplied by 16.
So what?
The point of this is to demonstrate how colors are used on the web and gain a deeper understanding of the type of calculations your browser is going through to display colors. Obviously you aren’t going to go around decoding hex codes (although you’ll be a hit at your next dinner party). The simplest thing to figure out your colors is to use a Color chart, or use the color chart in Photoshop. Simply select the color your want and it will spit out the hex code for you.
Image References
Reduce blog reader distractions with 1 easy change
One of the success metrics I use to gauge the quality of content is Average Time on Site. In order to keep the reader engaged you of course must be offering quality-targeted content that relates to them (in one way or another). However, you also have to remove the amount of distractions in your content as well.
Using the Target Attribute
An easy way to remove distractions is by using the target attribute if you are including links in your content.
If you are familiar with Tumblr’s CMS, this option is built in when you want to insert a link or image. The CMS will have an option labeled Open in New Window which is just a visual queue for the “target _ blank” attribute. Including this small little addition to your links (or remembering to select this option in the CMS) will force another tab on the user’s browser to open when they click on a link. Without this little piece of code the user will navigate away from the page, into the world of the ADD web surfer.
Back to Top
Learn how to add interactive content to your website with iframes
My apologies for the delay in between posts. I’ve been going through a little bit of a professional transition which has forced me to slow down on the blogging front. However, I’m feeling good, and excited for bigger and better things.
Today I just wanted to show you how you can add some killer content to your blog with the help of our friend the iframe.
What is an iframe?
An iframe is an element that is used to display a webpage inside another webpage. Since I mentioned professional transitions, I figured why not throw my LinkedIn profile into my latest post to demonstrate the power of the iframe.
Click here for the full definition of iframes
Adding an iframe to your blog is uber simple
The basic construction of the iframe contains the following:
- The iframe element
- src attribute (URL)
- closing iframe element
That’s it. You can adjust the size of the iframe just like you would an img element using the width=”” and height=”” attributes.
Marketing Summary
Iframes provide an easy way for you to make your content interactive with little to no effort. There are SEOs out there who will discourage the use of iFrames, however, keep in mind that the content inside the iFrame is still being indexed since they have a URL of their own.
It’s not all about SEO however. I’d encourage you to think more about the user experience and less about the SEO, especially in this case. Simple iframes can add to the usability of your website that is well worth the SEO trade-offs if executed effectively.
There’s so much more that you can do with iframes to add interactive content, so go forth and enjoy!
Back to top5 second SEO Secret About Links You’re Forgetting
This is a quick tip that I picked up going through the HTML Basic Tutorial - HTML Links over at w3schools. By the way, if you are looking for free schooling on HTML, CSS, or whatever you fancy I highly recommend them. There are some great premium education sites such as: Udemy, Lynda but w3schools is killer - and FREE.
Your links are missing a tail
You’ve probably seen a lot of browsers add a “/” to the end of URLs. You always want to make sure that you are adding that trailing “/” to the end of your subfolder references when you are creating links with HTML.
For example:
However, if you forget the trailing “/” you will actually be generating two requests to the server with this href. The server will first add the “/” to the address, and then create a new request like so:
Load time is precious for SEO, so don’t be sloppy when you are creating beautifully keyword rich href links.
Learn the importance of headings to SEO in 1 minute and 15 seconds
I’m currently going back and reviewing my HTML and XHTML by going through the w3schools HTML tutorial. As I am doing so I wanted to share quick post on something in SEO that was confusing to me until I started learning HTML - the importance of headings.
HTML Headings Are Important for Search Engines
Headings are super important parts of your web pages. Why? Because they establish the architecture of your website for the search engines AND for your reader. Search engines use your headings to index the structure and content of your web pages. So…if you aren’t using and headings - you’re a disorganized mess and probably won’t rank as high on the search engines.
Remember in school when your teacher told you to create an outline before you sat down to write something? The same holds true for your web content. Before you construct a blog post, landing page, web page, or whatever plan out your headings first. H1 headings should be used as the main headings, followed by H2 headings, and the less important stuff can be H3 and so on and so forth.
You might notice playing around int he HTML sandbox that the using the different heading tags makes the text bigger. Don’t use them for this use. Use them to organize your content.
- Figure out what keywords are important to your content using Google Adwords Keyword Tool
- Include keywords that are important and relevant to your content in all headings
- Make sure your headings flow from most important to least important
HTML Headings are Important For Readers
Steve Krug wrote “Don’t Make Me Think” his intention was to get people to start thinking about usability. People don’t READ websites (unless it’s Code of Marketing) they SKIM websites. Since users are probably going to skim your pages by its headings, it’s important to use headings that:
- Catch the attention of the reader (see External Resources below)
- Show the document structure
- Give enough information for the skimmer to dive deeper into your content
Quickee Analytics
There are two metrics that I would pay attention to that could help you determine how well your headings are working: Time on Site, Bounce Rate. Start experimenting with keywords and headlines to see what moves the needle with these metrics.
External Resources
Back to Top
Bite Size CSS You Can Learn on Your Lunch Break
At this point I’ve been able to grapple with the basics of HTML & XHTML and gain a pretty clear understanding about the these important website building blocks. However, there is a third amigo missing from the bunch - CSS. CSS stands for “cascade styling sheets.” Styles define how to display HTML elements, and are normally saved in external .css files (more on that in the next post). For now just know that external style sheets enable you to change the appearance and layout of all the pages in a Web site - which if you are using a free Wordpress or Tumblr blog is quite handy.
Wicked Simple CSS
CSS is totally vain - it’s obsessed with appearance. It’s always telling HTML & XHTML where to sit and how to dress. However domineering CSS is it is a powerful coding language that allows you to control the presentation of your pages.
Each statement in CSS consists of three things:
- location
- property
- style
Here’s an example to show you how it all breaks down:
This little piece of CSS code tells my website that I would like all of the P elements to use the serif type of font. All you have to do is throw a little CSS into the header with a style element and you’re good to go. This really isn’t the best solution for applying CSS because you’d have to apply it to each and every page you wanted to style - a daunting task indeed. In my next post I’ll show you how to link to a separate style sheet to make this process uber simple.
Anyway, I digress. As I was saying - CSS is broken down into three parts. The location (selector) is where you can decide what HTML element you would like to style. Below is a diagram of how the simple example CSS code I wrote affects the page.
As you can see the shaded pieces are the elements affected. You can get even more accomplished by grouping the elements together that you would like to style.
For example, let’s say I wanted the H1 and H2 elements to be effected as well. All you have to do is add them to the area where you place the selector in the code, and separate them with a comma.
Here’s how I made the changes to my personal blog here. You’ll notice if you have a keen eye that the font is indeed now displaying in the “serif-style.” The nice thing about using a Tumblr blog is that many of the themes have a designated area for you to add custom CSS.
As you can see I added a little bit of CSS code to make sure that my title, h1, h2, and p elements all were carrying the same style. Think about it, they’re a team - we gotta be wearing the same uniform!
Marketing Summary
I know we didn’t really get a chance to get too deep into CSS, but remember I just wanted throw something out there that was easy to digest. If you’re a marketer, why care about this stuff? Because design and style matter. The presentation of your pages is crucial, and it’s a huge waste of time for you to keep going back to your lead designer or front end developer every time you (or your client) wishes to make a presentation change.
- Make the small changes yourself, and leave the bigger projects to the devs
- A little style goes a long long way. Better style = clearer message
- Lower Bounce Rate %: If your blog or website produces quality content but are still suffering from a high bounce rate, chances are good you have a layout problem. Wouldn’t it be wonderful if there were a coding language that could lend a hand?
One last thing. I got tired of how terrible Tumblr is about giving you space between text and images. To solve this, I added a piece of custom CSS code that will make me never be frustrated with this again (see below):
X-ceed: X beyond the limits of HTML with XHTML
I would like to begin with the following X Puns to get them out of the way:
X-tra: Surplus X.
X-tract: X on the train.
X-traneous: Unneeded X.
X-treme: X to the outer limits.
X-Stream: River that promotes radicalism.
Thank you. Find those and more here.
What is XHTML?
This post marks my moving on from the strict HTML 4.01 to XHTML. So what exactly is XHTML? It’s extensive HTML. You see apparently HTML has hard fast rules on which elements you can use, and which you can’t like . XML changes all that making the impossible world of purple dishwashers possible.
XML is a language that is used to invent new markup languages. In short we can use XML to recreate HTML. I know what you’re thinking…learning HTML is hard enough, now we have to learn a whole new language - for why (you have to roll the r in “for” in order for that to be humorous). The good news is that XHTML doesn’t reinvent the wheel, it just has a few changes you need to keep in mind.
Changes from HTML to XHTML
before you add the html element to the top of any page you have to indicate a DOCTYPE. It usually looks something like so:
You have to tell the browser up front which type of HTML you are using so that it can best display your pages. The line you see above is called the document type definition because it tells the browser the type of document. Just throw that bad boy in the top of your page and you’re all set.
- Changes in the way we deal with empty elements like img
Remember before when we wanted to put an image on the page it looked something like this:
Elements like img are defined as open because they do not require a closing element. However the rules of XHTML “First Class” say that we need to add the following to our empty elements:
Not a big change, we just added a / and a > with a space.
Honestly, those two are the biggest changes, here’s a quick list of the rest (they should be fairly self explainable).
- Add xlmns, lang, and xml:lang attributes to your opening html tag
- html tag is the first after the DOCTYPE
- All opening tags must have closing
- Empty elements must end with a space and the />
- attributes MUST use double quotes ” “
Why XHTML?
XHTML allows you to future proof your pages so they are more likely to work on mobile devices and a variety of browsers. The good news is XHTML is meant to be backwards compatible so older browsers can still display your pages. XHTML can also be extended to new markup, until HTML (I’ll report more on this later when I dive deep).
Marketing Summary
So what good does this information do for you as a marketer? Well for one thing, if you are working in a technology company chances are they are writing code in HTML5 and XHTML. To this day there have been about 253 million Android mobile phones activated (see chart below). What’s more staggering is the report that from Google that states they are activating roughly 500,000 new phones a day.
You are going to want to make sure that your content is ready for all these devices, and isn’t being written with HTML elements that are depreciating. Want an example? Try using Internet Explorer 6 to open YouTube or any of the latest sites that have come onto the scene this year (IE6 Death Watch)…it’s unusable. Make sure that your content and marketing messages are optimized for mobile, and for a variety of browsers. Writing in XHTML gives you code flexibility to handle the fast paced innovation and get your content ready for the next best thing.
The Simple Sexy Secrets Behind Images and HTML
James Metcalfe once wrote:
A photograph is more than just
A gift to bring or send.
And more than just the likeness of
A relative or friend.
Oh how write Mr.Metcalfe was, especially if you are into digital marketing. The one element that you can’t live without is the img element. It makes our webpages look grand, and express emotions that many times words fall short to translate.
How images work in HTML
Remember in HTML for Marketers part 1 - The Basics when I described how a browser’s main job is to ask web servers for pages and then display them? When you decide it’s time to add our “1,000 word friend” to the table you’re doubling the exchange between the browser and the web server. It goes something like this:
Browser: I need to see your homepage
Web Server: Found it, here you are my good man.
Browser: Hmmm…it looks as though you have images in here - which I was able to deduce on your use of the img element in your HTML (kudos to you). Web Server can you get those images for me?
Web Server: Here you are.
That exchange took twice as long because the images are fetched and loaded in the order they appear after the the browser first read the HTML. Armed with this information you now understand why decorating your entire webpage with images will take a little while to load.
Other things to note about the img element:
- img is an empty element: (closed in the start tag)
- Images are stored on Web severs, so every image have a URL
A little about the 2nd bullet point. It’s important to note that when the browser asks for the img the web server is fetching it from a separate folder, which is why they have their own URL.
Example:
http://shutupandsmile.files.wordpress.com/2008/04/life-short.jpg
In order to get this img to display, the web server had to go through 2 folder levels /2008/04 and then to life-short.jpg
Here are a few common attributes that come along with the img element
- alt= ” “
- height = ” “
- width = ” “
- border = ” “
- src (source) = The value of the src attribute is the URL of the image you want to display.
Example:
alt=” ” is the alt text, which should always be filled with wonderful keywords - it’s the text that describes the image. The alt attribute is something that is actually required for your HTML to be compliant with HTML 4.01 (I’ll write a later post on compliance later, and yes thank you for pointing out that we are using HTML5…tough crowd)
The other attributes are fairly self explanatory, but I would warn against using them. Using the sizing attributes (width & height) is simply giving a message to the browser on how they need to be displayed. The web server is still fetching the full size file, which forces the whole transaction to work harder - thus effecting load times.
For example, if you upload an high quality image that is 1200px X 2000px. The web server is going to fetch that high image file, and then resize it to the attributes you indicated. The best way to avoid making the process work overtime is to use Photoshop or another Photo Editor to size the photos to your liking before you upload.
How to add a link to an image
If you want to make it so when the user clicks on the image they activate your link you simply add the A element into the mix:
Marketing Summary
So why do marketing people care about this aspect of HTML? The first obvious reason is that you want your site to look good. Having bad design or unattractive design could greatly increase the likelihood of people ignoring your brand message. Images draw people in, and can turn a crap site into a rockstar site. It’s the reason why sites such as iStockphoto are doing so much business.
The other 2 reasons are for better SEO:
- alt=”Place the keywords you care about HERE”
The alt attribute is a great opportunity for you to add necessary rich keywords that your business cares about. This also increases chances of your images ranking on Google’s image search. Many people use keywords to search for images and it is not a point of engagement that you want to give up because of marketing laziness. If you are going for the ultimate optimization of your website don’t forget the alt=” ” attribute in your images.
- Page load time matters A LOT in SEO
Google loves pages that load quickly because they give the best experience to their users. They penalize pages that crawl through the load process. You want to make sure that you are not making your the conversation goes as quickly as possible. Don’t force your browser and web servers to do a ton of heavy lifting, The Google Gods will not approve.
