Aperçu des changements de contenu dans votre travail avec document.designMode

Donc, vous venez de déployer un changement dans votre site Web. Bravo! Tout s’est déroulé comme prévu, mais maintenant que vous regardez votre travail en production, vous commencez à remettre en question votre changement. Peut-être que ce changement était aussi simple qu’un nouveau titre et ne semble pas s’adapter à l’espace. Peut-être que vous avez ajouté une image, mais cela ne semble pas juste dans ce contexte spécifique.

Que fais-tu? Commencez-vous à déployer plus de modifications? Ce n’est pas comme si vous deviez craquer l’illustrateur ou Figma pour se moquer d’un petit changement comme ça, mais le prévisualisation de vos modifications avant de les déployer serait toujours utile.

Entrer document.designMode. Ce n’est pas nouveau. En fait, je viens de le rencontrer pour la première fois et j’en ai eu un «Attendez, cela existe?» moments parce que c’est un outil Nous avons eu pour toujoursmême dans Internet Explorer 6. Mais pour une raison quelconque, je n’en entends que parler, et il s’avère que beaucoup de mes collègues entendent également parler pour la première fois.

Qu’est-ce que exactement document.designMode? Peut-être qu’une petite démonstration vidéo peut aider à démontrer comment elle vous permet de faire des modifications directes vers une page.

À son plus simple, document.designMode rend les pages Web modifiables, similaires à un éditeur de texte. Je dirais que c’est comme avoir un mode d’édition pour le Web – On peut cliquer n’importe où sur une page Web pour modifier le texte existant, déplacer des trucs et même supprimer des éléments. C’est comme avoir Fonctionnalité «Contrôle de distraction» d’Apple à votre service.

Je pense que c’est un outil utile pour les développeurs, les concepteurs, les clients et les utilisateurs réguliers.

Vous vous demandez peut-être si c’est comme contentEditable Parce que, en un coup d’œil, ils ont tous les deux l’air similaires. Mais non, les deux servent des objectifs différents. contentEditable est plus axé sur la création d’un élément spécifique modifiable, tandis que document.designMode marque tout Page modifiable.

Habilitant document.designMode Peut être fait dans les outils du développeur du navigateur:

1. Cliquez avec le bouton droit sur une page Web et cliquez sur Inspecter.
2. Cliquez sur Console languette.
3. Taper document.designMode = "on" et presser Entrer.

Pour l’éteindre, actualisez la page. C’est ça.

Une autre méthode consiste à créer un signet qui active le mode lorsque vous cliquez:

1. Créez un nouveau signet dans votre navigateur.
2. Vous pouvez le nommer, par exemple, «edit_mode».
3. Entrez ce code dans le champ URL:

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

Et maintenant tu as un interrupteur qui bascule document.designMode activé et éteint.

Cas d’utilisation

Il existe de nombreux moyens intéressants, créatifs et utiles d’utiliser cet outil.

Édition de contenu de base

J’ose dire que c’est le but central de document.designModequi modifie essentiellement tout élément de texte d’une page Web pour une raison quelconque. Ce pourrait être les titres, les paragraphes ou même les puces. Quoi qu’il en soit, votre navigateur devient effectivement un «Ce que vous voyez, c’est ce que vous obtenez» (Wysiwyg) éditeuroù vous pouvez apporter et prévisualiser les modifications sur place.

Test de la page de destination A / B

Disons que nous avons un site Web de produit avec une copie existante, mais que vous consultez vos concurrents, et leur copie semble plus attrayante. Naturellement, vous voudriez le tester. Au lieu de modifier le dos ou de prendre des notes pour plus tard, vous pouvez utiliser document.designMode Pour voir immédiatement comment cette variation de copie s’intégrerait dans la disposition de la page de destination, puis comparer et comparer facilement les deux versions.

Cela pourrait également être utile pour les rédacteurs ou développeurs en solo.

Titre SEO et méta description

Tout le monde veut que leur site Web se classe au sommet des résultats de recherche car cela signifie plus de trafic. Cependant, aussi large que le référencement est en tant que pratique, le <title> Tag et <meta> La description est la première impression d’un site Web dans les résultats de recherche, à la fois pour les visiteurs et les moteurs de recherche, car ils peuvent faire ou casser le taux de clics.

