It seems like you can’t get through a week without hearing about “Content Marketing” or “Content Strategy”. These strategies call for increasingly complicated pieces of content, including “Big Content”, video, data visualization, photography, and robust design.
Demands for Content are Growing
This progression creates a problem for SEOs. There is a skill gap that exists across a lot of individuals. I think this is linked to the identity crisis we’re going through as an industry. What are we good at? What is our role? What exactly do “SEOs” do in the ever expanding umbrella of “Inbound Marketing”? And why do we keep doing guest blog posts when we know better?
I think this is tied to two issues.
- Doing better has a high cost of entry (budget, time, resources, and skill).
- We often don’t know how to create the stuff we’re recommending.
SEOs can create guest posts in isolation and with little budget. Therefore, this kind of tactic becomes prevalent.
Creating the kind of content we all strive for requires copywriters, photographers, creative directors, graphic designers, videographers, statisticians, marketer researchers, back-end programmers or front-end programers. Creating great content these days requires at least 2 or 3 of these skills to create the content in isolation. Otherwise, content needs to leverage external resources or other team members. This means scope creep, increased costs, and increased time to implement.
This skill gap is dangerous, because we run the risk of becoming glorified project managers.
Many of us can’t execute what we’re recommending.
So in my presentation at SearchFest, I played on the phrase “Technical SEO” to talk about how we should be talking more about being technical in our execution of SEO outside of “Technical SEO”. “Technical SEO” is a subset of SEO with its roots in on-site SEO. As an industry, we learned the skills of front-end code and server configuration. This made sense when on-site SEO played a larger role in the success of organic search. However, the world has changed and continues to change. These days, we should be equally concerned about learning the skills required to execute the style of content we’re recommending. This could include a wide range of skills, but I’d like to speak about the technical side of these skills.
Low Effort, High Impact
A content strategy can be differentiated by tactically being able to create high impact content with relatively low effort (time and cost). One way to do this is to leverage technical skills, libraries, and frameworks to mitigate a significant portion of the heavy lifting.
A low effort, high impact piece of content is something that:
- Has an awesome affect on performance.
- Has a minimal chance of being devalued in future updates.
- Can be created by a single person.
- Creates differentiated content.
This can be achieved via technical leverage.
This content can be intimidating for beginner or immediate programmers, but my hope with the rest of this post is to help significantly lower the barrier to entry for creating technical content. My hope is to empower (and encourage) people with a number of tools they can use to step out of the habit of content like static infographics and guest posts.
Most importantly, you don’t have to be good at coding to be successful at this.
The Interactive Infographic Challenge
To hold myself accountable to the same challenge, I set a goal to sit down on a Sunday and in one day build an interactive infographic from scratch, all by myself, using tools I wasn’t familiar with. I could not leverage our engineers or designers.
I wanted to know what I could learn to build, not just what I could project manage.
The goal was not to create the best piece of content, but to build a proof of concept. I gave myself a hard time restraint to build it.
In four hours, I created an interactive infographic.
The graphic, although simplistic, is a demonstration of quickly putting together an interactive infographic based on D3 (data-driven documents) graphs. It leverages Bootstrap.js, Google Web Fonts, and Interactive D3 graphs using NVD3.
For example, it includes: tooltips, buttons, collapes, typeaheads, dropdowns, tabs, progress bars, nav bars, tables, and much more. These features can all help differentiate a piece of content.
One of the more valuable features is its grid based scaffolding system. Think of a page broken up into 12 columns, like an Excel sheet. Each of these columns is a span of one. If you want a two column design, you only have to define a span of 4 and a span of 8. You can find a wide range of examples in their documentation.
For example, here is the code for a two column design.
Creating a landing page, content piece, or microsite is exceptionally easy when leveraging a framework like Bootstrap.js.
Creating the framework for the interactive infographic was simple. Getting started only required a few lines of code.
You’ll see the following code in the page’s source.
On lines 1 to 3, you’ll see 3 stylesheets linked in the head of the document. Lines 1 and 3 give you access to Bootstrap.js’ functionality, while the drinking.css file includes my additional customizations. Bootstrap.js wasn’t fully leveraged here, but I wanted to introduce it as the features could be used to easily implement more complicated layouts.
I hope to do follow pieces where I explore the features more broadly.
The rest of the framework included a few simple lines of CSS code.
And with that, we had a basic framework with a number of CSS tools to leverage.
Google Web Fonts & Colors
The next step is getting the design in place.
A quick hack for non-designers:
About 90% of design can come down to typography and a good color scheme (and maybe a few good images). If you can nail typography selection and pick a good color scheme, you can fake your way through “good design”.
To find a good color scheme, check out sites like COLOURlovers. You can look through user submitted color palettes, which come with “loves”, comments, and views. These metrics allow you quickly sort through submissions. You don’t even need an eye for color, let these crowdsourced metrics be your guide.
For my graphic, I picked fresh cut day for my colors.
Because I can’t design, I decided to keep it minimalistic and to rely heavily on fonts and colors to handle my “design”.
If you need help selecting fonts, there are posts available where bloggers with design skills much better than mine do font pairings. I took their recommendation and used Lobster and Cabin.
The technical implementation of these fonts is simple as well.
To get access to these fonts, you only need to link the stylesheets in your header.
Once this has been done, the font becomes accessible for you to use in your CSS.
That’s all it took to complete the design work.
I now have a framework, a nice color scheme, and two paired fonts to use for the content’s text.
Data-Driven Documents (D3)
D3 can range from exceptionally complex to very simple. There are a lot of visualizations you can create and their example gallery is a great start for demonstrating the types of content you can create. To keep it simple, I focused on charts and used NVD3. NVD3 helps create re-usable charts and chart components for d3.js. They have a number of examples and even live code demonstrations. To keep it simple, I tried to stay as close to the examples, simply copying the code directly into my content.
When you download NVD3, you’ll find a large number of example files packaged along with it. These will give you the framework to create most types of graphs or charts you’ll need.
Let’s walk through a simple graph to show how simple it is to implement.
To get started, you’ll want to link a number of JS and CSS files in your headers. To know which to use, just look in the header of the example you want to replicate.
I’m using a number of them here, because I used both pie charts and bar charts in my example. Once these have been added to the header, you now have access to all the tools needed to build interactive charts.
The actual HTML code is very simple. You just place a line like this in your HTML code where you want the chart to appear.
The first step is to assign your data to variables. Below you’ll see me storing the value pairs for the pie chart (yes/no) into drinkmendata. The only changes made out of the example here was customizing the variable name and changing the key and numeric values in the charts.
Next up, you’ll want to define the height and width of the graph. In addition, I added my own custom color group, which wasn’t part of the example. This will take two inputs and assign them to colors. I used the color codes from the color scheme I selected above. If you want more than two colors, change the “2” inside of range to the number of colors you want, then define that number of color codes in the last line.
This next chunk of code just comes right out of the example, with a small tweak from me. Within color, I used my own custom color group we defined above instead of the predefined color categories. This allows the graph to use our color scheme to match the rest of the design.
The last bit of code selects the ID of the HTML you want to replace and the name of the data variable.
In the code below, #drinkmen is the ID of the SVG we placed into the HTML and it will be replaced by the graph, and “drinkmendata” is the variable that contains the yes/no pie chart data we defined above. Other than that, the code is lifted right out of an example.
And that’s it.
After making the pie chart, I went on to create two different bar charts, creating the basic framework for an interactive piece of content.
This took me a few hours to learn and build. The next time I do this, I’ll be able to spend less time learning and more time brainstorming content.
While working on this, I learned two little issues that are worth pointing out.
#2 – The pie chart had a huge height on an iPhone device. Setting the height in CSS for the DIV the wraps the SVG corrected this.
7 More Low Effort Technical Content Wins
In addition to tools like Bootstrap.js and D3, there are a number of frameworks, libraries, and hacks that allow you to quickly create interactive content. Below are 7 more technical ideas you can use to create higher quality content.
If you have coding skills, you can do a lot with these, but if you don’t, than challenge yourself to brainstorm content that works within the constraints of these tools with little customization. With a little bit of creativity, these can be used to create a wide range of content pieces.
CraftMap is a lightweight jQuery plugin to create an overlay, turning an image into map. Any image can be quickly turned into a map. If you think creatively, you could use it for images that aren’t maps, like object digrams, and use it for labeling. This could be used to plot conferences or events. It could show the top universities for a niche or the states with the highest salary. Or for example, a small local italian restaurant could use it to plot the vineyards of the various wines they serve.
#4 Interactive SVG Infographics
#5 Dingbats & Lettering.js
What makes this graphic so creative is the source code. Here is the HTML and text used to create this content piece.
That’s the whole infographic.
What appears to be random characthers are converted to symbols / icons using the Dingbat font and are positioned on a per character basis using Lettering.js.
OKTrends is complimented for the interesting and data intensive posts that they use to publish. In addition to sharing amazing insights, they created content that was unique in its interactivity. I thought it would be useful to package up some of this functionality. In their post about the biggest lies told in online dating, they used a clever interactive slider that changed graph data based on age.
A quick peak into the source code shows that this is a very simple image swap script. I pulled out all the pieces needed to replicate this.
This script works by taking a folder of images named 18 to 54 and changing the file’s name when you move the slider. The slider handle and scale are simple images offset by a z-index. And it has a preload to prevent lag/flicker when swapping images. It’s a really simple system to replicate.
Here is the full source:
#7 jQuery Gender Toggles
One creative use of jQuery on OKTrends is the use of gender icons to toggle and compare data for male and females. Comparing data, graphs, and tag clouds between two different sets of entities is a simple content type. Male and female comparisons are easy examples, but this could include years, brands or even people. OKTrends used this type of toggle to compare tag clouds of interests in their post about the real stuff white people like.
Replicating this is simple. Try it out here.
The code is simple as well.
More to Being a Technical SEO than Technical SEO
As the demands of SEO grow, there is value in rethinking what we mean by “Technical SEO”. Being successful in a world of complex, and often interactive, content means closing the skill gap and pushing ourselves rapidly out of our comfort zones.
[And I’d like to say thanks to SearchFest for having me out and for the room full of individuals kind enough to listen to what I had to say. SearchFest this year was one of the most enjoyable events in my career, not really for the content (although that was great), but because of the amazing people (and supporting community) down in Portland.]