Using contenteditable while designing with a browser
While I’m finalising the table of contents for my ‘shot,’ I’ve been thinking about the things that I regularly do when I’m ‘Designing with a Browser’, one of which is using the contenteditable attribute in the templates that I share with clients.
contenteditable was originally intended to make building those WYSIWYG editors we all love so much in a browser. I’m not sure how well that went, but regardless, contenteditable makes any element in HTML5 any element editable. Just click in a text element, type to add more text, or select some type and replace it.
Go, go, go, rillas!
When we launched our Go, go, go, rillas! design in 2013, I made the introduction paragraph editable as an easter egg. I figured that if people were going to make up shit about me, they might as well use my own website to do it.
The “It’s the taste” tagline on our current homepage is editable too, because, well why not?
Designing with a browser
As well as making it easier to judge how a design ‘responds,’ when we deliver designs as HTML, we want people to judge their content in the context of our design and to understand the implications of writing too much or too little.
Using contenteditable enables them to edit content within our HTML design. Making any element editable is as simple as adding the contenteditable attribute to any element in your HTML:
‹h1 contenteditable="true"›It’s the taste‹/h1›If you want to make multiple elements editable, for example paragraphs, you must add the contenteditable attribute to each one:
‹p contenteditable="true"›…‹/p›
‹p contenteditable="true"›…‹/p›
‹p contenteditable="true"›…‹/p›I must admit, this can be a bit of a pain, so you could choose to add the attribute to specific divisions of content:
‹div role="main" contenteditable="true"›Helps make design a little more collaborative
I’ve found allowing people to see easily the impact that changes to content has on a design incredibly useful and it’s saved me countless explanations. It also seems to make people feel more a part of the design process rather than an observer, and that’s always a good thing. If you’ve had experience with something similar, I’d love to hear about it here or on Twitter.