designMode is a property of the document object that we can use to enable “design” capabilities on any web page. Basically we can change the text on any website.
This sounds like a simple feature. Almost unnecessary, but it isn’t! This tool can be very useful when prototyping or designing any page.
When developing copy for example, you can easily try new copy and see exactly how it will look and respond down or up on smaller (or larger) screens. If you’ve ever written copy for a website you know that the way the text breaks on one device vs another matters.
Being able to visually see the copy changes (and their impact) live as you make them also avoids the inherent back and forth between copywriters, design, and dev.
Ok. So designMode is great. But let’s be honest, having to open the inspector and typing document.designMode = ‘on’ every time you want to update the copy on a site just to see how it looks, is too much work.
Which is why we are so excited to announce that we deployed a free Google Chrome extension to help do exactly this.
Spectra Design Mode is a free extension that lets you turn deignMode on and off with the click of a button.
