My Fascination with Codepen.


When I find myself with some down time browsing I often find myself on big builds which use Jade HTML, which fascinate me, now, I’ve never used Jade html, so I was very curious to see what it was good for, and whether I could apply to my work, I spent time researching how Jade is built and the best methods for approaching Jade. The next challenge for me was come up with a small-ish project to attune myself with it.

I took a long hard look at myself as to what I could take on as my first Jade build, and then it hit me, I’ll do myself!

So I set out on Codepen, made a new pen, changed the HTML Preprocessor to Jade and the CSS to SCSS and made a start…





Starting off the HTML like this to work my way down was just awesome, Jade sped up the process of HTML and it flows nicely with the nesting of child classes. Coupled with SASS very early on I could see that the 2 work very well together, you could just copy the html into your SASS file and integrate SASS so easily, if that’s how you would like to approach Jade and SASS/










Where I was doing the facial features, Jade also really came through for me because I could type .left-eye and it’ll print the left eye on the face, the tidiness of Jade never seemed to amaze me, it just seemed so easy to write the class in html like you would with CSS.

Please do checkout my Codepen linked below, it is a simple build with Jade but it was a good way to start to get my head around it…

(Still a working progress – Thinking of some animations potentially)

After this I was curious to go deeper into what Jade does with the more standard common HTML mark-up, I was wandering what it did with data attributes more specifically…

So I did some research and this is what I found...



<a href=”/about-us/” class=”btn round blue-BG white”>About Us</a>

<a href=”/sign-out/” data-method=”signout” class=”btn round blue-BG white btn-xs”>Sign out</a>


Jade equivalent:’about-us’) About Us’sign-out’ data-method=‘signout’) Sign out


This I like, providing a list of classes, then the data attributes you want applied to it and finally the text you want displaying is so clean, but you can draw up your own opinion on Jade when/if you decide to use it.

After doing some research into other people’s opinions on Jade the most common issue I find is that there is performance overhang, and generally people complaining that there’s another thing to try and wrap your head around...

For me so far, I like Jade but I will try and get my teeth stuck in to bigger projects with Jade to see the capabilities of this Preprocessor one day… Another blog on the cards perhaps…

We Shall See, but for Now…






Whatever your business, be it a regional or global brand, the content you produce plays a vital role in your success. You know that… hence you’re reading this.

A well formulated and executed content strategy not only drives more traffic, at the core, it defines what your business is and helps build a strong connection between you and your audiences.

So let's quickly look at why developing a coherent content strategy is important and how setting clear goals and understanding your audience will elevate your online performance. 

What is a Content Strategy?

It's basic right? Content is at the core of how you define the way your business presents itself and an effective strategy should look to ensure that tone of voice, messaging and the core values are surfaced across all channels, from service or product pages on your website, to blog posts, through social media updates blah blah blah.

But let's keep it simple - your content strategy should be a clear roadmap that connects your marketing activities to your business goals. Align to your customer’s wants and needs and engage them at every interaction point and boom, you're in business. 

Who are my Audience?

You likely start all your projects with this chalked on the wall because your business knows “exactly” who its customers are right? Sounds obvious but we often find its not been done forensically enough (not based on data), is too old (more than 12 months ago - forget it) or its a spin off from some brand work that was legitimately aspirational but doesn’t face the reality of who you your business is actually engaging today.

So start (or circle back) with audience research, building out those personas to understand their ambitions, their lifestyle, their pain points or concerns, and crucially their wants and needs - in your context. 

Do I need to tailor content?

As part of your research find out where your audiences spend their time online and how they interact with content: Some may spend time thoroughly researching a product or service, whereas other audiences may want their content to be quick, snappy or easily digestible in the form of a video, infographic or short blog posts.


Ultimately, the key is to produce a strategy that creates the type of content your customers want to see:

  • What are the problems that your product or service will help them solve?

  • Who are they most influenced by?

  • What voices influence their behaviour?

  • What type of content do they consume?

  • Where do they consume content and engage with brands?

Different Content, Different Objectives

 All content is not born equal: When producing your strategy, it is important that the objectives for each individual piece are defined, that these fulfil your marketing objectives and tie to the overarching goals for your business.

There are various content frameworks that exist to aid content development in this way, but one that is popular and effective is Google’s hero, hub and hygiene method: It provides a framework on developing content to achieve different goals and gives guidance on the effort needed to create each type of content.

Hero Content

Hero content is essentially campaign content, it is big splash ideas designed to appeal to a large audience with the aim of telling your brand’s story at scale. 

Ways of measuring hero include the amount of PR mentions or links from authoritative domains plus social interactions and mentions of your brand across all channels. 

Considering the scale of hero campaigns, this content is not regularly produced and is reserved for peak promotional times where it’s important for a business to stand out from their competitors.

Hub Content

Hub content is the stuff that keeps your audience engaged, it expands on the themes of product or service level content, educates users and helps create a connection between themselves and your brand.

Hygiene Content

Hygiene content is the bread and butter of any website, it is the BAU content for products and services, it is SEO focused and targets important keywords at a product, service or guide level.

How do I manage all this?

Content development is only one part of the ongoing work needed when working with an effective content strategy. We call it “feeding the beast” because it really is the fuel in your brand vehicle and once you start you really can’t stop (if it’s delivering results) but that’s where performance measurement comes in.

Your greatest gift in managing the outputs from your hero/hub/hygiene style efforts is to understand If your content is working. To truly deliver results your business must first understand the objectives and goals of each piece of content to effectively measure its success. That as a guiding light from day 1 will let you slow down, speed up, stop or start new content briefs and projects.

Remember - content strategies are not set in stone. They are living breathing things and should adapt and pivot as insights become available and your brand naturally evolves.

If ever you want to chat content and explore new initiatives we’re always here to help.

want to speak to one of our experts?

Ben Davies Thumbnail
Ben Davies
Client-Side Developer
Ben started his career in 2013 as a full stack developer but has since specialised in client-side development.
Ben Davies Thumbnail

Ben Davies

07 Dec 2016 - 5 minute read
share this

stay in the know, stay ahead.

Get the latest from the agency, including news, events and expert content.
explore services in the article
find out what we can do for you
read some of our case studies