With current toolbar system, toolbars under a certain viewport size are running into usability limitations (exemplified product: Visual Editor < 900px T92315). Given the already in-place usage of toolbars in VE, Flow, MobileFrontend and upcoming Content Translation, we need to ensure decent behavior and user experience independent from viewport.
- Below 900px single toolbar wraps into two lines
- Below 375px toolbar wraps into three lines (iPhone 5) and only second one is separated with top border, third one not
- We need to ensure minimum tap size on tools, so we can't shrink tools infinitely
|iPhone 5 320px||iPhone 6 375px|
Wrapped toolbars do oppose the impression as toolbar and should be avoided.
- Focus on a sufficient tool availability on small viewports without wrapping.
- Possibly enable configuration option (?) for icon+label combination on wider screens, see also T95233
Possible ways to accomplish:
- Reduce “Publish changes”/“Save changes” to “Publish”/“Save”
- There's a lot of possible issues around this specific way, a.o. i18n problems and general confusion, see T131132 for broad discussion
- Remove certain tools on smaller viewport
- Flow does provide only 4 tools for instance: basic styling, link, mention user and switch editors
- Concatenate certain tools under one on smaller viewports
- Remove labels and go for icon only treatment of tools
Flow in Sept 2017:
User research will be needed in the process. Also previous user testing findings could be of use.