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.)


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.)?

  • 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, 2013 at 10:24
  • @JonW Yeah, it's doable. Good suggestion too. Jul 3, 2013 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? Jul 3, 2013 at 14:54
  • Do not use iFrames for textual content. Even as a preview of content residing on another page/url, if it is accessible from the current url it should be part of the DOM object. Use jQuery and pop-ups, for example, to show the content when needed. If you can access it from the page, it should be a part of the page, it should have the appropriate markup to designate its role on the page. So content "role" is the significator in this question... Apr 10, 2019 at 19:19

6 Answers 6


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


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.


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
(source: designshack.co.uk)

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


Let's keep in mind this question does not include all users.

  1. I am a screen reader:

I don't care what shape an iFrame is, I follow direction from this DOM object.

  1. I am a behavior layer:

I don't care what is indexed, I improve what is here on this DOM object.

  1. I am a disabled user and rely on screen readers, voice command software, and behavior layers to understand/interact with web content:

I don't care what is indexed, and I interact with the current information regardless of presentation layers.


  1. I have full visual and articulate faculties and want a "good" UX:

There are so many websites and so many UX options, but I can find trends. With so many options, the best fail-safe I have is relying on the intent of the ecosystem I am currently in. What has the brand taught me? What have other page layouts taught me? Does this current interaction (if not globally) compare to other interactions of the site? Fit with my expectations? When I come to interact with this iFrame, is its presentation unexpected based on my current environment?

At least this would be defensible from a brand standpoint if not even a UX one.

The goal is, look for defensible work, right? If you've checked all the boxes up till 99, then I think your yardstick of measurement will more than likely fall on your Brand Guidelines (or at least as they dictate UX) if there are any questions left.

Doesn't mean your brand can't be something un-usable though...

*Note: The opening of this answer is not intended to be harsh, rather give a starting to point to transition opinion into defensible arguments we can take to work :)


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.

  • 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, 2013 at 16:19

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>

And the CSS would go:

.bar {
    width: 100%;
    height: 36px;
    background: rgba(255, 255, 255, 0.75);
    position: fixed;
    bottom: 0;
    left: 0;
  • 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, 2013 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.
    – megubyte
    Jul 3, 2013 at 11:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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