Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make it clear that editor samples in the docs are demos #1188

Closed
AnnaTomanek opened this issue Aug 2, 2018 · 10 comments
Closed

Make it clear that editor samples in the docs are demos #1188

AnnaTomanek opened this issue Aug 2, 2018 · 10 comments
Labels
resolution:expired This issue was closed due to lack of feedback. status:stale type:docs This issue reports a task related to documentation (e.g. an idea for a guide).

Comments

@AnnaTomanek
Copy link
Contributor

Since the editors use the same font as the docs text, they are beautiful and consistent, but it's not always immediately clear that (1) they are interactive working examples and not a part of guide text and (2) they are not screenshots.

Any ideas how to make them stand out more, encourage people to play with them?

https://docs.ckeditor.com/ckeditor5/latest/features/blocktoolbar.html
screen shot 2018-08-02 at 11 30 16

https://docs.ckeditor.com/ckeditor5/latest/features/basic-styles.html
screen shot 2018-08-02 at 11 32 23

cc @m-kr @dkonopka @RyszardB

@AnnaTomanek AnnaTomanek added the type:docs This issue reports a task related to documentation (e.g. an idea for a guide). label Aug 2, 2018
@wwalc
Copy link
Member

wwalc commented Aug 2, 2018

The block toolbar is probably the most challenging example so far. As for the screenshots the most easy solution to distinguish demos and screenshots would be probably adding some styles to images that would make them stand out. Lika a border that makes them look like a post stamp or whatever.

@AnnaTomanek
Copy link
Contributor Author

What about this:

encourage people to play with them

I mean, it doesn't need to be an animated fairy flying around and pointing at the demo, but some encouragement might be nice?

Also cc @wojtekidd and @gok9ok

@Reinmar
Copy link
Member

Reinmar commented Aug 14, 2018

Ping.

@Mgsy Mgsy added this to the next milestone Jul 22, 2019
@Reinmar
Copy link
Member

Reinmar commented Sep 13, 2019

I'd see some sort of "window" around every editor. Something which pulls out the demo from the flow of the document. Perhaps, something similar to our blog:

image

However, the tricky part here will be to give there enough white space around the demo so the "window" doesn't affect the "lightness" of the editor UI.

In the future, we will also have to add stuff like tabs for HTML, JS and CSS and some "Edit" button. But that's... future.


Recently, one more interesting idea appeared – to have a note next to each editor demo that it does not use all the features. With a link to a full list of those. People are apparently confused when checking our demos because we use a small subset of all available features.

@wojtekidd
Copy link
Contributor

I think that to solve the problem you could use a clear (and esthetically-pleasing) CTA like a stamp that says "Play with the demo" or "This is a real CKEditor instance", etc.

@Reinmar
Copy link
Member

Reinmar commented Nov 1, 2019

Example from notion.so:

image

It's actually a working demo under this overlay. So you just click and it works.

@Reinmar Reinmar modified the milestones: nice-to-have, next Nov 4, 2019
@Reinmar Reinmar modified the milestones: next, nice-to-have Nov 4, 2019
@oleq
Copy link
Member

oleq commented Feb 17, 2020

(somehow) related issue #6267.

@pomek pomek removed this from the nice-to-have milestone Feb 21, 2022
@godai78
Copy link
Contributor

godai78 commented Jul 28, 2022

We have recently introduced "demo footers" that are quite good in getting the message across:

@CKEditorBot
Copy link
Collaborator

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

@CKEditorBot
Copy link
Collaborator

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).

@CKEditorBot CKEditorBot added the resolution:expired This issue was closed due to lack of feedback. label Nov 3, 2023
@CKEditorBot CKEditorBot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
resolution:expired This issue was closed due to lack of feedback. status:stale type:docs This issue reports a task related to documentation (e.g. an idea for a guide).
Projects
None yet
Development

No branches or pull requests

10 participants