Preview content changes in your work with Document.designmode – Smashing Magazine

So you just implemented a change on your site. Congratulations! Everything went according to plan, but now that you look at your work in production, you begin to question your change. Maybe this change was as simple as a new headline and doesn’t seem to fit the room. Maybe you added a picture, but it just doesn’t feel right in the specific context.

What are you doing? Do you start implementing more changes? It is not like you need to crack open illustrator or Figma to mock up on a small change like that, but to preview your changes before implementing them would still be useful.

Enter document.designMode. It’s not new. Actually I recently came on it for the first time and had one of them “Wait, this exists?” Moments, because it is a tool we have had forever, even in Internet Explorer 6. But for some reason I only hear about it, and it turns out that many of my colleagues also hear about it for the first time.

What is exactly document.designMode? Maybe a small video demonstration can help demonstrate how it allows you to make direct edits to a page.

On the simplest, document.designMode Does web pages are edited, similar to a text. I would say it’s like having An edit mode for the Internet – You can click anywhere on a web page to change existing text, move things around and even delete items. It’s like having Apple’s “distraction control” feature on your Beck and call.

I think this is a useful tool for developers, designers, clients and ordinary users.

You may be wondering if this is like contentEditable Because with a moment they both look. But no, the two serve different purposes. contentEditable is more focused on making a specific element edible document.designMode Do The whole Page Editable.

Activation document.designMode Can be performed in the browser’s developer tools:

1. Right -click everywhere on a web page and click Inspect.
2. Click Console The tab.
3. Type document.designMode = "on" and press Enter.

To turn it off, you need to update the page. That’s it.

Another method is to create a bookmark that activates the condition when clicked:

1. Create a new bookmark in your browser.
2. You can name it regardless, e.g. “Edit_mode”.
3. Enter this code in the URL field:

javascript:(function(){document.designMode = document.designMode === 'on' ? 'off' : 'on';})();

And now you have a switch that changes document.designMode To and from.

Use cases

There are many interesting, creative and useful ways to use this tool.

Basic content editing

I dare say that this is the central purpose of document.designModewhich essentially edits any text element on a web page for whatever reason. It can be headlines, paragraphs or even ball points. Notwithstanding anything to the case, your browser effectively becomes a “What you see is what you get” (wysiwyg) editorwhere you can make and view changes on site.

Landingside A/B test

Let’s say we have a product site with an existing copy, but then you check your competitors and their copy looks more appealing. Of course you will test it out. Instead of editing on the back or noting for later, you can use document.designMode To immediately see how that copying variation would fit into the layout of the destination page and then easily compare and contrast the two versions.

This can also be useful for copywriters or solo developers.

SEO -Title and Meta description

Everyone wants their site to rank at the top of the search results because it means more traffic. As wide as SEO is like a practice,