Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

We have a page that shows a preview of another page (newsletter) on an iFrame. Now we have two ways of displaying this:

  1. Give the iFrame a specific height so that the user can scroll up / down within the iFrame to see the embedded page fully.

  2. Dynamically resize the iFrame to the height of the embedded page so that it actually gets displayed in full (without the iFrame scrollbars).

Is #1 better so that the users can access the buttons at the bottom easily (button is "Next") without scrolling 'till the end of the embedded page? (Although the disadvantage is that iFrame scrollbars are ugly.)

OR

Is #2 better so that the users actually feel like they're just seeing 1 whole page (and no scrollbars)? (Although the disadvantage of this would be the page could be very long depending on newsletter's height. But one can argue that newsletters are seldom very long and that users do scroll down.)?

share|improve this question
2  
Can I suggest a third option? I would say take your first choice - a little window showing the newsletter - but also have a 'new window' option so they can pop the preview out into a separate browser window so they can see it closer to how it's going to work when live. Is that doable, or does it all have to be in-page iframe only? –  JonW Jul 3 '13 at 10:24
    
@JonW Yeah, it's doable. Good suggestion too. –  catandmouse Jul 3 '13 at 14:52
    
@JonW So does that mean that you think not showing it fully (on the same page as the buttons) makes better sense? –  catandmouse Jul 3 '13 at 14:54

5 Answers 5

Consider sending the newsletter to the author's actual e-mail address. This would be a real world preview/test.

share|improve this answer

I agree with Michael regarding his suggestion and about iFrames. From the original question, I recommend going with option 2. Adding a sticky bar across either the top or the bottom of the browser in a contrasting colour would help to modernize the experience.

Similar to Themeforest: http://themeforest.net/item/micron-retina-responsive-multipurpose-theme/full_screen_preview/6949939

See how they have their main sell bar at the top but it doesn't impede on the experience of the preview?

In terms of specifically email, I believe MailRox does the same thing. The preview is within the screen with the tools at the top.

Screenshot of MailRox

Having 1 set of scrollbars (specifically the browser scrollbars) is more ideal.

share|improve this answer

It sounds like you are describing every help widget of 10 years ago. It would be best to abandon the iframe for loading content in this manner. Definitely don't open a new window for the content either unless it's a file. There are more benefits to providing stateless url driven content, the two biggest being:

  • SEO
  • Bookmarking

You could avoid long content by providing a "read more" or "continue reading" link.

share|improve this answer
1  
I would disagree about not using a new window. It is preview content that is being displayed - there is no need for SEO considerations, in fact it is preferrable for the content not to be indexed as it is preview content, not live content. Opening in a new window - if the option is clear that this is what is going to happen - is not a bad option for this situation. –  JonW Jul 3 '13 at 16:19

I have worked on several preview features. I first opted for an overlay with an iframe. This provided the advantage of making a quick glance at the information being presented without having to change page.

However, when we then tried it with the preview loading as a new page in the current tab (not opening a new window and removing the iframe altogether) this allowed for us to also use the same page template we had created for viewing the posted item and provided a better experience to the user.

Once the preview was accepted we directed the user back to their home page. Or if it was rejected they could go back to edit it. The response we had from users was much better with this approach as it meant they could look at the content on different devices more easily, could scroll just with the page scroll bar and meant that the build was actually quicker as we were using similar templates. I would encourage this approach over the use of iframes but speak with your users and see what they think.

share|improve this answer

I'm going to assume this is HTML and will be viewable online. One option is to add div element and have that be stuck to the bottom of the screen as a sort of non-intrusive "bar" for the users to users to skip between these pages.

Prehaps something like this:

<div class="bar">
    <a class="prev" href="<link>">Previous</a>
    <a class="next" href="<link>">Next</a>
</div>

And the CSS would go:

.bar {
    width: 100%;
    height: 36px;
    background: rgba(255, 255, 255, 0.75);
    position: fixed;
    bottom: 0;
    left: 0;
}
share|improve this answer
2  
This doesn't answer the question about what the iframe itself should look like. Also, providing html / css isn't really what UX.Stackexchange is about - we deal with what should happen, not how to implement it. –  JonW Jul 3 '13 at 11:33
1  
I am simply giving him a third, alternative option to consider. Some people frown upon iframes, and also some people would not want to scroll to a bottom of a page to actually get to a next page. I'm providing a happy medium. –  Micheal Harker Jul 3 '13 at 11:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.