While the iframe element has many potential uses, it does have one feature that is particularly appealing to designers.
Traditional site screenshots are frozen in time: as static images, they cannot show animation or the results of ongoing development. In an age of advanced CSS and CMS controls, static portfolio images no longer reflect the work of modern web designers.
You can use the iframe element to provide live, always-up-to-date screenshots of your sites, but there are three challenges when doing so: removing scrollbars from the iframe, sizing the result appropriately on your portfolio page, and linking to the real site.
Making a seamless iframe
Integrating iframe content onto a web page commonly produces scrollbars within the element, as the referenced content is usually larger than the frame itself. If you prefer to turn the scrollbars off, there are a few ways of doing so. Officially, there is the HTML5 seamless attribute:
<iframe seamless src="/samples/skullduggery.html"></iframe>Unfortunately, no browser currently supports this feature. It would be my personal recommendation to leave it in place for future compatibility, adding appropriate CSS to achieve the same result in Firefox via an attribute selector:
iframe[seamless] {
overflow: hidden;
border: none;
}Oddly, that’s still not enough for Chrome, Safari or IE, which continue to follow the outdated scrolling attribute. Adding that expands our HTML code:
<iframe seamless src="/samples/skullduggery.html" scrolling="no"></iframe>
<iframe src="/samples/autumn-leaves.html" seamless scrolling="no"></iframe>
<iframe src="/samples/resume.html" seamless scrolling="no"></iframe>Note that scrolling is obsolete in the HTML5 spec, and adding the attribute to your code will render your page invalid. Unfortunately there’s no way to avoid that at the moment.
iframe widths
Reducing the width of the <iframe> element will have the same result as narrowing the browser on the actual page: HTML content in the window will either reflow or be cut off. One of the nice side-effects of this is that media queries in a page targeted in an iframe will continue to operate in that context. (You can see this to a limited degree in the iframes above… with the promise of seeing lot more in the redesign of this blog in the new year).
If responsive sites were the subject of your portfolio, I’d recommend that that you place a percentage width for any iframe that contains a responsive page, as doing so neatly demonstrates the behaviour of the targeted sites to the visitor. If you wanted to scale the targeted page regardless of its internal behaviour, the CSS gets a little tricky; I’ll address the code for that in a future article.
Linking iframes
Links inside of iframes will operate in the context of that frame, but it is reasonable for visitors to expect links to open in a full window. There are a few ways of achieving this:
If you have control over the source of the targeted page, you could add this code inside the <head>:
<base target="_parent">This will make no difference to links in the page under normal circumstances, but will “blow out” if a hyperlink is clicked in the context of an iframe. You can see this in action in the “Skullduggery Inc.” link on the first iframed example on this page, which jumps to the article that inspired it.
As one of the very few justifications for opening links in a new window or tab, you could also do this:
<base target="_blank">Generally speaking opening links in a new window breaks the UI expectations, of visitors, but iframes provide one of the very rare exceptions to the rule.
What if the iframe has no visible links to click on, as in the example of falling leaves at the top of this article? Or what if you want a click anywhere on the screenshot to take the visitor to the relevant site? A link around the iframe won’t work; you have to use a different approach. First, we’ll place the appropriate link after the iframe, and wrap it all in a div:
<div id="framer">
<iframe src="/autumn-leaves.html" seamless scrolling="no"></iframe>
<a href="/604/Seasonal-CSS-Falling-Leaves"></a>
</div>Then, we use the good old absolutely-positioned-element-inside-a-relative-container trick to ensure that the link covers the entire area of the <iframe>:
div#framer {
position: relative;
}
div#framer iframe {
width: 100%;
}
div#framer a {
position: absolute;
top: 0; left: 0;
bottom: 0; right: 0;
}This covers all the behaviours that one would expect from a portfolio screenshot, with the added advantage of a live, constantly updated view of the site. Naturally, you will need to keep an eye on any linked sites to ensure that they remain online; if those sites run on a CMS, you should also be aware of any changes that the client makes to the design or content.
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
