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.
- 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)
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.
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.
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.
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.
For an overview of the microsite framework and applying custom CSS, see Customise your microsite’s look and feel .
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
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.
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.
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.
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.
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.
We also start to add our custom CSS so that the logo is sized and positioned correctly for mobile and desktop.
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.
FooterPage position: Microsite footer
This is set to cascade.
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:
|Home||URL||Directs to our home page|
|myWaitrose||URL||External link to our partner’s site|
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.
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.
For our stories to show on the microsite, we need to assign them 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.
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.
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.
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.
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.
For the method, we’ve created a custom style for the list counters and added some extra space between the list items.
To apply these styles, we simply open the HTML view in the story editor and add the classes to the relevant elements.
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.
Some examples of the embedded content we are using are:
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.
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.
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.
A story criteria block – 2 column full width.
A grid layout for our nine recipes.
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.
Related articles list
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.
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.
To view the result of this recipe, visit the microsite on our demo site.
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 documentsClick links below to download and view individual files.
- Other, Size 21.06 kb