UX: Responsive design

[oleq]

Does CKEditor 5 need responsive UI?

Note: This issue is not solely dedicated CKEditor 5 on mobile. It's about general usage of RWD in the UI.

Small mobile devices

• Shouldn't they use a completely different, dedicated UI?

Big touch devices (desktop resolution, but touch interface i.e. iPad)

• Where to use RWD to enhance UX and why?
  • A toolbar which auto–collapses and/or auto–hides less important buttons?
• Should they share the same interface as desktop?
• Is CKEditor 4 dialog positioning good enough for tablets? (center of the screen)
  • Maybe display it fullscreen? (https://dev.ckeditor.com/ticket/8307)
• How to display a toolbar so it's easy to touch?
  • Increase spacing? Increase UI control sizes?

Dekstop

• Where to use RWD to enhance UX and why?

Meta

• Which meta tags should be applied?
• What to do when the webpage has <meta name="viewport" ...> with with and *-scale defined?

[koleary]

One place where CK should really re-think things in terms of how they are responsive is in the button groups in the editor. Try making an editor with 3 or 4 button groups in CK4 and have a look at how it wraps on a phone. It's pretty ugly. You get big gaps of wasted space on the right.

I would argue that button groups should be dispensed with entirely. In their place you could simply allow admins to place a divider if they like. That way every individual button can wrap to the next line and you get far less wasted space.

The only caveat to this would be that there would need to be logic that keeps the divider with the icon that precedes it so that you don't get an orphan divider.

[FinalAngel]

I'd definitely vote for a touch and responsive friendly UI as we are seeing more and more users control or edit content on mobile devices (via django CMS). We faced several problems adapting CKEditor to work nicely on mobile /cc @vxsx . One of our main concerns was the overuse of iframes for displaying dropdowns and additional modals (like editing a link)

[koleary]

This could easily be two lines without the grouping.

[Reinmar]

Cleaning up old discussions. See #186.