Sponsored microsites – or branded content hubs – can be highly effective in raising the brand profile of your advertising partner and driving users to their site, increasing purchase intent, campaign awareness or new business leads.

Increase ad revenue
france_microsite_macbook

Ingredients

  • 1 advertising partner
  • Engaging content
  • Partner’s branding assets and guidelines
  • Custom CSS (optional)
  • Web fonts (optional)
  • HTML for the masthead
  • Footer content and HTML (optional)
Required skills
  • HTML
  • CSS
  • Webvision

 

Research shows that people remember branded content twice as long as they remember a traditional advertisement. Focussing on engaging content first and product plugs second, the site should be relevant and provide real value for the users. People are less likely to tune out if they feel the content aligns with their interests and, therefore, become more open to calls to action when exposed to them. 

Using just a small set of primary navigation and a subset of story layouts, we show you how a microsite has been branded for an imaginary French food campaign for Waitrose. Featuring click-worthy headlines and eye-catching images to keep the visitors engaged, all the articles are optimised with strategic links and plenty of fun pictures and videos. In short, this microsite allows the partner to tell a story in a way they never could in an ad.

View the demo microsite

 

Method

The microsite you build and style can be as simple or as detailed as you need it to be. For this example, we have made good use of custom CSS and web fonts to allow us to style a hub that is aligned with our partner’s brand, creating a space that feels like an extension of their web presence. 

tips

If you plan to override the default styles of your main site, it’s a good idea to plan out which functionality and templates you will be using so that you don’t spend time styling things that will never be seen.

1. Add your microsite in the CMS

Adding a microsite in Webvision is very straightforward and is controlled under ‘Site Navigation’ in the CMS.

add_microsite

document

For further details on how to do this, see the ‘Adding a microsite and navigation’ section of our  microsite guide

2. Build up the framework

Out of the box, microsites do not have any masthead or footer content. So, this is a good place to start in building up the microsite’s framework. As we do this, we can also begin to add some custom CSS to begin styling the content we’re adding.

document

For an overview of the microsite framework and applying custom CSS, see  Customise your microsite’s look and feel

‘Assets’ tab

assets_tab

The ‘Assets’ tab of our top-level navigation item contains all the page positions that we shall want to populate for our microsite. We begin by adding content for the masthead, ‘back home’ link and footer, and building our navigation. We’re also adding the script for our web fonts and creating a file for our custom CSS.

Web fontsPage position: CSS head

webfonts

For our example, we are using ‘Calluna’ for headlines and ‘Gill Sans Nova’ for the body and navigation. Our web fonts are being served by Adobe Fonts, so we add the script for these to ‘CSS head’ and set it to ‘Cascade’ so that they work across the whole microsite. If you are using web fonts, your script might look different to ours, depending on who is serving them.

css_head

css_head_cascade

It is important to note that we have kept font weights to a minimum to keep the page weight down. We are loading ‘Calluna’ in just the regular weight, and ‘Gill Sans Nova’ in regular and semi-bold. Where either of these needs to be bold or italic in the design, we will use CSS to style them. 

Custom CSS

So that we can add custom CSS, we need to create a file for it. Under ‘Styles’ at the bottom of the ‘Assets’ tab, we add a new CSS file and set it to cascade so that style changes will apply to all pages of the microsite.

css_file

tips

If you want to validate your CSS, there are number of free online tools that can help, for example the W3C CSS Validation Service.

MastheadPage position: Microsite Masthead

For the masthead, we are working with a single SVG logo file, which we’ve uploaded to the Media Library and will resize for mobile and desktop display using CSS. Our logo combines the campaign branding and the partner’s logo so that it is clear to the user that this site is sponsored content.

a_taste_of_france_logo

Depending on the graphic you use, you might want to use a different one for desktop and mobile. Refer to your HTML snippets page (see below) for guidance on adding logos for both.

Adding the HTML, we ensure the logo image is linked to the microsite’s homepage and has alt text. We then set this to cascade so that it appears on all pages of the microsite. 

microsite_masthead

microsite_masthead_cascade

We also start to add our custom CSS so that the logo is sized and positioned correctly for mobile and desktop.

microsite_masthead_css

tips

The HTML snippets page gives default HTML for the more complex page text elements. To access your custom snippets page, append the following to your site URL: /magazine/dest/snippets

‘Back home’ linkPage position: Microsite back home

Set to cascade.

back_to_main_site_link

FooterPage position: Microsite footer

This is set to cascade. 

footer_content

Simple HTML for the footer is available on your snippets page, but if you intend to implement something a little more elaborate, just remember to make it responsive!

Given the nature of this microsite, we only have a small set of primary navigation. Microsite navigation is added and configured in the same way as for the main site, with the exception that it is the sub-navigation that forms the microsite’s primary nav.  

Our navigation is set up as follows: 

TitleContent-typeUse
Home URL Directs to our home page 
Features Grid SPIN content
Recipes Grid SPIN content
myWaitrose URL External link to our partner’s site
document

