9

I am working on a playground for designers and front end developers. One of the features it has is the live preview. This means that while you are changing your html or css code you can preview the result in real time. Most of other similar sites like jsbin, jsfiddle, codepen are solving this problem by using panels. The problem with these is that you can preview the page you are working on just in a that small pane. In Adobe Dreamveaver you can split the screen. You code on the left side, and preview it on the right side. I'm trying to make that "live preview" experience better. I would love to have a preview area as big as possible, but still have enough space for writing code.

One possible solution can be having the preview full screen, and writing code in a moveable window. The window will cover some part of the preview, but you can move it where you want.

My question is: How can I improve the live preview exprience in this situation? Is there a better way to improve ux?

Improve this question

4 Answers 4

Reset to default
6

Having split panels will still most likely be the most useful way of seeing both the code and the preview at the same time. Something to keep in mind is that a lot of designers and developers have a lot more screen real estate than what they need to design for, so many have no problem with a split screen.

However there are two things I can think of that may improve the experience for users.

  1. Allow the panels to be resized. Very often I want the preview to take up most of the screen, and only need the code to be fairly narrow (80-120 column width).
  2. Use tabs that switch the screen view between code and preview. If you do this, please make use of keyboard shortcuts to switch the tabs. Being able to do this quickly while typing makes it only slightly slower than seeing them both at the same time.
  3. Support having the prieview and the edit panels on separate monitors. Many people design on muti-monitor setups with smaller screens, and this makes their lives a lot easier.
Improve this answer
3
  • Thank your for your precious answer John. I will definitely keep your recommandations in mind, use them. Commented Jan 24, 2013 at 14:00
  • 2
    I would certainly add "Support preview to be displayed on aother monitor*, i.e. throw it on another monitor without a lot of resizing and dragging and adjusting. Commented May 15, 2013 at 13:39
  • 1
    @peterchen excellent point. I'll add it to the answer. Commented May 15, 2013 at 14:35
1

In my own experience, I often want to preview my design at a specific screen resolution. Say I'm designing an enterprise application that must work well at 1024x768, I often open my design in it's own browser window and set that window to the specific size that I want using developer tools, trying to approximate the end user experience. You could look at ways to offer specific sizes for the preview pane or ways to show the dimensions of the preview. Also having a back door to open the preview in a new browser window/tab would give the designer who has a large screen the control they want to place code and design side by side.

Improve this answer
1
  • I was already thinking about the "set preview size" options, but now I'm sure I have to build it in the app. Thank you for your ideas. Appreciate it! Commented Jan 25, 2013 at 8:35
1

I find the way Adobe Flash or Chrome Web Inspector work really pleasant. You just find the element you want to change, and you get the relevant code and style.

Usually, you don't need the preview when you're writing code, only when you're modifying it ("if I change the background color, how will it affect the whole design?"). Therefore having an editable preview seems more relevant than a split view.

I think having a small space for code isn't an issue, as long as you can find the code associated with a specific part of the design easily.

Improve this answer
1

Put the code and preview in separate windows, and let the user do what works best for them:

  • Put code on top of preview
  • Put code and preview side-by-side on one monitor. (Assuming this is for Windows, Snap makes this trivial to do.)
  • Put code and preview on different monitors.
  • Set preview window size to some specific resolution.

Don't build a lowest-common-denominator experience; build one that people can adapt to their needs.

Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.