One potential problem when using iframe elements to produce live portfolio screenshots is the fact that the targeted site is not scaled: the referenced page is shown at full size inside the iframe window. This will likely lend it more visual weight than the designer is comfortable with.

Embedding A Responsive Site In An iFrame

In this case I’ll make the iframe link to a recent project of mine, tipster.io (a site that supplies gratuity rates and practices around the world). The basic HTML is:

<iframe src="http://tipster.io" scrolling="no" id="iframe"></iframe>

The tipster.io site is responsive, which will make sizing the iframe easier:

#iframe {
	width: 360px;
	height: 400px; 
}

The window acts as a mini-browser, and the targeted site will respond appropriately, including any built-in media queries. As a result, we can easily bring the site down to its smallest size within an iframe, or simulate mobile layout in the window. But what if the targeted site (such as sait.ca, the homepage for my institution) is not responsive?

Embedding A Fixed-Width Site In An iFrame

If we want to embed a non-responsive site in a window, we can use CSS transforms to make the targeted page appear smaller:

#iframe {
	width: 1000px;
	height: 600px;
	border: 0;
	transform-origin: 0 0;
	transform: scale(0.4);
}

There are a few important aspects to note about this technique:

• The iframe is provided with a width sufficient to enclose the site. (Think of this as the element’s original width).
• The transform works from the element’s top left corner. This may need to be altered depending on the design of the site that is targeted.
• Naturally, the transform declarations will require vendor prefixes to work in some browsers.
• Because transformed elements act as if they are relatively positioned, we need to compensate for the fact that the rest of the page will be laid out as if the iframe is still at its full size. An obvious step is to wrap the iframe in a <div> and use explicit relative and absolute positioning on the elements. Another is to place negative margin on the iframe to "draw in" normal content that is offset around it:

#iframe {
	width: 1000px;
	height: 600px;
	border: 0;
	transform-origin: 0 0;
	transform: scale(0.5);
	float: left;
	margin-right: -460px;
	/* natural width – scaled width + margin */
	margin-bottom: -260px;
	/* natural height – scaled height + margin */
}

Creating An Image Fallback

While the use of iframe elements for portfolios has its advantages – they will always show up-to-date views of the targeted site – the technique is complicated by the fact that the elements do not gracefully degrade: if an iframe fails to connect to a URL, the window will show a 404 error.

To counter this, it’s possible to use a variation of a technique first suggested by Paul Irish. Rather than using an iframe to view the site, we’ll use an <object> tag, which shares many of the same properties. I’ll deliberately and temporarily misspell the URL of the targeted site to create a error:

<object data="http://saitx.ca" scrolling="no" id=iframe></object>

An object element will not fail in response to a 404 error: if the site is not found, the element will simply come up blank. But we can use an interesting quirk of the tag to create a fallback, placing fallback content between the opening and closing object tags, now with the correct URL:

<object data="http://sait.ca" scrolling="no" id="iframe">
	<img src="sait-screenshot.jpg" alt="SAIT Screenshot">
</object>

While the id for the element is the same, we’ll change the CSS slightly:

#iframe {
	border: 0;
	width: 1000px;
	height: 850px;
	transform-origin: 0 0;
	transform: scale(0.6);
}
#iframe img { width: 400px; }

The result:

• If the URL is available, the current page is shown as a live, interactive site in a window.
• If there is a slow connection, or if the site does not respond, a static screenshot takes its place.

Combined with the scaling technique discussed earlier, I would suggest that this would be the ideal technique for creating a portfolio of live web design work.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.