La question qui se pose est la suivante: comment savez-vous que si un certain texte est coupé dans les résultats de recherche? Je pense document.designMode peut résoudre ce problème avant de le pousser en direct.

Avec cet outil, je pense qu’il serait beaucoup plus facile de voir à quoi ressemblent les différentes longueurs de titre lorsqu’ils sont tronqués, si les mots clés sont instantanément visibles, et à quel point il serait comparé à d’autres concurrents sur le même résultat de recherche.

Flux de travail des développeurs

Pour être complètement honnête, les développeurs ne voudront probablement pas utiliser document.designMode pour les travaux de développement réels. Cependant, il peut toujours être pratique pour briser les choses sur un site Web, déplacer des éléments, repositionner des images, supprimer des éléments de l’interface utilisateur et annuler ce qui a été supprimé, le tout en temps réel.

Cela pourrait aider si vous êtes sceptique quant à la position d’un élément ou si un bouton pourrait faire mieux en haut qu’en bas; document.designMode Bien sûr, pourrait aider. Il bat certainement les éléments de réarrangement dans la base de code juste pour déterminer si un élément positionné différemment aurait l’air bien. Mais encore une fois, la plupart du temps, nous développons dans un environnement local où ces choses peuvent être faites tout aussi efficacement, de sorte que votre kilométrage peut varier en ce qui concerne l’utilité document.designMode dans votre travail de développement.

Collaboration client et équipe

C’est une évidence que certains clients aient presque toujours des demandes de changement de dernière minute – des trucs comme «Pouvons-nous supprimer ce bouton?» ou « Modigeons les fonctionnalités de tarification dans le niveau libre. »

Pour le client, ce ne sont que de petits ajustements, mais pour vous, il pourrait être un problème de démarrer votre environnement de développement pour apporter ces modifications. Je crois document.designMode Peut aider dans de tels cas en effectuant ces changements en secondes sans toucher à la production et en partageant des captures d’écran avec le client.

Il pourrait également devenir utile dans Réunions d’équipe lors de la discussion des changements d’interface utilisateur. Voir des changements en temps réel grâce au partage d’écran peut aider à faciliter la discussion et conduire à des conclusions plus rapides.

Tutoriels DOM en direct

Pour les débutants qui apprennent le développement Web, je me sens comme document.designMode peut aider à fournir un premier aperçu de ce qu’il ressent de manipuler une page Web et de voir immédiatement les résultats – un peu comme une étape de développement pré-Webavant même de toucher un éditeur de code.

Alors que les apprenants expérimentent les choses, un instructeur peut expliquer comment chaque changement fonctionne et affecte le flux de la page.

Aperçu du contenu des médias sociaux

Nous pouvons utiliser la même idée pour prévisualiser les publications sur les réseaux sociaux avant de les publier! Par exemple, document.designMode Peut évaluer l’efficacité de différentes phrases d’appel à l’action ou visualiser à quoi ressemblerait la copie d’annonces lorsque les utilisateurs trébuchent dessus lorsqu’ils font défiler la plate-forme. Cela serait efficace sur n’importe quelle plate-forme de médias sociaux.

Mèmes

Je ne pensais pas qu’il serait juste de ne pas ajouter ceci. Cela peut sembler hors de propos, mais soyons francs: la création de mèmes est probablement l’une des premières choses qui vous vient à l’esprit lorsque quelqu’un découvre document.designMode.

Vous pouvez créer des versions de parodie des publications sociales, modifier les titres de l’article, modifier les prix des produits et manipuler les vues YouTube ou les commentaires Reddit, pour nommer quelques-unes des façons dont vous pourriez faire des choses. N’oubliez pas: cela ne devrait pas être utilisé pour diffuser de fausses informations ou causer des dommages réels. Veuillez le garder respectueux et éthique!

Conclusion

document.designMode = "on" est l’une de ces délicieuses astuces de navigateur qui peuvent être immédiatement utiles lorsque vous la découvrez pour la première fois. C’est un outil brut et primitif, mais vous ne pouvez pas nier son utilité et son objectif.

Alors, essayez-le, montrez-le à vos collègues, ou même modifiez cet article. Vous ne savez jamais quand cela pourrait être exactement ce dont vous avez besoin.

Dès la lecture

(GG, YK)