Previewing Content Changes In Your Work With document.designMode — Smashing Magazine

So, you have just changed your website. Congratulations! Everything went according to the plan, but now when you look at your work in production, you start questioning your change. Perhaps this change was as easy as a new heading and it seems that it doesn’t fit. You may have added an image, but in this particular context it does not feel right.

What do you do? Do you start to deploy more changes? It is not that you need to break the open allsti or Figma to make fun of such a small change, but it will still be helpful to preview them before deploying your changes.

Insert document.designMode. This is not new. In fact, I just came to him for the first time and was one of them “Wait, is it there?” Moments because it’s a device We have been foreverEven in Internet Explorer 6. But for some reason, I’m just listening to it now, and found that many of my colleagues are also listening about it for the first time.

Exactly what is document.designMode? Perhaps a small video can help show that it allows you to edit a page directly.

On its easiest, document.designMode Like a text editor, web pages edit. I would say that is the same An edit mode for the web – Anyone can click anywhere on the web page to edit the current text, move the goods around, and even delete the elements. It’s like being Apple’s “disturbing control” feature On your back and call.

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

You may be wondering if this is exactly the same contentEditable Because, at a glance, they both look alike. But no, both serve different goals. contentEditable Is more focused on editing a particular element, while document.designMode Makes All Page Editing.

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

1. Click right and click anywhere on the web page Inspect.
2. Click on Console Tab.
3. Brand document.designMode = "on" And press Insert.

To turn it off, refresh the page. Just

Another way is to make a bookmark that activates the mode by clicking:

1. Make a new bookmark in your browser.
2. Whatever you can name, like, “Edit_Mode”.
3. Input this code into the URL field:

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

And now you have a switch that toggles document.designMode On and off and off

Use matters

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

Editing the main content

I dare to say that this is the main purpose document.designModeWhich is primarily editing any text element of a webpage for any reason. These titles, paragraphs, or even bullet points may be. Anything happen, your browser becomes an effective way “What you are seeing is what you get” (WYSIWYG) EditorWhere you can make changes on the spot and preview.

Landing page A/B testing

We say we have a product website that has the current copy, but then you check your competitors, and their copy looks more attractive. Naturally, you want to test it. Instead of editing at the previous end or taking notes later, you can use document.designMode Immediately see how this copy will fit into the different condition of landing pages layout and then easily compare both versions and vice versa.

It can also be useful for copywriters or solo developers.

SEO Title and Meta Detail

Everyone wants their website to be ranked top in search results because this means more traffic. However, as wide SEO as an exercise,