Humancell
sad I’m sad

Full Screen Presentation, stop the mock-ups from moving

I am creating some extensive mock-ups for some iPhone applications. I created a base mock-up for the phone, and then have cloned each and every other mock-up from that. I am then linking them together.

This is all working, and as I flip between the mock-ups in the "design" mode they are all perfectly aligned, and the transitions are smooth.

When I then go into the Full Screen Presentation mode to show to a customer, the mock-ups are NO LONGER aligned ... they are all slightly shifted left and right. So as I click the links to go through the demonstration the result is jerky and moves ... not what I expected. :-(

Why are the mock-ups being moved in the Full Screen Presentation, when they are perfectly aligned in the design mode?
35 people like
this idea
+1
This topic is no longer open for comments or replies.
  • Michael
    This is because in Full Screen, the mockups are automatically centered. I have struggled with this myself. You can solve it by putting a transparent background UI control that encompasses your entire area on each of your mockups.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Humancell
    silly I’m unsure
    Yes ... I can understand your struggle. Here is the issue that I am running into. We are building an iPhone application, and take considerable time to get everything exactly lined up, so that in full screen mode we can walk through the demo for the client ... and it fails. :-(

    It seems that maybe the "Centering" ought to be an option of something ... instead of making us inject extra components to have it align exactly the way that we created the demo?

    The alternative would be leave the design exactly was we lay it out ... and the provide a feature to "Center on Screen" any component that is laid out. That way the designer always gets exactly what they create at run-time (Full Screen mode).

    We're just looking for the cleanest way to do a mock-up "mock-through" (as opposed to walk-through :-) without having to add an unused component to each page.

    I'll try doing that for now ... to get by ... :-)
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • dan2bit
    indifferent I’m surprised this is the default behavior
    2
    It doesn't require an extensive set of linked mockups to see this misbehavior in presentation mode. A simple interaction of a button opening a menu will show it, unless (as others noted) there is some common framing element in both mockups.

    Since the bmml stores position data, I think the default behavior of presentation mode should be to "pin" all mockups to the upper left corner of the presentation palette, rather than centering them all based on the components they contain. Centering should be an option, but to present an interaction, you really mostly want the position maintained across mockups as it is in design mode.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Dave Sussman
    I'd love to be able to define a fixed size for mockups so that when viewing in full screen mode, a smaller page doesn't jump as it centres on the page. Or, in full screen mode align to the top-left instead of the centre.

    This reply was created from a merged topic originally titled
    Fixed size in full screen mode.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • jason
    sad I’m sick of scrolling to the top of the page !
    A problem with Full screen presentation mode - Links to new pages DO NOT load or show starting at the top of the page. If you are linking btw pages that are long this behavior is nothing like that of a browser. After hitting a link, I end up scrolling up to the top of every page just to see what it is... can you suggest any workarounds of fixes. thanks jason

    This reply was created from a merged topic originally titled
    Full screen presentation scrolling and page load.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • marc
    indifferent I’m slightly unhappy
    This really looks like a great product, I just played around with it for an hour or so.
    I have just a question for which I could not find the answer in the help documentation:
    is it possible to choose a larger canvas size than that what fits under all the toolbars? Actually, what I would really love is to pick a size in pixels (say, 1000 x 768) to play around in so to make sure it kind of fits on a monitor if it would be a full-screen webpage. Of course that size would be too big to be visible on my screen with all the toolbars etc, so there would be scrollbars needed. And maybe a 'zoom-out' if you really want to make it cool :-)
    Even better of course would be that I could make my design on that canvas, than could see how different sizes (smaller, bigger) would work out: what would drop off or how much space would be extra.

    This reply was created from a merged topic originally titled
    can I choose a certain canvas size (eg 1000 x 768 px).
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Hi everyone, we're doing a little gardening of the forums and ran into this old issue again. I had a thought: how about we look at all the mockups that are part of your project (i.e. in your folder), find the biggest one and center it. Then we align all other mockups to the top-left of it, so that they won't jump around as you go from one to the other. Thoughts?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • dan2bit
    happy I’m optimistic
    Peldi - this solution sounds like it would solve my issue.

    I'd like to try it and see (of course)
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Julien Laurent
    happy I’m confident
    Hi guys !

    Just purchase this fantastic piece of software ! Bravo !

    I'd really love to see this issue fixed too (the same problem can be seen in pdf version too).

    Fixing mockups size for a project would be a cool feature too.

    Cheers,
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Philipp Quaet-Faslem
    happy I’m confident
    Hi all!

    The workaround with placing a large rectangle in the background is pretty cumbersome because then you don't have a "clean" background anymore. When selecting objects that are obscured by other objects and/or selecting multiple objects at the same time by "drawing" a selection area the background object is in the way.

    But I'm sure you're going to find a good solution!

    Cheers,

    Philipp
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Jenni Merrifield
    happy I’m glad you're revisiting this issue
    1
    @Peldi: I think it would be much easier to just allow the designer to specify the dimensions of the "art board" to work with than to try and figure out what the largest mockup is and then center everything based on that. You could even make it obvious where the art board sits by putting a slightly thicker or perhaps dotted line around the region that would be included.

    If you make it a "soft" boundary, the designer could still place elements outside the region, but the alignment would still be based on the specified dimensions.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • neandrothal
    indifferent I’m frustrated because otherwise Balsamiq is an awesome product!
    I'm having the full-screen misalignment problem even when my mockups are exactly the same size--at least I think they're the same! In my particular case, the addition of a single UI element causes misalignment, even when that element is contained entirely within the area of the mockup.

    For example, I cloned mockup 1 into mockup 2, went full-screen from mockup 1, and opened a link taking me to mockup 2. No change.

    I then added the Tree Pane element to mockup 2, making sure to move it within the area contained by my largest element (a locked browser window). When I went full-screen from mockup 1 and opened the link, no change.

    Then, when I added text to the tree pane in mockup 2 and repeated the test, mockup 2 was shifted upward!

    And when I deleted the text from the tree pane in mockup 2, the shifting persisted.

    I support Jenni's suggestion to create an "art board" or "canvas" that determines the presentation area.
    • Well, I figured out what was going on in my case. It turns out there was a lone callout # at around 100, -70. That's right, it was above the screen, where you can't pan in order to select it! I didn't realize it was there because I had turned off markup. When I went back I found out that all of my mockups had that lonely 1 up there. I think the centering algorithm must have taken it into account and centered relative to the 1.

      Since you can't select things at a negative coordinate, I just copied everything in the visible area onto a new mockup. Problem solved.

      This won't solve everyone's problem (especially if they didn't manage to fling a markup element into negative coordinates), but it might be worth considering excluding markup from the centering algorithm.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Bruce Morehouse
    indifferent I’m looking forward to resolution
    I think that the suggestion of eliminating "Markup" objects from the centering algorithm merits research. At first blush it sounds like it makes sense.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Bernard Farrell
    I'm with @HumanCell, let me choose one item as the center of the display. Then each subsequent view would center on that item. It would need to be an object that's shared by all the views. As I'm designing around an application frame that would work really well for me.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Matt
    I'd like to see something done about this too. If your best-practices explain that wireframes within a folder are treated as a project, and you can have project-wide assets, there should be a way of displaying the project in full-screen mode without each page jumping all over the place.

    Also, not sure why markup would count in the height and width calculations. I like leaving notes for myself on wireframes to help with explaining, but I have to turn them off in full-screen mode.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • hira1sem
    I was trying the online version of Balsamiq and made a very simple sign in form with two fields. They're centered on the screen when I'm creating them but when I download a pdf, png or go full screen the form is in the lower left corner instead of in the center.

    This thread goes back 3 years and it doesn't seem like the problem has been solved. I'm uncertain about paying for the desktop version.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned

  • Ben Norris EMPLOYEE
    happy I’m looking forward to this
    Thanks again for the idea! We plan to include this in the product eventually. Sorry it has taken us so long already! It is lower priority than some of our other features, so it could take a while for us to get to it, even years. Because we are a small team, we try and stay laser-focused on the highest priorities. You can read more about our approach in our Manifesto: http://www.balsamiq.com/products/mock....

    I am closing this thread to further comments, but if you also want to see this feature, please click +1 in the description above. We monitor this forum constantly and look at those numbers to help inform our direction and priority. We will update this thread when we have progress on this feature, so you can follow it to stay informed.

    As you think of other requests and enhancements, please continue to submit them. We take seriously every request that comes in and will respond honestly and openly to it. Thanks for your help in making our product better!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly sad, anxious, confused, frustrated happy, confident, thankful, excited indifferent, undecided, unconcerned