For more details about microsite navigation and setting up the microsite’s index page, see ‘ How to build microsite navigation and select templates ’.

With a bit more CSS for colours, icons, type sizes and alignment, the basic framework for our microsite is now complete.

framework_complete

3. Create story content

Before we can build out the landing pages, we need to create the story content. To move the user through the content and engage them more, we will be using the ‘More from this section’ block at the bottom of the page, along with some inline links for which we will be creating some extra HTML and CSS. We will be doing the same for links to our partner’s pages.

Primary navigation

For our stories to show on the microsite, we need to assign them microsite primary navigation.

microsite_primary_navigation

Story types and layouts

We have set up two story types for our microsite – ‘Features’ and ‘Recipes’. Using these types for our stories will allow us to display more features or recipes in the ‘More…’ block at the bottom of the story page.

more_stories

For feature stories, we are using the picture story, and for recipes the standard layout. Both are set to full width as we are not using the right-hand column.

info

Note
While you can make use of all story layouts, they might not all be suitable for your microsite. For example, the enhanced video and audio layouts are built to display the latest video/audio content from the CMS at the bottom of the page, which may not be appropriate for a sponsored content hub. You could use the standard layout and insert the video item inline. Alternatively, if the video layout is your preferred choice, you could hide the latest video block using CSS.

Because our microsite content is associated with a sponsor in the CMS, the sponsor byline will display on all stories and story lists (including SPIN blocks). As the microsite is sponsored by a single partner – which is displayed clearly in the masthead – it might be a bit repetitive to show the bylines everywhere. So we are setting these to not display using CSS. 

Similarly, if you are using the page text for ‘native-content-intro’ on your site, you might also want to suppress this:

For the story lists at the bottom of the story page, the CSS should look like this. 

Images

When it comes to images, size matters! Using the picture story and full-width layouts, we want to ensure our images look great on all screens. So, any images we upload should have a minimum width of 2000px. Those intended for the top of the picture stories also need to work well in a 16:9 aspect ratio.

document

For more information about how images are cropped and sized, see  Image sizes and cropping .

Additional story styles

While our feature stories use mostly standard story styles, we have created a few extra CSS classes to style things like H2s, and the ingredients list and method on our recipe stories.

For H2s we’ve created a class that adds a light green border. For our ingredients, we’ve added a horizontal rule between each list item and made some basic padding adjustments.

ingredients

For the method, we’ve created a custom style for the list counters and added some extra space between the list items.

method

To apply these styles, we simply open the HTML view in the story editor and add the classes to the relevant elements.

additional_story_styles

Embedded content

To make our story content feel that little bit more special, and aid the promotion of our partner’s products, we have used instances of custom HTML which have been included in the stories as ‘embedded content’. This allows us to include, edit and style extra elements without disrupting other content in the story editor.

embedded_content

embedded_content_markup

Some examples of the embedded content we are using are: 

tips

When adding links to your partner’s content, i.e. sponsored links, Google highly recommends you use the ‘nofollow’ tag to your link in order to flag it as ‘paid-for’. This option is available in the story editor when inserting/editing a text link.

nofollow_link

4. Landing pages

With our story content created, we can go ahead and build our landing pages. For the homepage, we are applying some custom styling, but ‘Features’ and ‘Recipes’ make use of the standard layout options. All our content blocks will use manual selection for easy ordering of stories. 

Homepage

homepage_grid

For the homepage, we’re using just a single column to display our content. 

  • Hero block for our lead story.  

  • Grid layout for three selected recipes. To this block we’ve added some text in the ‘Box description’ and added some extra CSS to style this, the full-width background and the ‘More’ link. This CSS has been added in the ‘Box description’ field so that it only affects this block on the homepage. 

  • A story criteria block for our remaining three features – 1 column full width and 2 column full width. 

hompage_complete

Features

A story criteria block – 2 column full width.

features_complete

Recipes

A grid layout for our nine recipes.

recipes_complete

5. Drive traffic to your microsite

Now that the microsite is finished, we should turn attention towards driving traffic to it. Here are a few ways you can do this.

SPIN block on the homepage and key landing pages

With the microsite’s content stored in Webvision, it is very easy to SPIN its content on to the homepage and other key landing pages. Similarly, you could use an HTML block to promote it around your site.

a_taste_of_france_SPIN_block_1180

As well as featuring the microsite on SPIN pages, stories from the microsite can be included on other story pages in the ‘Related articles’ list.

related_articles

Stories in email newsletters

Along with promoting the microsite and its content on your main website, newsletters can also prove an effective way of driving traffic. Using SPIN or an HTML block, microsite stories can easily be added to relevant newsletters, ensuring the right people see the content.

6. Result

To view the result of this recipe, visit the microsite on our demo site.

View the demo microsite

We have used a fair amount of custom CSS to style this site. If you’re interested in seeing how we’ve done this, you can download our CSS file below.

Top

Supporting documents

Click links below to download and view individual files.