Markup.io – mark up websites – pick the KW05

Markup.io logo

Most readers should already be aware that the Mac can be used to add markers, arrows and notes to screenshots very easily and beautifully. This works great with the marking tool in the preview app.

But what do you do when you want to let someone know what changes need to be made to a website? If the website fits completely on one monitor, you can also work with a screenshot and preview, but this is rarely the case. Usually you would have to work with several screenshots and then it quickly becomes confusing.

Markup.io is my pick of the KW05 - with this tool you can add annotations to websites, PDFs or graphics - free and online.

Markup.io is my pick of the KW05 - with this tool you can add annotations to websites, PDFs or graphics - free and online.

Support Sir Apfelot on SteadyHQ

Markup.io – Notes and annotations in every webpage

Here comes the tool markup.io (and mine Pick of calendar week 05 (yes, I know I'm toouuuu late!)) comes into play. Once you have registered there, you can set up a "workspace". Each workspace can be shared with different people and fill multiple websites to work on projects together.

You can then enter a URL in a workspace and use it to create a website that you want to add comments to.

In the Markup.io dashboard you can create workspaces that can be used with different teams. In each workspace, a number of websites are possible, which can then be annotated.

In the Markup.io dashboard you can create workspaces that can be used with different teams. In each workspace, a number of websites are possible, which can then be annotated.

Text-based annotations on live web pages, PDFs and graphics

I only use Markup.io to annotate live websites. However, you can also annotate PDFs and graphics in markup. But I only explain the procedure for websites here. But I think the whole thing works very similarly for graphics and PDFs.

If you now open a website in Markup.io, you will see it in a section of the browser window. The special feature is that you can switch between the "Comment" and "Browse" modes here. In "Browse" you move through the website and can also call up sub-pages or click on buttons. To add comments, you can switch to the "Comment" mode.

In annotation mode, the mouse pointer is a blue icon with a plus sign. If you click on a spot on the website, a blue circle with a number appears there and a text field opens in which you can enter text and also upload PDFs.

Each annotation is also displayed in the left sidebar, so you can quickly jump to the appropriate place.

This is what it looks like when you annotate a web page in markup. The places with annotations are marked with blue circles and each comment can be found in the sidebar on the left.

This is what it looks like when you annotate a web page in markup. The places with annotations are marked with blue circles and each comment can be found in the sidebar on the left.

Collaboration with team members or via share link

Markup.io now offers two ways to share these "marked web pages" with others. Either you invite other markup users to participate in a project or you simply share a project via a link so that non-registered visitors can also see the annotations.

No arrows and drawing tools available

Here's the first small criticism of the tool: You can mainly work text-based, but there are no drawing tools. If you want to work with arrows or circles to mark areas, for example, you will not get any tools from Markup.io. This would be a way to improve the free service.

Each annotation in Markup.io can be understood as a point that can be marked as "solved". This allows you to work through all annotations in an organized manner.

Each annotation in Markup.io can be understood as a point that can be marked as "solved". This allows you to work through all annotations in an organized manner.

Annotations as ToDo list

If you work with several people on a website, you can understand the comments directly as a to-do list. Anyone can view the annotations and mark them as "solved" with one click.

Via the settings for each project you can specify that an email is sent to the participating people when there are new comments or solved comments.

Problems with cookie box in a case

One website gave me a bit of a headache because I couldn't click away the cookie box. I entered the URL of the page and the website opens - with Cookiebox, of course. However, the box was configured in such a way that the website cannot be used unless the box is clicked away.

I couldn't use Markup.io on a particular website because I couldn't click away the cookie box, making the website unusable in Markup.io.

I couldn't use Markup.io on a particular website because I couldn't click away the cookie box, making the website unusable in Markup.io.

So I set the mode to "Browse" and clicked "Accept". Instead of presenting the website to me, the complete page was reloaded and I got the cookie box again. I assume two things come together here:

  1. The cookie box is set to reload the website once you have made your choice about cookies. As a rule, the cookies are now set and the page reloads.
  2. In the current case, however, no cookies can be set, since Markup.io itself is a web service and not a real one Browser is. So the page reloads and states "Ah, the visitor hasn't made a cookie choice yet, so let's show them the cookie box."

So you're stuck in an endless loop and can't use Markup.io with the website. However, this has only happened to me once so far. I was able to use all other websites markup.io beautifully annotated.

-
Did you like the article and did the instructions on the blog help you? Then I would be happy if you the blog via a Steady Membership or at Patreon would support.

2 comments

  1. Daniel says:

    Great tip. I've been looking for a tool like this for a long time. Thanks!

Leave a Comment

Your e-mail address will not be published. Required fields are marked with * marked