Make website annotation an integrated part of your marketing workflow

Proofing rounds, review sessions and feedback notes is probably one of the most time consuming processes in marketing today. It doesn’t matter if you are working at a retailer, a creative agency or a big multinational brand. 

It takes up much more time than it should.

And in a line of business where time, literally, is the same as money it's crucial to be able to review and proof content quickly and efficiently. 

One of the problems we face when it comes to review rounds is that the more complex the asset under review is, the harder the review process becomes. This is because annotating a live website, for instance, or a video on YouTube is a lot harder than adding annotations to a text document where you can simply add a comment to the document itself.

However, many of these problems can be remedied by using a website annotation tool such as the one available on the Encodify platform.

So, let’s take a look at how you can make your review process faster and smoother for your website or other online content.

What is website annotation

Website annotation is the act of adding notes or comments to a live website without making any changes to the HTML code commonly through the use of an online annotation tool. This makes the notes visible to other users of the same annotation tool.

As such, website annotation is an easy way to provide feedback during web design or development projects.

A process that would otherwise require a number of alignment meetings or endless emails and instant messages becomes quick, easy and manageable through the use of a website annotation tool.

How is web annotation different from HTML annotation?

In both the case of web annotations and HTML annotations we’re dealing with adding comments or notes to a website, but the way it is done, and why it is done often differ.

Website annotation is usually done as part of a review process, so the comments will often be suggestions on what to change, what to add, and how to improve the website.

HTML annotations are comments made directly to the code, but that will not be visible in the browser. To add an annotation or comment to an HTML code, the string <! -- --> is used. Anything that is written in between “<! --" and “-->” will be considered a comment and will not be rendered by the browser.

The key difference between the two, is that an HTML annotation is part of the code itself where an annotation made with a web annotation tool is more of an overlay and will only ever be visible to people who are working on the same project using the same annotation tool.

Because of this difference, web annotation tools are more common in marketing where not everyone has access or the ability to add comments to the code.

Who needs a website annotation tool?

Web annotation systems can be used for a wide range of purposes, especially when it comes to tools like Encodify for Chrome, which can be used not only to review and annotate websites, but can be used to review any online content.

However, some use cases are a lot more common than others.

1. Creative agencies

For a couple of reasons, creative agencies hold one of the more common use cases for online proofing tools and web annotation systems.

Primarily there’s the internal alignment between different roles. For instance, the copywriter will have an idea as to the layout of a webpage when writing it, the designer will have a wish for how everything looks, and the developer needs their feedback when building the webpage. And quick comments on logo sizes, placement of highlights etc. is by far the most efficient way to manage the collaboration between the different roles.

Additionally, the client usually has an artistic desire, and the agency management will have an opinion too. And without an annotation tool this process becomes a series of meetings, which takes up way more time than just adding a comment to the website.

2. In-house marketing teams

For in-house marketing teams the use case for a website annotation tool is often more isolated around the marketing functions, but it is still quite similar to that of the creative agencies.

The person in charge of generating content for the website has a vision which needs to be carried out by the webmaster, and the campaign manager, marketing manager or CMO needs to be able to review the pages to make sure that everything is aligned with the overall marketing strategy.

Again, this could be done without a dedicated tool to handle website annotations, but this usually leads to an endless string of back and forth emails between the involved members.

3. Higher learning

This is one of the more fringe use cases when it comes to website annotation, but that doesn’t make it any less common. Whether we’re talking grad students, PhD’s or professors, a big part of their work consists of annotating texts and adding notes to further their own understanding of a subject.

And as everything is becoming more digital, the days of highlighting with a marker and writing notes in the margin of the book is quickly becoming a thing of the past, and that’s where online annotation tools come in, as they give students and teachers alike the ability to add notes directly to the texts they are reading and even sharing those notes with each other.

How to annotate your website in 6 easy steps

You can easily annotate HTML or URL links with with the Encodify extension for Chrome and Microsoft Edge. It's pretty easy, just follow these six steps.

Step 1: Install the Chrome browser extension

To get started, you'll need to install the Encodify forChrome browser extension from the Google Web Store (you can download the extension here). The extension is free to use as long as your Encodify solution includes Online Proofing.

Step 2: Access the annotation tool

Once you've installed the extension, you'll see a new Encodify icon in your Chrome browser.

Step 3: Select the page to annotate

Next, navigate to the page on your website that you want to annotate. Copy the URL and open the Encodify proofing tool. Once the tool is open, instead of uploading an image, choose the URL function and paste the link you copied. This will generate a file you can proof like you usually would. Except this file takes live data from the site you have pasted. You can also handle website annotations by directly uploading HTML files and zipped HTML files to the Encodify platform.

‍

‍

Step 4: Add annotations

Now, you can add annotations to the page. Click on the area of the page that you want to annotate, and a text box will appear. Type in your annotation and click "Save" to add the comment to the page. You can use the toolbar at the bottom to change colours and add figures, even arrows, to further enrich your remarks as you annotate.

‍

Step 5: Auto-generated screenshot

Once you've annotated the page, the tool generates a screenshot which includes your annotations. This ensures that even though changes are made on the live site, you always have an image from when you made the annotation.

Step 6: Review and approve annotations

Now that you've annotated your website and generated a screenshot attachment, it's time to review and approve the annotations. Use the approval tool in the Encodify platform as you normally would, and put it through the workflow for your stakeholders to review. Once everyone has approved the annotations, you can implement any changes you've agreed upon to the website.

‍