User-generated content is something that we as web developers, designers, and managers struggle with attempting to control; we don’t know what our users will write or how they’ll write it. Regain control of your user generated content with the power of HTML5 and CSS3.
Your web team takes utmost care in their product; you have style guides, pattern libraries, testing suites, and weekly meetings on the state of the product and where you can solidify your presence. You produce something that works for your customers’ needs and stands out to potential consumers. Each piece works with each other for a solid and stable application. Then you introduce users to the system and watch all the hard work teeter and succumb to that which you can’t control: user-generated content.
The style guides and pattern libraries aren’t for them; they didn’t attend the weekly meetings and learn that you should only use these fonts, these colors, this HTML. And invariably, they’ll leave you weeping at seeing what your testing didn’t uncover. And that’s okay! Its all part of the job, right?
CSS Class systems (such as BEM, Bootstrap, and Tailwind) are great tools for the structure and content that the developer controls. Your users aren’t going to follow the same conventions, they don’t want to get down into the coding level, nor should they have to. And you shouldn’t put in heartless hours trying to get your WYSIWYG to play nicely with all the variants that they may throw at it; that’ll only end in heartache.
Using HTML5 and CSS3, we can strengthen our control and keep our brands intact. Designating user-generated content areas as such (using distinct wrapper elements), we can rely on the general DOM (Document Object Model) and use the included power of CSS to lock down the visual representation of user content and get it to work with the surround site.
You can get the gist of the presentation throught our slides. Be careful: there be dragons!