Requirement

 Save button more visible

Need

• C: The Save button is not always visible when editing and people need to scroll to find it
• More problematic on wikis that also use Menu App, since their vertical space is reduced (no matter the default values) and the save are on scroll
• O: The user doesn't see the SAVE button while editing
• O: he doesn't understand he must scroll to find the Save button
• O: when memorised where it is located, not easy to reach because of the textarea zone, you have to circumvent this zone by the right
• O: Edit and save button belong to the same category. they're not at in the same sector, this is kind of confusing

Other

• Only 1 Save button: combine "Save & Continue" and "Save & View" inside a dropdown
• O: Remove "Version Summary" or CkEditor bottom space since it's not used and takes space. Preview also not needed

Solutions

Solution 1

• Adjust the height of the editor

Solution 1.1

• Reduce the height of the editor area. Currently CkEditor is using 500px.

Solution 1.2

Solution 2

• Change the position of the save buttons to top, instead of bottom in order to be more visible
• Save near the Edit buttons

Solution 3

• Create a fixed-bottom area for buttons in edit mode that doesn't change position
  

Variants

Changes: 

• Make the buttons visible when they are out of viewport  
  • Bootstrap Affix can be used for the scrolling effect
• When the user scrolls down, the bar goes into its place
• Compress the bottom buttons in a bar that looks like is part of the editor
• Integrate all the functionality in a single row
  • Have Preview just for Syntax editor
• Adapt for FullScreen and Mobile views

Iterations

Proposal 9.x

Proposal 10.x

• Make the buttons visible in a fixed bottom bar
• Integrate all functionality on a single row 

• Problematic:
  • Responsive 
  • Inline mode (current, full width or just content width?)

• Carefull on:
  • Full Screen mode
  • Objects and Class edit modes
  • Cross browser
  • Styling between edit modes

Before

After