Is it better to put "Preview" on an iFrame with a specific height or just show it in full?

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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.

_{(source: designshack.co.uk)}

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

Answer 4

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.

2. I am a behavior layer:

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

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

Now

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

Answer 5

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.

• http://www.smashingmagazine.com/2009/07/28/designing-read-more-and-continue-reading-links/

Answer 6

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;
}