WYSIWYM

(ressuscité depuis https://web.archive.org/web/20141114205916/http://dev.over-blog.com/wysiwym)

Most blog platforms, such as Overblog, and CMS in general allow users to write on editors called WYSIWYG, meaning : What You See Is What You Get. The goal is to help writers to preview the final rendering they will get on their websites while typing.

With the old version of Overblog, we found several problems while using the RTE (Rich Text Editor) system that is needed to make a WYSIWYG experience:

  • It generates HTML that the user will never see. So the generated HTML code become quickly a tagsoup without any meaning with empty imbricated "div" and "span" and others meaningless tags. HTML5 provides new semantics tags, why couldn't we help writers to make semantics contents? A semantic content has a better accessibility and will improve visibility of search results.
  • A RTE is technically very difficult to maintain: it uses some browser's proprietary functionnalities which are not standardized between each other. Internet Explorer, Gecko (Firefox), Webkit (Safari, Chrome) and Opera have their own implementation of the "ContentEditable" feature and none of them will have exactly the same behavior. Hopefully, frameworks such as TinyMCE exist, but they will never be perfect.
  • We can show the users the natural way to write theirs posts by providing them a visual structured content editor. No need to write HTML code, no need to use all useless buttons like "font family selection", "text color", etc. An editor tool can provide simple and necessary features for every section. This is the best way to write semantic content.

A new start

When we started thinking about the new Overblog version, we wanted to think again about the main feature of a CMS: the writing interface. Based on the experience of one of our projects (Wikio Experts) where semantic was very important and where we had to impose a very restrictive writing interface, we designed this new way to write content.

We threw away WYSIWYG approach to adopt a WYSIWYM way. This interface helps to perfectly structure any content, even if you mix texts with images, videos, or, as you might see, anything you want.

WYSIWYM WYSIWYM WYSIWYM

As you can see on the screenshot, the interface is everything but not like what you get on this rendered post. You have a selection of typed sections that you can add and reorganize as you wish. You can start a text section with two paragraphs such as introduction of your content, attach a picture to it, then add a video section with a youtube video before starting the second text section. Then you can conclude with an images section containing a serie of photos which would be displayed with a slideshow.

All the sections impose a strict framework which make sure writers will concentrate only on the content and not the way to display. We still need to provide some flexibility by using parameters not to frustrate them too much.

Text section

The text section is made with a very simplified text editor with only the necessary buttons: paragraph type, bold, italic, deleted, links, lists. And you can attach a picture which will decorate the text section. No more paragraphs in Comic Sans MS after another paragraph in Courier followed by a H3 heading, then a H1 title.

WYSIWYM

Images section

This section let you upload as many images as you want. No more filesystems, folders, files managements… All is as simple as possible! You want to make a photo album? You make an images section and you can drag'n'drop your files on it or type the url of a hosted file.

You can reorder the pictures by drag'n'droping and choosing a display template. You can use a very simple album management inside a simple post.

Imageception

Quote section

A simple way to quote an author. You set the quoted words, the author name, and if necessary the uri source.

If you want to talk about a website or a blog post, just type its url in this section. You'll get its title, snippet and thumbnail. All you have to do is to write a description next.

Video section

Like the link section, you simply type a video url from youtube or any other video provider and the video will be added to the post. You can also search a video by typing keywords and selecting one of them in the results list.

Audio section

Search and select a song, or upload your own mp3 file to add into an audio player on the current post.

Place section

You want to talk about a place? Just search it by typing the address, adjust your pin, and write about it!

What You See Is What You Mean

As you can see, all is made to help writers to concentrate only on the content of their posts.

Don't spend time to find a way to assemble awkwardly pictures inside a table to display something like a photo album in your WYSIWYG editor. Don't spend time to find workarounds to emphasize a website you want to be perfect… JUST WRITE!

That's the difference between WYSIWYG and WYSIWYM.

Hadrien

Hi, I'm a french Web Lead Developer, Front End Architect from Toulouse, France. I've worked for 7 years for Overblog then 2 years with AngularJS. Now, I'm a great fan of Aurelia.io.

Toulouse, France https://hadrien.eu