18

The UX issue of the Markdown preview being under the edit box has been discussed several times:

The answers proposed brought up several counter-arguments to implementing a side-by-side preview:

  • "screwing low-res users", along with statistics of visitor screen size, as of 2010
  • "The design of the site is always a single column downward. When anything expands, it expands further downward."
  • this could be done via userscripts [NB: I have found none that work]
  • the side panel displays useful information, such as the Similar Questions list

I would like to propose a different solution that's already implemented in SE-inspired discussion software Discourse and works very well:

Discourse does it better

Advantages

  • tried & tested - Discourse is mature software
  • familiarity - Jeff Atwood is/was behind both SE and Discourse
  • the code is already available - Discourse is open source
  • autoscroll is implemented
  • accessible to low-res users as well via the fluid layout. The screenshot below is shot at about 1024px width
  • preserves the sidebar - you can see related topics in Discourse; SE can display related questions
  • the "hide preview" link reverts to a single-column editor, and could place the preview under it, to replicate the current layout

For those who want to make sure they avoid horizontal scrollbars in code blocks, the preview area could be sized by default to the current preview size, and a divider between the editor and the preview (just as Discourse has one between the editor+preview and the posts area) could allow further control over the editor vs. preview width.

3

I've tweaked and added to ˈjuː.zɚ79365's version of a side-by-side editing script from Mathematics.SE to make it work again. It's in a userscript format.

Side by Side editing @ Stack Apps

example image

For more information and an installation link, please visit my Stack Apps post :)

This script does not, unlike Discourse, have autoscroll, and does not preserve the sidebar.

It just about fits side-by-side on my 1366 x 768 monitor, so I'd say that's the minimum size you should have...


Note: I have also added this feature to my SE Additional Optional Features userscript (as of v1.5).

Install it to get this feature and many more all collated into one big userscript - all options are optional! See the Stack Apps post for more info on installation.

  • How can we implement or use this for all StackExchange sites? Can users put something in their browsers? – Alex S Aug 7 '15 at 12:03
  • @AlexS if you follow the link to my 'SE Additional Optional Features' script - you will see the 'Installation and Requirements' section - over there, it tells you how you can install this userscript :) Feel free to comment over there if you're having trouble installing it! :) – ᔕᖺᘎᕊ Aug 7 '15 at 12:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .